CLASSROOMIO-T-1: Login/Signup UI page

src/routes/_layout.svelte

@@ -197,5 +197,10 @@
   :global(:root) {
     --main-primary-color: rgba(29, 78, 216, 1);
     --border-color: #eaecef;
+    --app-background-color: #fafbfc;
+  }
+
+  :global(.app-background-color) {
+    background-color: var(--app-background-color);
   }
 </style>

src/routes/login.svelte

@@ -10,11 +10,13 @@
   import PrimaryButton from '../components/PrimaryButton/index.svelte';
   import { getSupabase } from '../utils/functions/supabase';
   import { user } from '../utils/store/user';
+  import AuthUI from '../components/AuthUI/index.svelte';
 
   export let config;
 
   let supabase = getSupabase(config);
   let email;
+  let password;
   let loading = false;
   let success = false;
   let errors = {};
@@ -23,6 +25,7 @@
     if (!email) {
       errors = {
         email: 'Email is required',
+        password: 'Password is required',
       };
       return;
     }
@@ -50,75 +53,64 @@
 </script>
 
 <svelte:head>
-  <title>Join ClassroomIO</title>
+  <title>Login - ClassroomIO</title>
 </svelte:head>
 
-<div class="w-full h-screen flex items-center justify-center ">
-  <div class="container border border-gray-300 rounded-md p-2 lg:p-12">
-    <form
-      on:submit|preventDefault={handleSubmit}
-      class="flex items-center flex-col w-full"
-    >
-      <img
-        src="/logo-192.png"
-        alt="ClassroomIO logo"
-        height="70"
-        width="70"
-        data-atf="1"
-      />
-      <h4 class="text-lg m-0 mt-3">Login</h4>
-      <p class="text-sm">into ClassroomIO</p>
-
-      <div class="my-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
-              <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}
-          <TextField
-            label="Email address"
-            bind:value={email}
-            type="email"
-            autoFocus={true}
-            placeholder="[email protected]"
-            inputClassName="rounded-md w-full px-2 py-4"
-            isDisabled={loading}
-            errorMessage={errors.email}
-          />
-          <p class="py-3 text-md">
-            A magic link will be sent to your email, please open the link
-          </p>
-        {/if}
+<AuthUI {supabase} isLogin={true} {handleSubmit}>
+  <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>
-
-      {#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...' : 'Next'}
-            type="submit"
-            className="py-2 px-4"
-            isDisabled={loading}
-          />
-        </div>
-      {/if}
-    </form>
+    {: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
+          <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">Welcome back</p>
+      <TextField
+        label="Your email"
+        bind:value={email}
+        type="email"
+        autoFocus={true}
+        placeholder="[email protected]"
+        className="mb-6"
+        inputClassName="w-full"
+        isDisabled={loading}
+        errorMessage={errors.email}
+      />
+      <TextField
+        label="Your password"
+        bind:value={password}
+        type="password"
+        placeholder="************"
+        className="mb-6"
+        inputClassName="w-full"
+        isDisabled={loading}
+        errorMessage={errors.password}
+      />
+      <div class="w-full text-right">
+        <a class="text-md text-blue-700" href="/forgot"> Forgot password? </a>
+      </div>
+    {/if}
   </div>
-</div>
 
-<style>
-  .container {
-    width: 450px;
-  }
-</style>
+  {#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'}
+        type="submit"
+        className="py-3 sm:w-full w-full"
+        isDisabled={loading}
+      />
+    </div>
+  {/if}
+</AuthUI>

src/routes/signup.svelte

@@ -5,39 +5,49 @@
 </script>
 
 <script>
+  import { Chasing } from 'svelte-loading-spinners';
   import TextField from '../components/Form/TextField.svelte';
-  import Select from '../components/Form/Select.svelte';
   import PrimaryButton from '../components/PrimaryButton/index.svelte';
   import { getSupabase } from '../utils/functions/supabase';
+  import { user } from '../utils/store/user';
+  import AuthUI from '../components/AuthUI/index.svelte';
+
   export let config;
 
   let supabase = getSupabase(config);
-
   let email;
-  let userType = 0;
+  let name;
+  let password;
+  let passwordAgain;
+  let loading = false;
+  let success = false;
+  let errors = {};
 
-  const userTypes = [
-    {
-      text: '--Select an option--',
-      value: 0,
-    },
-    {
-      text: 'Student',
-      value: 1,
-    },
-    {
-      text: 'Organization/Teacher',
-      value: 2,
-    },
-  ];
   async function handleSubmit() {
+    if (!email) {
+      errors = {
+        email: 'Email is required',
+        password: 'Password is required',
+      };
+      return;
+    }
+
     try {
       loading = true;
-      const { error } = await supabase.auth.signIn({ email });
+      const { data, error } = await supabase.auth.signIn(
+        { email },
+        {
+          redirectTo: window.location.origin + '/login',
+        }
+      );
       if (error) throw error;
-      alert('Check your email for the login link!');
+
+      success = true;
+      email = {};
     } catch (error) {
-      alert(error.error_description || error.message);
+      errors = {
+        email: error.error_description || error.message,
+      };
     } finally {
       loading = false;
     }
@@ -45,60 +55,84 @@
 </script>
 
 <svelte:head>
-  <title>Join ClassroomIO</title>
+  <title>Sign Up - ClassroomIO</title>
 </svelte:head>
 
-<div class="w-full h-screen flex items-center justify-center ">
-  <div class="container border border-gray-300 rounded-md p-12">
-    <form
-      on:submit|preventDefault={handleSubmit}
-      class="flex items-center flex-col w-full"
-    >
-      <img
-        src="/logo-192.png"
-        alt="ClassroomIO logo"
-        height="70"
-        width="70"
-        data-atf="1"
-      />
-      <h4 class="text-lg m-0 mt-3">Signup</h4>
-      <p class="text-sm">for ClassroomIO</p>
-
-      <!-- <div class="my-4 w-full">
-        <Select
-          label="Who are you?"
-          bind:value={userType}
-          options={userTypes}
-          valueKey="value"
-          isRequired={true}
-        />
-      </div> -->
-
-      <div class="my-4 w-full">
-        <TextField
-          bind:value={email}
-          autofocus={true}
-          label="Email"
-          type="email"
-          placeholder="Enter your email"
-          inputClassName="rounded-md w-full px-2 py-4"
-          isRequired={true}
-        />
-        <p class="py-3 text-sm">
-          A magic link will be sent to your email, please open the link
+<AuthUI {supabase} isLogin={false} {handleSubmit}>
+  <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
+          <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>
-
-      <div class="my-4 w-full flex justify-between items-center">
-        <a href="/login" class="text-blue-700 text-sm">I have an account</a>
-        <PrimaryButton label="Next" type="submit" className="py-2 px-4" />
+    {:else}
+      <p class="text-lg font-semibold mb-6">Create a free account</p>
+      <TextField
+        label="Full Name"
+        bind:value={name}
+        type="text"
+        autoFocus={true}
+        placeholder="e.g Joke Silva"
+        className="mb-6"
+        inputClassName="w-full"
+        isDisabled={loading}
+        errorMessage={errors.name}
+      />
+      <TextField
+        label="Your Email"
+        bind:value={email}
+        type="email"
+        placeholder="[email protected]"
+        className="mb-6"
+        inputClassName="w-full"
+        isDisabled={loading}
+        errorMessage={errors.email}
+      />
+      <TextField
+        label="Your Password"
+        bind:value={password}
+        type="password"
+        placeholder="************"
+        className="mb-6"
+        inputClassName="w-full"
+        isDisabled={loading}
+        errorMessage={errors.password}
+      />
+      <TextField
+        label="Confirm Password"
+        bind:value={passwordAgain}
+        type="password"
+        placeholder="************"
+        className="mb-6"
+        inputClassName="w-full"
+        isDisabled={loading}
+        errorMessage={errors.passwordAgain}
+      />
+      <div class="w-full text-right">
+        <a class="text-md text-blue-700" href="/forgot"> Forgot password? </a>
       </div>
-    </form>
+    {/if}
   </div>
-</div>
 
-<style>
-  .container {
-    width: 450px;
-  }
-</style>
+  {#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'}
+        type="submit"
+        className="py-3 sm:w-full w-full"
+        isDisabled={loading}
+      />
+    </div>
+  {/if}
+</AuthUI>