Interim update

Server/app/svelte/src/auth/auth-component.svelte

@@ -0,0 +1,128 @@
+<svelte:options tag="auth-component" />
+
+<script>
+
+    // Import statements
+    import { onMount, setContext,getContext } from 'svelte'
+    import { sendText } from "/js/libraries/serverTools.js"
+    import * as AuthTools from "/js/libraries/authTools.js"
+    import "/js/components/login-component.js" 
+    import "/js/components/signup-component.js"
+
+    // Main code
+    AuthTools.redirectLogged()
+
+    let loginComponent
+    let signupComponent
+
+    let context = {
+        googleInit: false
+    }
+    setContext("auth",context)
+
+    function switchFocus(component) {
+        if (component==loginComponent) {
+            loginComponent.focused = true
+            signupComponent.focused = false
+        }
+        else {
+            loginComponent.focused = false
+            signupComponent.focused = true
+        }
+    }
+
+    function callbackGoogle(data) {
+        console.log(data)
+        sendText("/signup-google",data.credential,(response) => AuthTools.processLoginResponse(response,context.msgs,context.remember.checked))
+    }
+
+    function initGoogle() {
+        if (typeof google != 'undefined') {
+            google.accounts.id.initialize({
+                client_id: '93612176787-sr8qjqem4e3kok4msrnj8s1illt85a9g.apps.googleusercontent.com',
+                callback: callbackGoogle,
+                auto_select: true,
+                context: "signin"
+            })
+            context.googleInit = true
+        }
+        else {
+            setTimeout(initGoogle,100)
+        }
+    }
+
+    initGoogle()
+
+</script>
+
+<div id="auth-group">
+    <div id="auth-grid-group">
+        <login-component bind:this={loginComponent} on:click={() => switchFocus(loginComponent)} on:keydown={() => ""}></login-component>
+        <signup-component bind:this={signupComponent} on:click={() => switchFocus(signupComponent)} on:keydown={() => ""}></signup-component>
+    </div>
+    <div id="auth-or" class="pane">
+        <span>OR</span>
+    </div>
+</div>
+
+<style>
+    @import '/css/common.css';
+
+    span {
+        font-size: 1.4rem;
+        font-family: var(--sans-serif,sans-serif);
+    }
+
+    #auth-group {
+        margin: auto;
+        width: auto;
+        margin-bottom: 3rem;
+    }
+
+    #auth-grid-group {
+        display: grid;
+        grid-template-columns: 30rem 30rem;
+        justify-content: center;
+        gap: 1.37rem;
+        width: 100%;
+    }
+
+    #auth-or {
+        display: flex;
+        position: absolute;
+        margin: auto;
+        top: 40%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 5.4rem;
+        height: 5.4rem;
+        border-radius: 6.8rem;
+        background-color: white;
+        align-items:center;
+        justify-content:center;
+        font-family: var(--sans-serif,sans-serif);
+        font-weight: 500;
+    }
+
+    @media only screen and (max-width: 1200px) {
+        #auth-grid-group {
+            display: grid;
+            grid-template-columns: 30rem;
+            grid-template-rows: auto auto;
+            justify-content: center;
+            gap: 1.37rem;
+            width: 100%;
+        }
+
+        #auth-or {
+            top: 46.4rem;
+        }
+
+        #auth-group {
+            margin-top: 2rem;
+            margin-bottom: 3rem;
+        }
+    }
+
+
+</style>

Server/app/svelte/src/auth/confirmation-component.svelte

@@ -0,0 +1,131 @@
+<svelte:options tag="confirmation-component" />
+
+<script>
+
+    // Import statements
+    import { onMount } from 'svelte'
+    import * as AuthTools from "/js/libraries/authTools.js"
+
+    // Export statements
+    
+    // Main code
+    let confirmationInputs = []
+    let confirmationMsg
+    let confirmationButton
+
+    function onlyNumberKey(ind,evt) {
+        // Only ASCII character in that range allowed
+        var value = evt.data
+        if (value in ["0","1","2","3","4","5","6","7","8","9"]) {
+            if (ind<4) {
+                confirmationInputs[ind+1].focus()
+            }
+            else {
+                AuthTools.confirmEmail(confirmationMsg,getCode(),callback)
+            }
+        }
+        else {
+            confirmationInputs[ind].value = ""
+        }
+    }
+
+    function getCode() {
+        let code = ""
+        for (let input of confirmationInputs) {
+            code += input.value
+        }
+        return parseInt(code)
+    }
+
+    function callback(response) {
+        if (response=="true") {
+            AuthTools.toDashboard()
+        }
+        else {
+            confirmationMsg.innerHTML = "Wrong code"
+        }
+    }
+
+    onMount(() => {
+
+	})
+      
+</script>
+
+<div class="pane auth-pane">
+    <h2 class="auth-title title-highlight">CONFIRMATION CODE</h2>
+    <div id="confirmationInputs">
+        <input bind:this={confirmationInputs[0]} class="authConfirmationInput" type="text" maxlength="1" on:input={(evt) => onlyNumberKey(0,evt)}><span class="dash">-</span>
+        <input bind:this={confirmationInputs[1]} class="authConfirmationInput" type="text" maxlength="1" on:input={(evt) => onlyNumberKey(1,evt)}><span class="dash">-</span>
+        <input bind:this={confirmationInputs[2]} class="authConfirmationInput" type="text" maxlength="1" on:input={(evt) => onlyNumberKey(2,evt)}><span class="dash">-</span>
+        <input bind:this={confirmationInputs[3]} class="authConfirmationInput" type="text" maxlength="1" on:input={(evt) => onlyNumberKey(3,evt)}><span class="dash">-</span>
+        <input bind:this={confirmationInputs[4]} class="authConfirmationInput" type="text" maxlength="1" on:input={(evt) => onlyNumberKey(4,evt)}>
+    </div>
+    <span bind:this={confirmationMsg} id="confirmation-msg"></span>
+    <button bind:this={confirmationButton} class="auth-button" on:click="{() => AuthTools.confirmEmail(confirmationMsg,getCode(),callback)}">Confirm</button>
+</div>
+
+<style>
+
+    @import '/css/common.css';
+
+    .auth-pane {
+        position: relative;
+        padding: 3.4rem;
+        padding-top: 5.5rem;
+        padding-bottom: 5.5rem;
+        width: 33rem;
+        height: auto;
+        margin: auto;
+    }
+
+    .auth-title {
+        position: relative; 
+        left: 0.7rem;
+        top: 0.2rem;
+        margin-bottom: 1.4rem;
+    }
+
+    .authConfirmationInput {
+        position: relative;
+        width: 3.16rem;
+        font-family: var(--serif,serif);
+        font-size: 3rem;
+        border-radius: 0.34rem;
+        margin-bottom: 0.7rem;
+        text-align: center;
+        padding-left: 0;
+        padding-bottom: 0.3 rem;
+    }
+
+    .dash {
+        display: block;
+        font-size: 3rem;
+        font-family: var(--serif,serif);
+    }
+
+    #confirmationInputs {
+        margin: auto;
+        display: grid;
+        justify-content: space-between;
+        grid-auto-flow: column;
+    }
+
+    .auth-button {
+        margin-top: 1.4rem;
+        height: 3.4rem;
+        width: 100%;
+        font-family: var(--sans-serif,sans-serif);
+        font-size: 1.6rem;
+        color: white;
+        background-color: var(--pink);
+        border-color: var(--pink);
+        border-radius: 0.5rem;
+        filter: drop-shadow(0.07rem 0.14rem 0.07rem rgb(0 0 0 / 0.4));
+    }
+
+    #confirmation-msg {
+        display: inline;
+        color:red;
+    }
+</style>

Server/app/svelte/src/auth/login-component.svelte

@@ -0,0 +1,108 @@
+<svelte:options tag="login-component" />
+
+<script>
+
+    // Import statements
+    import { onMount, getContext } from 'svelte'
+    import * as AuthTools from "/js/libraries/authTools.js"
+
+    // Export statements
+    export let focused = false
+
+    // Main code
+
+    let emailInput
+    let passwordInput
+    let inputs
+    
+    let passwordVisibilityButton
+
+    let emailMsg
+    let passwordMsg
+    let msgs
+    let rememberMe
+
+    let googleButton
+
+    let parentProps = getContext("auth")
+
+    function renderGoogle() {
+        if (parentProps.googleInit) {
+            google.accounts.id.renderButton(googleButton,{ 
+                theme: 'outline', 
+                size: 'large'
+            })
+            let iframe = googleButton.getElementsByTagName('iframe')[0]
+            iframe.style.height = "5rem"
+            iframe.style.width = "5rem"
+        }
+        else {
+            setTimeout(renderGoogle,100)
+        }
+    }
+
+    onMount(() => {
+
+        rememberMe.checked = true
+
+        inputs = {email: emailInput, password: passwordInput, remember: rememberMe}
+        msgs = {email: emailMsg, password: passwordMsg}
+
+        parentProps.msgs = msgs
+        parentProps.remember = rememberMe
+        parentProps.loginGoogle = googleButton
+
+        document.addEventListener("keypress", function(event) {
+            if (event.code == "Enter") {
+                if (focused) {
+                    AuthTools.login(msgs,inputs)
+                }
+            }
+        })
+
+        renderGoogle()
+
+	})
+</script>
+
+<div id="login-group"class="pane auth-pane">
+    <h2 class="auth-title">LOG IN</h2>
+    <label class="auth-label" for="emailInput">Email&nbsp;</label><span bind:this={emailMsg} id="email-msg"></span>
+    <input bind:this={emailInput} id="emailInput" class="authEmailInput" type="email">
+    <div class="password-field">
+        <label class="auth-label" for="passwordInput">Password&nbsp;</label><span bind:this={passwordMsg} id="password-msg"></span>
+        <input bind:this={passwordInput}  id="passwordInput" class="authPasswordInput" type="password">
+        <button bind:this={passwordVisibilityButton} class="eye-icon" on:click="{() => AuthTools.changePasswordVisibility(passwordVisibilityButton)}">
+            <object type="image/svg+xml" data="/img/auth/eye_icon.svg" title="eye icon"></object>
+        </button>
+    </div>
+    <div id="remember-me">
+        <input bind:this={rememberMe} type="checkbox" id="remember-me-checkbox"><label id="remember-me-label" for="passwordInput">remember me</label>
+    </div>
+    <button class="auth-button" on:click="{() => AuthTools.login(msgs,inputs)}">Log in</button>
+    <a id="forgot-password" href="forgot-password">Forgot password?</a>
+    <hr class="auth-line">
+    <div class="auth-methods-group">
+        <div id="google-btn-wrapper">
+            <div bind:this={googleButton} id="google-btn"></div>
+            <img src="/img/auth/google_icon.svg" id="google-logo" alt="google icon">
+        </div>
+        <!--
+        <button on:click={openGoogleWindow}>
+            <img src="img/auth/google_icon.svg" id="navbar-logo" alt="google icon">
+        </button>
+        <button onclick="">
+            <img src="img/auth/facebook_icon.svg" id="navbar-logo" alt="facebook icon">
+        </button>
+        <button onclick="">
+            <img src="img/auth/linkedin_icon.svg" id="navbar-logo" alt="linkedin icon">
+        </button>-->
+    </div>
+</div>
+
+<style>
+
+    @import '/css/common.css';
+    @import '/css/auth.css';
+    
+</style>

Server/app/svelte/src/auth/signup-component.svelte

@@ -0,0 +1,241 @@
+<svelte:options tag="signup-component" />
+
+<script>
+
+    // Import statements
+    import { onMount, getContext } from 'svelte'
+    import * as AuthTools from "/js/libraries/authTools.js"
+
+    // Export statements
+    export let focused = false
+
+    // Main code
+
+    let signupGroup
+    let emailInput
+    let passwordInput
+    let passwordVisibilityButton
+    let inputs
+    let googleButton
+
+    let emailMsg
+    let passwordMsg
+    let msgs
+    let rememberMe
+
+    let dialog
+    let signUp
+    let signUpField
+
+    let parentProps = getContext("auth")
+
+    function removeMsg(msg) {
+        if (msg.innerHTML!="") {
+            msg.innerHTML = ""
+        }
+    }
+
+    function showDialog() {
+        dialog.style.display = "block"
+    }
+
+    function hide() {
+        if (dialog!=null) {
+            dialog.style.display = "none";
+        }
+    }
+
+    function sendEmail() {
+        let email = signUpField.value
+        if (email.includes("@")) {
+            sendText("/get-email",email)
+            signUpField.value = ""
+            signUpField.placeholder = "Subscribed!"
+            signUpField.style.setProperty("--c", "hsl(147, 33%, 60%)")
+        }
+        else {
+            signUpField.value = ""
+            signUpField.placeholder = "must contain '@'"
+            signUpField.style.setProperty("--c", "hsl(0, 100%, 60%)")
+        }
+    }
+
+    function clearField() {
+        signUpField.placeholder = ""
+    }
+
+    function renderGoogle() {
+        if (parentProps.googleInit) {
+            google.accounts.id.renderButton(googleButton,{ 
+                theme: 'outline', 
+                size: 'large'
+            })
+        }
+        else {
+            setTimeout(renderGoogle,100)
+        }
+    }
+
+    onMount(() => { 
+
+        rememberMe.checked = true
+        inputs = {email: emailInput, password: passwordInput}
+        msgs = {email: emailMsg, password: passwordMsg}
+
+        document.addEventListener("keypress", function(event) {
+            if (event.code == "Enter") {
+                if (focused) {
+                    AuthTools.signup(msgs,inputs,toLandingPage)
+                }
+            }
+        })
+
+        //renderGoogle()
+	})
+
+</script>
+
+<div id="signup-group" class="pane auth-pane" bind:this={signupGroup}>
+    <h2 class="auth-title">SIGN UP</h2>
+    <label class="auth-label" for="emailInput">Email&nbsp;</label><span bind:this={emailMsg} id="email-msg" on:change={() => removeMsg(emailMsg)}></span>
+    <input bind:this={emailInput} id="emailInput" class="authEmailInput" type="email">
+    <div class="password-field">
+        <label class="auth-label" for="emailInput">Password&nbsp;</label><span bind:this={passwordMsg} id="password-msg"></span>
+        <input bind:this={passwordInput} id="passwordInput" class="authPasswordInput" type="password" on:change={() => removeMsg(passwordMsg)}>
+        <button bind:this={passwordVisibilityButton} class="eye-icon" on:click="{() => AuthTools.changePasswordVisibility(passwordVisibilityButton)}">
+            <object type="image/svg+xml" data="/img/auth/eye_icon.svg" title="eye-icon"></object>
+        </button>
+    </div>
+    <div id="remember-me">
+        <input bind:this={rememberMe} type="checkbox" id="remember-me-checkbox"><label id="remember-me-label" for="passwordInput">remember me</label>
+    </div>
+    <button class="auth-button" on:click="{showDialog}">Sign up</button> <!--() => AuthTools.signup(msgs,inputs,AuthTools.toLandingPage)-->
+    <p id="forgot-password"></p>
+    <hr class="auth-line">
+    <div class="auth-methods-group">
+        <button on:click="{showDialog}">
+            <img src="/img/auth/google_icon.svg" id="navbar-logo" alt="google icon">
+        </button>
+        <!--<button onclick="">
+            <img src="img/auth/facebook_icon.svg" id="navbar-logo" alt="facebook icon">
+        </button>
+        <button onclick="">
+            <img src="img/auth/linkedin_icon.svg" id="navbar-logo" alt="linkedin icon">
+        </button>-->
+    </div>
+</div>
+
+<div bind:this={dialog} id="dialog">
+    <button id="shadow" on:click={hide}></button>
+    <div id="wrapper" class="pane">
+        <h2>Registration is closed</h2>
+        <p>We are still in the process of opening.</p>
+        <p>Sign up for updates to know when it becomes available:</p>
+        <div id="newsletter-container">
+            <input bind:this={signUpField}  on:click={clearField} id="newsletterEmailInput" type="text">
+            <button bind:this={signUp} on:click={sendEmail} id="newsletterEmailButton">sign up</button>
+        </div>
+        <button id="no-button" on:click={hide}>No thanks</button>
+    </div>
+</div>
+
+<style>
+
+    @import '/css/common.css';
+    @import '/css/auth.css';
+
+    #dialog {
+        display: none;
+    }
+
+    #wrapper p {
+        text-align: justify;
+    }
+
+    #wrapper h2 {
+        text-align: center;
+        margin-bottom: 1rem;
+    }
+
+    #shadow {
+        position: fixed;
+        cursor: default;
+        top: 50%; right: 50%;
+        transform: translate(50%,-50%);
+        width: 100vw;
+        height: 100vh;
+        background:rgb(0, 0, 0, 0.2);
+        z-index: 999999;
+    }
+
+    #newsletter-container {
+        position: relative;
+        height: 3rem;
+        width: 100%;
+        margin-top: 1rem;
+        display: flex;
+        flex-direction: row;
+    }
+
+    #newsletterEmailInput {
+        height: 2.5rem;
+        border-radius: 0.2rem 0 0 0.2rem;
+        filter: drop-shadow( 0.07rem 0.14rem 0.07rem rgb(0 0 0 / 0.4));
+        flex-grow: 1;
+    }
+
+    #newsletterEmailInput::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+        color: var(--c,gray);
+        opacity: 1; /* Firefox */
+    }  
+
+    #newsletterEmailButton {
+        width: 6.8rem;
+        height: 2.5rem;
+        background: var(--pink);
+        color: #ffffff;
+        font-family: var(--sans-serif,sans-serif);
+        font-size: 1.4rem;
+        border-radius: 0 0.2rem 0.2rem 0;
+        filter: drop-shadow( 0.07rem 0.14rem 0.07rem rgb(0 0 0 / 0.4));
+    }
+
+    #newsletterEmailButton:active {
+        background: var(--darker-pink);
+    }
+
+    #wrapper {
+        top: 50%; right: 50%;
+        transform: translate(50%,-50%);
+        position: fixed;
+        max-width: 36rem;
+        width: 90vw;
+        padding: 2rem 4rem;
+        z-index: 1999999;
+    }
+
+    #wrapper * {
+        font-family: var(--sans-serif);
+    }
+ 
+    #no-button {
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 13rem;
+        height: 3rem;
+        margin-top: 2rem;
+        margin-bottom: 0.5rem;
+        background: #ffffff;
+        border: 0.2rem solid var(--pink);
+        font-family: var(--sans-serif,sans-serif);
+        font-size: 1.4rem;
+        border-radius: 0.5rem;
+        filter: drop-shadow( 0.07rem 0.14rem 0.07rem rgb(0 0 0 / 0.4));
+    }
+
+    #no-button:active {
+        background: hsl(343, 23%, 82%);
+    }
+
+</style>