CLASSROOMIO-T-1: 1st logic for signup

src/routes/_layout.svelte

@@ -37,9 +37,9 @@
   });
 
   async function getProfile() {
-    console.log('Get user profile');
     // Get user profile
     const authUser = supabase.auth.user();
+    console.log('Get user profile', authUser);
 
     // Check if user has profile
     let {
@@ -82,6 +82,7 @@
           goto('/dashboard');
         }
       }
+      $user.fetchingUser = false;
     } else if (profileData) {
       // Profile exists, go to profile page
       $user.fetchingUser = false;

src/routes/signup.svelte

@@ -5,81 +5,92 @@
 </script>
 
 <script>
+  import { goto } from '@sapper/app';
   import { Chasing } from 'svelte-loading-spinners';
   import TextField from '../components/Form/TextField.svelte';
   import PrimaryButton from '../components/PrimaryButton/index.svelte';
   import { getSupabase } from '../utils/functions/supabase';
   import { user } from '../utils/store/user';
+  import {
+    signUpValidation,
+    getConfirmPasswordError,
+    getDisableSubmit,
+  } from '../utils/functions/validator';
+  import { SIGNUP_FIELDS } from '../utils/constants/authentication';
   import AuthUI from '../components/AuthUI/index.svelte';
+  import EmailSentIcon from '../components/Icons/EmailSentIcon.svelte';
 
   export let config;
 
   let supabase = getSupabase(config);
-  let email;
-  let name;
-  let password;
-  let passwordAgain;
+  let fields = Object.assign({}, SIGNUP_FIELDS);
   let loading = false;
   let success = false;
   let errors = {};
+  let submitError;
+  let disableSubmit = false;
 
   async function handleSubmit() {
-    if (!email) {
-      errors = {
-        email: 'Email is required',
-        password: 'Password is required',
-      };
+    const validationRes = signUpValidation(fields);
+    console.log('validationRes', validationRes);
+
+    if (Object.keys(validationRes).length) {
+      errors = Object.assign(errors, validationRes);
       return;
     }
 
     try {
       loading = true;
-      const { data, error } = await supabase.auth.signIn(
-        { email },
-        {
-          redirectTo: window.location.origin + '/login',
-        }
-      );
+      const { data, error } = await supabase.auth.signUp({
+        email: fields.email,
+        password: fields.password,
+        options: {
+          data: {
+            fullname: fields.name,
+          },
+        },
+      });
       if (error) throw error;
 
-      success = true;
-      email = {};
+      return goto('/login');
+      // success = true;
+      // fields = Object.assign({}, SIGNUP_FIELDS);
     } catch (error) {
-      errors = {
-        email: error.error_description || error.message,
-      };
+      submitError = error.error_description || error.message;
     } finally {
       loading = false;
     }
   }
+
+  $: errors.confirmPassword = getConfirmPasswordError(fields);
+  $: disableSubmit = getDisableSubmit(fields);
 </script>
 
 <svelte:head>
   <title>Sign Up - ClassroomIO</title>
 </svelte:head>
 
-<AuthUI {supabase} isLogin={false} {handleSubmit}>
+<AuthUI {supabase} isLogin={false} {handleSubmit} showOnlyContent={success}>
   <div class="mt-4 w-full">
     {#if $user.fetchingUser}
       <div class="h-40 text-md flex items-center justify-center">
         <Chasing size="60" color="#ff3e00" unit="px" duration="1s" />
       </div>
     {:else if success}
-      <div class="h-40 text-md flex items-center justify-center flex-col">
-        <p class="">
-          A link has been sent to your email. Please check both your
+      <div class="text-md flex items-center justify-center flex-col">
+        <EmailSentIcon />
+        <h2 class="text-xl">Email sent!</h2>
+        <p class="mt-4 text-center">
+          We have sent a confirmation email to {fields.email}. Please check both
+          your
           <strong>spam </strong>and your<strong>&nbsp; inbox</strong>.
         </p>
-        <p class="mt-2 underline">
-          If our email is in your spam, do make sure you mark our email address
-          as safe, then move it from your spam to your inbox.
-        </p>
       </div>
     {:else}
       <p class="text-lg font-semibold mb-6">Create a free account</p>
       <TextField
         label="Full Name"
-        bind:value={name}
+        bind:value={fields.name}
         type="text"
         autoFocus={true}
         placeholder="e.g Joke Silva"
@@ -87,37 +98,45 @@
         inputClassName="w-full"
         isDisabled={loading}
         errorMessage={errors.name}
+        isRequired
       />
       <TextField
         label="Your Email"
-        bind:value={email}
+        bind:value={fields.email}
         type="email"
         placeholder="[email protected]"
         className="mb-6"
         inputClassName="w-full"
         isDisabled={loading}
         errorMessage={errors.email}
+        isRequired
       />
       <TextField
         label="Your Password"
-        bind:value={password}
+        bind:value={fields.password}
         type="password"
         placeholder="************"
         className="mb-6"
         inputClassName="w-full"
         isDisabled={loading}
         errorMessage={errors.password}
+        helperMessage="Password must be more than 6 characters"
+        isRequired
       />
       <TextField
         label="Confirm Password"
-        bind:value={passwordAgain}
+        bind:value={fields.confirmPassword}
         type="password"
         placeholder="************"
         className="mb-6"
         inputClassName="w-full"
         isDisabled={loading}
-        errorMessage={errors.passwordAgain}
+        errorMessage={errors.confirmPassword}
+        isRequired
       />
+      {#if submitError}
+        <p class="text-sm text-red-500">{submitError}</p>
+      {/if}
       <div class="w-full text-right">
         <a class="text-md text-blue-700" href="/forgot"> Forgot password? </a>
       </div>
@@ -126,12 +145,11 @@
 
   {#if !success}
     <div class="my-4 w-full flex justify-end items-center">
-      <!-- <a href="/login" class="text-blue-700 text-sm">Create an account</a> -->
       <PrimaryButton
-        label={loading ? 'Creating...' : 'Log In'}
+        label={loading ? 'Creating...' : 'Create Account'}
         type="submit"
         className="py-3 sm:w-full w-full"
-        isDisabled={loading}
+        isDisabled={disableSubmit || loading}
       />
     </div>
   {/if}