CLASSROOMIO-T-1: Login/Signup UI page

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="you@domain.com"
-            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="you@domain.com"
+        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>