Interim update

Server/app/svelte/public/css/auth.css

@@ -0,0 +1,171 @@
+
+label {
+    font-size: 1.3rem;
+    font-family: var(--sans-serif);
+}
+
+.auth-pane {
+    position: relative;
+    padding: 3.4rem;
+    padding-top: 3.4rem;
+    padding-bottom: 3.4rem;
+    width: 30rem;
+    height: auto;
+}
+
+.auth-title {
+    position: relative;
+    top: 0.2rem;
+    margin-bottom: 2.7rem;
+}
+
+.auth-label {
+    display: inline-block;
+    margin-bottom: 0.3rem;
+}
+
+.authEmailInput, .authPasswordInput {
+    position: relative;
+    width: 100%;
+    border-radius: 0.34rem;
+    color: #353535;
+    height: 2.73rem;
+    padding-left: 0.34rem;
+}
+
+.authEmailInput {
+    margin-bottom: 0.682rem;
+}
+
+.auth-button {
+    margin-top: 1.365rem;
+    height: 3.412rem;
+    width: 100%;
+    font-family: var(--sans-serif,sans-serif);
+    font-size: 1.3rem;
+    color: white;
+    background-color: var(--red);
+    border-color: var(--red);
+    border-radius: 0.512rem;
+    filter: drop-shadow(0.068rem 0.136rem 0.068rem rgb(0 0 0 / 0.4));
+}
+
+.auth-button:active {
+    background-color: var(--darker-pink);
+}
+
+#email-msg,#password-msg {
+    display: inline;
+    color:red;
+    font-family: var(--sans-serif,sans-serif);
+}
+
+.auth-line {
+    margin-top: 1.5rem;
+    width: 100%;
+    height: 0.07rem;
+    border: 0;
+    border-radius: 0.1rem;
+    background: black;
+}
+
+.auth-methods-group {
+    display: grid;
+    grid-template-columns: auto ; /*auto auto*/
+    justify-content: center;
+    gap: 2.7rem;
+    margin-top: 2rem;
+}
+
+.auth-methods-group img {
+    height: auto;
+    width: 3.4rem;
+}
+
+.auth-methods-group> div {
+    position: relative;
+    border-radius: 6.8rem;
+    width: 3.4rem;
+    height: 3.4rem;
+    overflow: hidden;
+}
+
+#google-btn {
+    position: absolute;
+    top: -0.8rem;
+    left: -0.8rem;
+}
+
+#google-logo {
+    position: relative;
+    background: white;
+    pointer-events: none;
+}
+
+#google-btn-wrapper {
+    cursor: pointer;
+}
+
+#google-btn div {
+    position: absolute;
+    height: 5rem;
+    width: 5rem;
+}
+
+#google-btn iframe {
+    position: absolute;
+    height: 10rem;
+    width: 10rem;
+}
+
+.password-field {
+    position: relative;
+}
+
+.eye-icon {
+    display: block; 
+    position: absolute;
+    cursor: pointer;
+    opacity: 0.25;
+    top: 2.6rem;
+    right: 0.8rem;
+    width: 1.7rem;
+}
+
+.eye-icon * {
+    pointer-events: none;
+}
+
+#forgot-password {
+    display: block;
+    position: relative;
+    margin-top: 0.5rem;
+    height: 2rem;
+    color:#5f5f5f;
+    margin-left: auto;
+    width: max-content;
+    font-family: var(--sans-serif);
+    font-size: 1.3rem;
+}
+
+
+#remember-me {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-top: 1rem;
+    gap: 1rem;
+}
+
+#remember-me-checkbox {
+    min-height: 1.5rem;
+    min-width: 1.5rem;
+    flex: 0;
+    accent-color: var(--gray);
+}
+
+#remember-me label {
+    position: relative;
+    margin-top: -0.2rem;
+    color: #5f5f5f;
+}

Server/app/svelte/public/css/common.css

@@ -1,21 +1,7 @@
 
 :root {
-    --light-blue:hsl(195, 67%, 95%);
-    --darker-pink:hsl(344, 60%, 47%);
-    --pink:hsl(344, 73%, 57%);
-    --dark-green:hsl(176, 63%, 25%);
-    --green:hsl(147, 33%, 60%);
-    --orange:hsl(30, 97%, 72%);
-    --light-orange: hsl(19, 76%, 72%);
-    --dark-brown:hsl(23, 47%, 20%);
-    --brown:hsl(23, 47%, 30%);
-    --light-brown: hsl(23, 47%, 50%);
-    --dark-pink:hsl(343, 39%, 16%);
-    --red:hsl(359, 72%, 61%);
-    --dark-blue:hsl(217, 25%, 16%);
-    --grey-blue:hsl(223, 13%, 22%);
-    --cream:hsl(34, 43%, 90%);
-    --dark-cream:hsl(33, 26%, 84%);
+    --red:#c52a28;
+    --gray: #5B6970;
     --sans-serif: "OpenSans";
     --serif: "Lora";
 }
@@ -48,12 +34,10 @@ body {
 
 #content {
     position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+    display: grid;
+    grid-template-rows: max-content auto max-content;
     height: 100%;
     min-height: 100vh;
-    flex-grow: 1;
 }
 
 /*---Fonts---------------------------------------------------------*/
@@ -475,9 +459,8 @@ input[type=number]::-webkit-outer-spin-button {
 
 .pane {
     background: white;
-    border: 0;
+    border:  0.1rem solid rgb(187, 187, 187);
     border-radius: 0.635rem;
-    box-shadow: 0 0 0.314rem rgb(187, 187, 187);
 }
 
 .pane-container {

Server/app/svelte/public/css/profile.css

@@ -0,0 +1,55 @@
+
+
+
+
+/*
+
+#notifications-div>button {
+    cursor: pointer;
+    margin-left: 0.341rem;
+}
+
+#notifications-div>:nth-child(1) {
+    width: 1.706rem;
+    height: 1.706rem;
+    background-color: #ccc;
+    border-radius: 100%;
+}
+
+#notifications-div>:nth-child(2) {
+    width: 2.047rem;
+    height: 2.047rem;
+    background-color: #ccc;
+    border-radius: 100%;
+}
+
+#notifications-div>:nth-child(3) {
+    width: 2.389rem;
+    height: 2.389rem;
+    background-color: #ccc;
+    border-radius: 100%;
+}
+
+#notifications-div>button>div {
+    cursor: pointer;
+    margin: auto;
+    background-color: white;
+    border-radius: 100%;
+}
+
+#notifications-div>:nth-child(1)>div {
+    width: 1.228rem;
+    height: 1.228rem;
+}
+
+#notifications-div>:nth-child(2)>div {
+    width: 1.57rem;
+    height: 1.57rem;
+}
+
+#notifications-div>:nth-child(3)>div {
+    width: 1.843rem;
+    height: 1.843rem;
+}
+
+*/

Server/app/svelte/public/js/libraries/authTools.js

@@ -0,0 +1,160 @@
+
+import {getData, sendData} from "/js/libraries/serverTools.js"
+
+export function getUser(user,callbackOuter) {
+    let callback = function(response) {
+        Object.assign(user,JSON.parse(response))
+        if(callbackOuter!=undefined) {
+            callbackOuter()
+        }
+    }
+    getData("/xx/get-user",callback)
+}
+
+export function changeUser(name,value,user) {
+    if (user[name]!=value && user[name]!=undefined) {
+        user[name] = value
+        let data = new Object();
+        data[name] = value
+        sendData("/xx/change-user",data)
+    }
+}
+
+export function changePasswordVisibility(button) {
+    let input = button.previousElementSibling
+    let type = input.type
+    if (type=="text") {
+        input.type = "password";
+        button.style.opacity = 0.25
+    }
+    else {
+        input.type = "text";
+        button.style.opacity = 1
+    }
+}
+
+export function checkEmail(email,msg) {
+    if (email.includes("@")) {
+        return true
+    }
+    else {
+        msg.innerHTML = "must contain '@'"
+        return false
+    }
+}
+
+export function checkPassword(password,msg) {
+    let passwordLength = password.length
+    if (passwordLength<8) {
+        msg.innerHTML = "must be 8 characters"
+        return false
+    }
+    let numNumbers = password.match(/\d/g)?.length || 0;
+    if (numNumbers<1) {
+        msg.innerHTML = "mush have digits"
+        return false
+    }
+    let numLetters = password.match(/\D/g)?.length || 0;
+    if (numLetters<2) {
+        msg.innerHTML = "must have letters"
+        return false
+    }
+    return true
+}
+
+export function redirectLogged() {
+    let callback = function(responseText) {
+        let response = JSON.parse(responseText)
+        if (response) {
+            window.location.href = "/";
+        }
+    }
+    getData("/xx/check-login",callback)
+}
+
+export function redirectNotLogged() {
+    let callback = function(responseText) {
+        let response = JSON.parse(responseText)
+        if (!response) {
+            window.location.href = "/";
+        }
+    }
+    getData("/xx/check-login",callback)
+}
+
+// Redirect to the landing page
+export function toLandingPage(response) {
+    if (response!=0) {
+        window.location.href = "/";
+    }
+}
+
+// Redirect to the dashboard page
+export function toDashboard() {
+    window.location.href = "/";
+}
+
+// Process log in
+export function processLoginResponse(response,msgs,remember) {
+    if (response==0) {
+        msgs.email.innerHTML = "not found"
+    }
+    else if (response==1) {
+        msgs.password.innerHTML = "is wrong"
+    }
+    else {
+        if (remember) {
+            let date = new Date()
+            date.setMonth(date.getMonth()+1)
+            date = date.toUTCString()
+            document.cookie = "__genierememberme=; expires=" + date + "; path=/;SameSite=Lax";
+        }
+        toDashboard()
+    }
+}
+
+// Log in
+export function login(msgs,inputs) {
+    msgs.email.innerHTML = ""
+    msgs.password.innerHTML = ""
+    let data = {email: inputs.email.value, password: inputs.password.value, remember: inputs.remember.checked}
+    sendData('/xx/login-post', data, (response) => processLoginResponse(response,msgs,inputs.remember.checked))
+}
+
+// Process sign in
+function processSignupResponse(response,msgs) {
+    if (response) {
+        toDashboard()
+    }
+    else {
+        msgs.email.innerHTML = "already exists"
+    }
+}
+
+// Sign up
+export function signup(msgs,inputs) {
+    msgs.email.innerHTML = ""
+    let email = inputs.email.value
+    let password = inputs.password.value
+    if (checkEmail(email,msgs.email)==false) {
+        return
+    }
+    if (checkPassword(password,msgs.password)==false) {
+        return
+    }
+    let data = {email: email, password: password}
+    sendData('/xx/signup-post', data, (response) => processSignupResponse(response,msgs))
+}
+
+export function confirmEmail(msg,code,callback) {
+    msg.innerHTML = ""
+    sendData('xx/confirm-email',code,callback)
+}
+
+// Log out
+export function logout() {
+    var xmlHttp = new XMLHttpRequest();
+    xmlHttp.open( "GET", "/logout", false ); // false for synchronous request
+    xmlHttp.send( null );
+    window.location.href = "/";
+}

Server/app/svelte/public/locales/en/navbar-component.json

@@ -7,5 +7,7 @@
     "communes": "Communes",
     "cooperatives": "Cooperatives",
     "parties": "Parties",
-    "partners": "Partners"
+    "partners": "Partners",
+    "login": "Login",
+    "profile": "Profile"
 }