Auth UI

src/routes/login.svelte

@@ -1,15 +1,11 @@
 <script>
-  function onTelegramAuth(user) {
-    alert(
-      "Logged in as " +
-        user.first_name +
-        " " +
-        user.last_name +
-        " (" +
-        user.id +
-        (user.username ? ", @" + user.username : "") +
-        ")"
-    );
+  import TextField from '../components/Form/TextField.svelte';
+  import PrimaryButton from '../components/PrimaryButton/index.svelte';
+
+  let email;
+
+  function handleSubmit() {
+    console.log(`email`, email);
   }
 </script>
 
@@ -17,13 +13,46 @@
   <title>Join ClassroomIO</title>
 </svelte:head>
 
-<div class="lg:w-3/5 mx-auto md:mx-10 lg:mb-20">
-  <p>Login/Sign up into ClassroomIO</p>
-  <script
-    async
-    src="https://telegram.org/js/telegram-widget.js?14"
-    data-telegram-login="classroomio_bot"
-    data-size="large"
-    data-auth-url="login-redirect"
-    data-request-access="write"></script>
+<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">Login</h4>
+      <p class="text-sm">into ClassroomIO</p>
+
+      <div class="my-4 w-full">
+        <TextField
+          bind:value={email}
+          type="email"
+          autoFocus={true}
+          placeholder="Enter your email"
+          onKeyDown={handleSubmit}
+          inputClassName="rounded-md w-full px-2 py-4"
+        />
+        <p class="py-3 text-sm">
+          A magic link will be sent to your email, please open the link
+        </p>
+      </div>
+
+      <div class="my-4 w-full flex justify-between items-center">
+        <a href="/signup" class="text-blue-700 text-sm">Create an account</a>
+        <PrimaryButton label="Next" type="submit" className="py-2 px-4" />
+      </div>
+    </form>
+  </div>
 </div>
+
+<style>
+  .container {
+    width: 450px;
+  }
+</style>