client validation and more reusable components using generic names fo…

…r async state, also api returns promises and performs store logic

src/components/Settings.svelte

@@ -1,65 +1,53 @@
 <script>
-    import { updateUserSecuritySettings, authUserStore, updateUserSettings } from "../stores/netlifyUserStore";
-    import Spinner from 'svelte-spinner';
+
+
+    import DefaultSpinner from '../components/DefaultSpinner.svelte'
     import { navigate } from "svelte-routing";
+    import { authUserStore, updateUserSecuritySettings } from '../stores/netlifyUserStore';
+
 
     if (!$authUserStore) {
         navigate("/", { replace: true });
     }
-    const clonedUser = Object.assign({}, $authUserStore);
-    let pendingUpdateUserSettings = false
-    let successUpdateUserSettings = false
-
-    let successUpdateUserCustomSettings = false
-    let pendingUpdateUserCustomSettings = false
 
-    console.log($authUserStore)
+    let password = ""
+    let email = $authUserStore.email
+    let showSuccessMessage1 = false
+    let pendingApiCall1 = false
 
-    export function handlerSecurity (email, password) {
-        pendingUpdateUserSettings = true
+    export function submit1 (event) {
+        pendingApiCall1 = true
         updateUserSecuritySettings(email, password).then(newUser => {
-            successUpdateUserSettings = true
-            pendingUpdateUserSettings = false
+            showSuccessMessage1 = true
+            pendingApiCall1 = false
         }).catch(e => {
-            pendingUpdateUserSettings = false
-        });
-    }
-
-    export function handlerCustomData (name) {
-        pendingUpdateUserCustomSettings = true
-        updateUserSettings({name:name}).then(newUser => {
-            successUpdateUserCustomSettings = true
-            pendingUpdateUserCustomSettings = false
-        }).catch(e => {
-            pendingUpdateUserCustomSettings = false
+            pendingApiCall1 = false
             console.log(e)
             alert(e.message)
         });
     }
 
 </script>
-<h1>Your custom settings</h1>
-
-<input placeholder="name" bind:value={$authUserStore.name}>
-<button on:click={()=>handlerCustomData($authUserStore.email,$authUserStore.password)}>Update Settings</button>
-<div>
-    <input type="checkbox" placeholder="lala">
-</div>
-{#if successUpdateUserCustomSettings}
-    <h2>You have successfully updated your settings</h2>
-{:else if pendingUpdateUserCustomSettings}
-    <Spinner></Spinner>
-{/if}
 
-<hr>
 
-<h2>Security</h2>
-<input placeholder="email" bind:value={clonedUser.email}>
-<input placeholder="password" type="password" bind:value={clonedUser.password}>
-<button on:click={()=>handlerSecurity(clonedUser.email,clonedUser.password)}>Update Security Settings</button>
+<div>
+    <h1>Security Settings</h1>
+    <form on:submit|preventDefault={submit1}>
+        <input
+                id="inline-full-name" type="email" required placeholder="Email" bind:value="{email}">
+        <input
+                id="inline-username" type="password" required placeholder="Your password" bind:value="{password}">
+
+
+        <button
+        >Update Security Settings
+        </button>
+        {#if pendingApiCall1}
+            <DefaultSpinner></DefaultSpinner>
+        {/if}
+    </form>
+    {#if showSuccessMessage1}
+        <p>Your Security Settings have been updated.</p>
+    {/if}
 
-{#if successUpdateUserSettings}
-    <h2>You have successfully updated your settings</h2>
-{:else if pendingUpdateUserSettings}
-    <Spinner></Spinner>
-{/if}
+</div>

src/components/Signin.svelte

@@ -1,11 +1,46 @@
 <script>
+
     import { signin } from "../stores/netlifyUserStore";
+    import DefaultSpinner from '../components/DefaultSpinner.svelte'
+    import { navigate } from "svelte-routing";
+    import { authUserStore } from '../stores/netlifyUserStore';
+
+    if ($authUserStore) {
+        navigate("/", { replace: true });
+    }
 
     let password = ""
     let email = ""
+    let pendingApiCall = false
+
+    export function submit (event) {
+        pendingApiCall = true
+        signin(email, password).catch(e => {
+            pendingApiCall = false
+        });
+    }
 </script>
-<h1>Signin</h1>
 
-<input placeholder="email" bind:value={email}>
-<input placeholder="password" type="password" bind:value={password}>
-<button on:click={()=>signin(email,password,true)}>Signin</button>
+
+<div>
+
+    <div>
+        <h1>Login Details</h1>
+        <form on:submit|preventDefault={submit} id="main-form">
+
+            <input
+                    id="inline-full-name" type="email" required placeholder="Email" bind:value="{email}">
+            <input
+                    id="inline-username" type="password" required placeholder="Your password" bind:value="{password}">
+
+            <button
+            >Signin
+            </button>
+            {#if pendingApiCall}
+                <DefaultSpinner></DefaultSpinner>
+            {/if}
+        </form>
+
+
+    </div>
+</div>

src/stores/netlifyUserStore.js

@@ -1,7 +1,9 @@
 import { writable } from 'svelte/store';
 import GoTrue from 'gotrue-js';
+import { navigate } from "svelte-routing";
 
-const url = 'https://svelte-netlify-identity.netlify.com'
+
+const url = 'https://mentorcv.com'
 const goTrueInstance =
     new GoTrue({
         APIUrl: `${url}/.netlify/identity`,
@@ -16,44 +18,39 @@ export function logout () {
     user.logout().then(() => {
         console.log(authUserStore)
         authUserStore.update((user) => undefined)
-        window.location.assign("/");
-
+        navigate("/", { replace: true });
     }).catch((e) => {
         alert(e.message)
     });
 }
 
-export function signin (email, password, remember) {
-    goTrueInstance.login(email, password, remember).then(user => {
-        authUserStore.update(() => user)
-        console.log(`logged in as ${authUserStore}`)
-        window.location.assign("/");
+export function updateUserSecuritySettings (email, password) {
+    return new Promise(
+        function (resolve, reject) {
 
-    }).catch((e) => {
-        alert(e.message)
-    });
-}
+            user.update({ email: email, password: password }).then(user => {
 
-export function updateUserSecuritySettings (email, password) {
-    user.update({ email: email, password: password}).then(user => {
-        authUserStore.update(() => user)
-    }).catch((e) => {
-        alert(e.message)
-    });
+                authUserStore.update(() => user)
+                resolve()
+            }).catch((e) => {
+                alert(e.message)
+                reject()
+            });
+        })
 }
 
-export function updateUserSettings (name) {
+export function signin (email, password) {
     return new Promise(
         function (resolve, reject) {
-
-            user.update().then(user => {
+            goTrueInstance.login(email, password, true).then(user => {
                 authUserStore.update(() => user)
-                resolve()
+                window.location.assign("/");
+
             }).catch((e) => {
                 alert(e.message)
                 reject()
             });
-        });
+        })
 }
 
 export function register (email, password) {