Auth UI

src/components/Form/TextField.svelte

@@ -1,18 +1,35 @@
 <script>
+  import { afterUpdate } from 'svelte';
   export let label;
   export let placeholder;
   export let value;
   export let onKeyDown;
-  export let className = "";
+  export let className = '';
+  export let inputClassName = '';
+  export let type = 'text';
+  export let autoFocus = false;
+
+  let ref = null;
+
+  function typeAction(node) {
+    node.type = type;
+  }
+
+  afterUpdate(() => {
+    if (autoFocus) {
+      ref.focus();
+    }
+  });
 </script>
 
 <label class="block {className}">
-  {#if label}<h4 class="m-0">{label}</h4>{/if}
+  {#if label}<label class="m-0">{label}</label>{/if}
   <input
-    class="form-input p-2 mt-1 block w-full bg-gray-100 border-t-0 border-l-0 border-r-0 border-b-1"
-    type="text"
+    use:typeAction
+    class="form-input {inputClassName} p-2 mt-1 block w-full bg-white border border-gray-300"
     on:keydown={onKeyDown}
     {placeholder}
     bind:value
+    bind:this={ref}
   />
 </label>

src/components/LeftNav/index.svelte

@@ -23,15 +23,6 @@
         /></a
       >
     </div>
-    <li>
-      <a
-        class="block"
-        aria-current={segment === undefined || segment === 'discussion'
-          ? 'page'
-          : undefined}
-        href="."><Forum32 class="carbon-icon" /><span>Discussion</span></a
-      >
-    </li>
     <li>
       <a
         class="block"
@@ -44,13 +35,22 @@
     <li>
       <a
         class="block"
-        aria-current={segment === 'profile' ? 'page' : undefined}
-        href="profile"
-        ><UserAvatar32 class="carbon-icon" />
-        <span>Профиль</span></a
+        aria-current={segment === undefined || segment === 'discussion'
+          ? 'page'
+          : undefined}
+        href="."><Forum32 class="carbon-icon" /><span>Discussion</span></a
       >
     </li>
     <li>
+      <a
+        class="block"
+        aria-current={segment === 'profile' ? 'page' : undefined}
+        href="profile"
+        ><UserAvatar32 class="carbon-icon" />
+        <span>People</span></a
+      >
+    </li>
+    <li class="hidden">
       <a
         class="flex items-center"
         href="https://t.me/classroomio"

src/components/Question/CheckboxQuestion/index.svelte

@@ -65,7 +65,7 @@
   <div class="ml-4">
     {#each options as option}
       <button
-        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md cursor-pointer hover:bg-gray-200 w-full {getValidationClassName(
+        class="cursor-pointer text-left my-2 border-2 border-gray-300 rounded-md hover:bg-gray-200 w-full {getValidationClassName(
           option
         )}"
         type="button"

src/routes/_layout.svelte

@@ -1,11 +1,11 @@
 <script>
-  import { stores } from "@sapper/app";
-  import Tailwindcss from "../components/Tailwindcss.svelte";
+  import { stores } from '@sapper/app';
+  import Tailwindcss from '../components/Tailwindcss.svelte';
   // import Nav from "../components/Nav.svelte";
-  import LeftNav from "../components/LeftNav/index.svelte";
+  import LeftNav from '../components/LeftNav/index.svelte';
   // import SideBar from "../components/SideBar/index.svelte";
-  import Footer from "../components/Footer/index.svelte";
-  import Apps from "../components/Apps/index.svelte";
+  import Footer from '../components/Footer/index.svelte';
+  import Apps from '../components/Apps/index.svelte';
 
   export let segment;
 
@@ -17,9 +17,11 @@
 <!-- <Nav {segment} /> -->
 
 <main class="flex">
+  {#if !['login', 'signup'].includes($page.path.replace('/', ''))}
     <LeftNav {segment} />
+  {/if}
   <slot />
-  {#if $page.path.includes("courses")}
+  {#if $page.path.includes('courses')}
     <Apps />
   {/if}
 </main>

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>

src/routes/signup.svelte

@@ -0,0 +1,85 @@
+<script>
+  import TextField from '../components/Form/TextField.svelte';
+  import Select from '../components/Form/Select.svelte';
+  import PrimaryButton from '../components/PrimaryButton/index.svelte';
+
+  let email;
+  let userType = 0;
+
+  const userTypes = [
+    {
+      text: '--Select an option--',
+      value: 0,
+    },
+    {
+      text: 'Student',
+      value: 1,
+    },
+    {
+      text: 'Organization/Teacher',
+      value: 2,
+    },
+  ];
+
+  function handleSubmit() {
+    console.log(`email`, email);
+  }
+</script>
+
+<svelte:head>
+  <title>Join 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"
+        />
+      </div>
+
+      <div class="my-4 w-full">
+        <TextField
+          bind:value={email}
+          autofocus={true}
+          label="Email"
+          type="email"
+          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="/login" class="text-blue-700 text-sm">I have an account</a>
+        <PrimaryButton label="Next" type="submit" className="py-2 px-4" />
+      </div>
+    </form>
+  </div>
+</div>
+
+<style>
+  .container {
+    width: 450px;
+  }
+</style>