From e14af6b1ade10fd5fa1242b6386b47b49b05fffe Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Mon, 28 Nov 2022 11:23:46 +0100
Subject: [PATCH] CLASSROOMIO-T-1: Login/Signup UI page

---
 package-lock.json                             |  28 ++-
 src/components/AuthUI/index.svelte            |  68 +++++++
 src/components/Form/TextField.svelte          |  39 +++-
 src/components/IconButton/index.svelte        |   2 +
 src/components/Icons/GoogleIconColored.svelte |  32 ++++
 src/components/Icons/PasswordEye.svelte       |  43 +++++
 src/components/Navigation/index.svelte        |  20 +-
 src/components/PrimaryButton/constants.js     |  13 +-
 src/components/PrimaryButton/index.svelte     |   4 +-
 src/routes/_layout.svelte                     |   5 +
 src/routes/login.svelte                       | 126 ++++++-------
 src/routes/signup.svelte                      | 174 +++++++++++-------
 12 files changed, 397 insertions(+), 157 deletions(-)
 create mode 100644 src/components/AuthUI/index.svelte
 create mode 100644 src/components/Icons/GoogleIconColored.svelte
 create mode 100644 src/components/Icons/PasswordEye.svelte

diff --git a/package-lock.json b/package-lock.json
index ddb5fe27..736ed516 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1946,9 +1946,9 @@
       "integrity": "sha512-S18o4Y9PqI/uabdlT/jI3MY7XBJjNxnfapFIkjkMwpz6qNxLFZOm2b22OMf4ZYDL9lpNWI+Ih4fEMVPwO1KHFQ=="
     },
     "carbon-icons-svelte": {
-      "version": "10.28.0",
-      "resolved": "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.28.0.tgz",
-      "integrity": "sha512-C3K+U2PRy63WHFZme1HQNju89rhVIQmUkfgBrZzcezdutkhXbSPOY+o/MI0B2mDcQ7G9gfhEpqsXET8gBTWfJQ==",
+      "version": "10.45.1",
+      "resolved": "https://flipplib.jfrog.io/artifactory/api/npm/flipp-npm/carbon-icons-svelte/-/carbon-icons-svelte-10.45.1.tgz",
+      "integrity": "sha512-Uz3byPkSBzjpvLmjt/ZWYJkQG1omfqKh1vzF1FeFYOYqbGOCwc4sHbyF8oet2CseT2cECn1BbEyY4yWvlWYd/w==",
       "dev": true
     },
     "caseless": {
@@ -3846,6 +3846,15 @@
         "pinkie": "^2.0.0"
       }
     },
+    "polka": {
+      "version": "1.0.0-next.22",
+      "resolved": "https://flipplib.jfrog.io/artifactory/api/npm/flipp-npm/polka/-/polka-1.0.0-next.22.tgz",
+      "integrity": "sha512-a7tsZy5gFbJr0aUltZS97xCkbPglXuD67AMvTyZX7BTDBH384FWf0ZQF6rPvdutSxnO1vUlXM2zSLf5tCKk5RA==",
+      "requires": {
+        "@polka/url": "^1.0.0-next.21",
+        "trouter": "^3.1.0"
+      }
+    },
     "postcss": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz",
@@ -4166,6 +4175,11 @@
         "@babel/runtime": "^7.8.4"
       }
     },
+    "regexparam": {
+      "version": "1.3.0",
+      "resolved": "https://flipplib.jfrog.io/artifactory/api/npm/flipp-npm/regexparam/-/regexparam-1.3.0.tgz",
+      "integrity": "sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g=="
+    },
     "regexpu-core": {
       "version": "4.7.1",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
@@ -4929,6 +4943,14 @@
       "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
       "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
     },
+    "trouter": {
+      "version": "3.2.0",
+      "resolved": "https://flipplib.jfrog.io/artifactory/api/npm/flipp-npm/trouter/-/trouter-3.2.0.tgz",
+      "integrity": "sha512-rLLXbhTObLy2MBVjLC+jTnoIKw99n0GuJs9ov10J870vDw5qhTurPzsDrudNtBf5w/CZ9ctZy2p2IMmhGcel2w==",
+      "requires": {
+        "regexparam": "^1.3.0"
+      }
+    },
     "true-case-path": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
diff --git a/src/components/AuthUI/index.svelte b/src/components/AuthUI/index.svelte
new file mode 100644
index 00000000..757aa4f6
--- /dev/null
+++ b/src/components/AuthUI/index.svelte
@@ -0,0 +1,68 @@
+<script>
+  import PrimaryButton from '../PrimaryButton/index.svelte';
+  import { VARIANTS } from '../PrimaryButton/constants';
+  import GoogleIconColored from '../Icons/GoogleIconColored.svelte';
+
+  export let supabase;
+  export let handleSubmit;
+  export let isLogin = true;
+
+  async function signInWithGoogle() {
+    const { data, error } = await supabase.auth.signInWithOAuth({
+      provider: 'google',
+    });
+  }
+</script>
+
+<div class="w-full min-h-screen flex items-center justify-center mt-4">
+  <div class="container border border-gray bg-white">
+    <div class="flex items-center flex-col p-2 lg:px-8 lg:py-4">
+      <div class="flex items-center w-full justify-center">
+        <img
+          src="/logo-192.png"
+          alt="ClassroomIO logo"
+          height="50"
+          width="50"
+          data-atf="1"
+        />
+        <h4 class="text-xl">ClassroomIO</h4>
+      </div>
+      <form
+        on:submit|preventDefault={handleSubmit}
+        class="flex items-center flex-col w-10/12"
+      >
+        <slot />
+      </form>
+      <div class="w-10/12 mb-3">
+        <p class="text-sm mb-5">or sign up with:</p>
+        <PrimaryButton
+          variant={VARIANTS.OUTLINED}
+          onClick={signInWithGoogle}
+          className="py-3 sm:w-full w-full"
+        >
+          <GoogleIconColored />
+          <span class="ml-2">Sign up with Google</span>
+        </PrimaryButton>
+      </div>
+    </div>
+    <div class="w-full p-6 border-t border-grey text-center">
+      {#if isLogin}
+        Not registered yet? <a
+          class="hover:underline text-blue-700"
+          href="/signup">Sign up</a
+        >
+      {:else}
+        Already have an account? <a
+          class="hover:underline text-blue-700"
+          href="/login">Log In</a
+        >
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    width: 450px;
+  }
+</style>
diff --git a/src/components/Form/TextField.svelte b/src/components/Form/TextField.svelte
index 3fc2b846..3ec548b7 100644
--- a/src/components/Form/TextField.svelte
+++ b/src/components/Form/TextField.svelte
@@ -1,5 +1,8 @@
 <script>
   import { onMount } from 'svelte';
+  import IconButton from '../IconButton/index.svelte';
+  import PasswordEye from '../Icons/PasswordEye.svelte';
+
   export let label = '';
   export let placeholder = '';
   export let value = '';
@@ -7,6 +10,7 @@
   export let className = '';
   export let inputClassName = '';
   export let type = 'text';
+  export let isPassword = false;
   export let autoFocus = false;
   export let isRequired = false;
   export let isDisabled = false;
@@ -16,6 +20,7 @@
   export let onChange = () => {}; // This is to know if element is 'dirty'
 
   let ref;
+  let fieldNode;
 
   function typeAction(node) {
     node.type = type;
@@ -23,18 +28,29 @@
     if (isRequired) {
       node.required = '';
     }
+
+    fieldNode = node;
+  }
+
+  function handlePasswordEye() {
+    type = type === 'password' ? 'text' : 'password';
+    typeAction(fieldNode);
   }
 
   onMount(() => {
     if (autoFocus) {
       ref.focus();
     }
+
+    if (type === 'password') {
+      isPassword = true;
+    }
   });
 </script>
 
-<label class="block {className}">
+<label class="block relative {className}">
   {#if label}
-    <label for="text-field" class="m-0">
+    <label for="text-field" class="m-0 font-light">
       {label}
 
       {#if isRequired}
@@ -44,9 +60,9 @@
   {/if}
   <input
     use:typeAction
-    class="form-input p-2 mt-1 block w-full bg-white border {inputClassName} {errorMessage
+    class="form-input p-3 mt-1 block w-full border-none bg-gray-100 {inputClassName} {errorMessage
       ? 'border-red-500'
-      : 'border-gray-300'}"
+      : ''}"
     on:keydown={onKeyDown}
     {placeholder}
     bind:value
@@ -56,6 +72,13 @@
     autocomplete={autoComplete ? 'on' : 'off'}
     on:blur={onChange}
   />
+  {#if isPassword}
+    <span class="password-eye">
+      <IconButton value="write-code" onClick={handlePasswordEye}>
+        <PasswordEye isClosed={type === 'password' ? true : false} />
+      </IconButton>
+    </span>
+  {/if}
   {#if errorMessage}
     <p class="text-sm text-red-500">{errorMessage}</p>
   {:else if helperMessage}
@@ -64,3 +87,11 @@
     </p>
   {/if}
 </label>
+
+<style>
+  .password-eye {
+    position: absolute;
+    top: 33px;
+    right: 6px;
+  }
+</style>
diff --git a/src/components/IconButton/index.svelte b/src/components/IconButton/index.svelte
index 6f893cc5..07a4f589 100644
--- a/src/components/IconButton/index.svelte
+++ b/src/components/IconButton/index.svelte
@@ -6,6 +6,7 @@
   export let buttonClassName = '';
   export let contained = false;
   export let value = '';
+  export let type = 'button';
   export let size = 'large';
   export let color = '';
   export let toolTipProps = {
@@ -28,6 +29,7 @@
     class="root {color} {selected && 'active'} {size} {contained &&
       'contained'} {buttonClassName}"
     {disabled}
+    {type}
     on:click={handleClick}
   >
     <slot />
diff --git a/src/components/Icons/GoogleIconColored.svelte b/src/components/Icons/GoogleIconColored.svelte
new file mode 100644
index 00000000..e00ffa9c
--- /dev/null
+++ b/src/components/Icons/GoogleIconColored.svelte
@@ -0,0 +1,32 @@
+<svg
+  width="16"
+  height="17"
+  viewBox="0 0 16 17"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M3.75 8.76233C3.75 7.96961 3.96841 7.22701 4.34784 6.59117V3.89404H1.65072C0.58025 5.28429 0 6.97864 0 8.76233C0 10.546 0.58025 12.2404 1.65072 13.6306H4.34784V10.9335C3.96841 10.2976 3.75 9.55504 3.75 8.76233Z"
+    fill="#FBBD00"
+  />
+  <path
+    d="M8 13.0124L6.125 14.8874L8 16.7624C9.78372 16.7624 11.478 16.1822 12.8683 15.1117V12.4175H10.174C9.53262 12.7983 8.78691 13.0124 8 13.0124Z"
+    fill="#0F9D58"
+  />
+  <path
+    d="M4.34739 10.9336L1.65027 13.6307C1.86221 13.906 2.09299 14.1696 2.34271 14.4193C3.85371 15.9303 5.86267 16.7624 7.99955 16.7624V13.0124C6.4488 13.0124 5.08964 12.1774 4.34739 10.9336Z"
+    fill="#31AA52"
+  />
+  <path
+    d="M16 8.76258C16 8.27586 15.9559 7.78824 15.869 7.3133L15.7987 6.92896H8V10.679H11.7954C11.4268 11.4121 10.8601 12.0103 10.174 12.4176L12.8682 15.1119C13.1435 14.9 13.4071 14.6692 13.6568 14.4195C15.1678 12.9084 16 10.8995 16 8.76258Z"
+    fill="#3C79E6"
+  />
+  <path
+    d="M11.0052 5.75723L11.3367 6.08867L13.9883 3.43705L13.6569 3.10561C12.1459 1.59461 10.1369 0.762451 8 0.762451L6.125 2.63745L8 4.51245C9.13519 4.51245 10.2025 4.95451 11.0052 5.75723Z"
+    fill="#CF2D48"
+  />
+  <path
+    d="M7.99958 4.51245V0.762451C5.86271 0.762451 3.85374 1.59461 2.34271 3.10558C2.09299 3.3553 1.86221 3.61889 1.65027 3.89417L4.34739 6.5913C5.08967 5.34745 6.44883 4.51245 7.99958 4.51245Z"
+    fill="#EB4132"
+  />
+</svg>
diff --git a/src/components/Icons/PasswordEye.svelte b/src/components/Icons/PasswordEye.svelte
new file mode 100644
index 00000000..5c0df3e5
--- /dev/null
+++ b/src/components/Icons/PasswordEye.svelte
@@ -0,0 +1,43 @@
+<script>
+  export let isClosed = true;
+</script>
+
+{#if isClosed}
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M2.6 11.3L3.3 10.6C2.6 9.8 1.9 9 1.5 8C2.5 5.5 5.3 3.5 8 3.5C8.7 3.5 9.4 3.6 10 3.9L10.8 3.1C9.9 2.7 9 2.5 8 2.5C4.7 2.6 1.7 4.7 0.5 7.8V8.1C1 9.3 1.7 10.4 2.6 11.3ZM12.6 4.1C13.9 5 14.9 6.3 15.5 7.8V8.2C14.3 11.3 11.3 13.4 8 13.5C6.7 13.4 5.4 13.1 4.3 12.4L1.7 15L1 14.3L14.3 1L15 1.7L12.6 4.1ZM7.8 6.1C6.9 6.1 6.1 6.9 6 7.9L5.1 8.8C5 8.3 5 7.7 5.1 7.2C5.5 5.6 7.2 4.7 8.7 5.2L7.8 6.1ZM10 8C10 9.1 9.1 10 8 10C7.7 10 7.3 9.9 7 9.7L9.7 7C9.9 7.3 10 7.6 10 8ZM5 11.7C5.9 12.2 7 12.5 8 12.5C10.6 12.5 13.4 10.5 14.5 8C13.9 6.7 13 5.6 11.9 4.8L10.5 6.2C11.2 7.2 11.2 8.6 10.5 9.6C9.5 11 7.7 11.3 6.3 10.4L5 11.7Z"
+      fill="#ADADAD"
+    />
+  </svg>
+{:else}
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0.666748 8.00008C0.666748 8.00008 3.33341 2.66675 8.00008 2.66675C12.6667 2.66675 15.3334 8.00008 15.3334 8.00008C15.3334 8.00008 12.6667 13.3334 8.00008 13.3334C3.33341 13.3334 0.666748 8.00008 0.666748 8.00008Z"
+      stroke="#ADADAD"
+      stroke-width="1.33333"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z"
+      stroke="#ADADAD"
+      stroke-width="1.33333"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+{/if}
diff --git a/src/components/Navigation/index.svelte b/src/components/Navigation/index.svelte
index fb42d7ee..28b86a6b 100644
--- a/src/components/Navigation/index.svelte
+++ b/src/components/Navigation/index.svelte
@@ -3,6 +3,7 @@
   import Avatar from '../Avatar/index.svelte';
   import { user, profile } from '../../utils/store/user';
   import PrimaryButton from '../PrimaryButton/index.svelte';
+  import { VARIANTS } from '../PrimaryButton/constants';
 
   export let segment;
   export let disableLogin;
@@ -88,11 +89,20 @@
           />
         </a>
       {:else if !disableLogin}
-        <PrimaryButton
-          label="Login"
-          className="py-2 px-4"
-          onClick={() => goto('/login')}
-        />
+        <div class="flex">
+          <PrimaryButton
+            label="Login"
+            variant={VARIANTS.NONE}
+            className="py-2 px-6 mx-2 app-background-color"
+            onClick={() => goto('/login')}
+          />
+          <PrimaryButton
+            label="Sign Up"
+            variant={VARIANTS.CONTAINED}
+            className="py-2 px-6 mx-2"
+            onClick={() => goto('/signup')}
+          />
+        </div>
       {/if}
     </li>
     <!-- <li class="hidden">
diff --git a/src/components/PrimaryButton/constants.js b/src/components/PrimaryButton/constants.js
index 6d33221b..98953041 100644
--- a/src/components/PrimaryButton/constants.js
+++ b/src/components/PrimaryButton/constants.js
@@ -3,14 +3,15 @@ export const VARIANTS = {
   CONTAINED_DANGER: 'CONTAINED_DANGER',
   CONTAINED_SUCCESS: 'CONTAINED_SUCCESS',
   OUTLINED: 'OUTLINED',
+  NONE: 'NONE',
 };
 
 export const VARIANTS_CLASS = {
-  [VARIANTS.CONTAINED]: 'bg-blue-700 hover:bg-blue-900 text-white font-bold',
-  [VARIANTS.CONTAINED_SUCCESS]:
-    'bg-green-700 hover:bg-green-900 text-white font-bold',
-  [VARIANTS.CONTAINED_DANGER]:
-    'bg-red-700 hover:bg-red-900 text-white font-bold',
+  [VARIANTS.CONTAINED]: 'border-none bg-blue-700 hover:bg-blue-900 text-white',
+  [VARIANTS.CONTAINED_SUCCESS]: 'bg-green-700 hover:bg-green-900 text-white',
+  [VARIANTS.CONTAINED_DANGER]: 'bg-red-700 hover:bg-red-900 text-white',
   [VARIANTS.OUTLINED]:
-    'border border-gray-700 hover:border-black-300 hover:bg-gray-200 text-black',
+    'border border-gray hover:border-black-300 hover:bg-gray-200 text-black',
+  [VARIANTS.NONE]:
+    'border-none hover:border-black-300 hover:bg-gray-200 text-black',
 };
diff --git a/src/components/PrimaryButton/index.svelte b/src/components/PrimaryButton/index.svelte
index 1efb099c..6f3913a6 100644
--- a/src/components/PrimaryButton/index.svelte
+++ b/src/components/PrimaryButton/index.svelte
@@ -6,7 +6,7 @@
   export let className = '';
   export let onClick = () => {};
   export let name = '';
-  export let type = 'text';
+  export let type = 'button';
   export let variant = VARIANTS.CONTAINED;
   export let disablePadding = false;
   export let isDisabled = false;
@@ -21,7 +21,7 @@
     'bg-opacity-25 hover:bg-opacity-25 cursor-not-allowed'} flex items-center h-auto {VARIANTS_CLASS[
     variant
   ]} {!disablePadding &&
-    'py-1 px-5'} rounded {className} py-2 w-full justify-center sm:w-auto {isLoading &&
+    'py-1 px-5'} rounded-none {className} py-2 w-full justify-center sm:w-auto {isLoading &&
     'py-4 border-blue-700'} transition delay-150 duration-300 ease-in-out"
   on:click={onClick}
   {name}
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 41597da6..baa2c57e 100644
--- a/src/routes/_layout.svelte
+++ b/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>
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
index 86863fc2..6ad1984b 100644
--- a/src/routes/login.svelte
+++ b/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>
diff --git a/src/routes/signup.svelte b/src/routes/signup.svelte
index 47001579..e5591f53 100644
--- a/src/routes/signup.svelte
+++ b/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="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}
+      />
+      <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>