classroomio/src/routes/login.svelte

<script>
  import TextField from '../components/Form/TextField.svelte';
  import PrimaryButton from '../components/PrimaryButton/index.svelte';

  let email;

  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">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>