login page work

tfweb/.gitignore

@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+src/lib/config.ts

tfweb/.idea/tfweb.iml

@@ -5,6 +5,8 @@
       <excludeFolder url="file://$MODULE_DIR$/temp" />
       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
       <excludeFolder url="file://$MODULE_DIR$/tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/.svelte-kit" />
+      <excludeFolder url="file://$MODULE_DIR$/build" />
     </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />

tfweb/src/lib/config.example.ts

@@ -0,0 +1,2 @@
+// Set this to the API root of your trifid-api instance.
+export const API_ROOT = "http://localhost:8000";

tfweb/src/lib/config.ts

@@ -0,0 +1,2 @@
+// Set this to the API root of your trifid-api instance.
+export const API_ROOT = "http://localhost:8000";

tfweb/src/lib/i18n/en.json

@@ -9,5 +9,11 @@
     "lightMode": "Light mode",
     "darkMode": "Dark mode",
     "changeLang": "Change language"
+  },
+  "login": {
+    "title": "Log in to your account",
+    "subtitle": "We'll send you an email with a \"magic link\".",
+    "prompt": "What's your email?",
+    "actionButtonText": "Log in"
   }
 }

tfweb/src/routes/auth/login/+page.svelte

@@ -1,17 +1,80 @@
 <script lang="ts">
     import {t} from "$lib/i18n";
+    import {API_ROOT} from "$lib/config";
 
     let email = "";
-    function generateMagicLink() {
+    let isloading = false;
+    let isFinished = false;
+    let hasError = false;
+    let error = "";
 
+    function generateMagicLink() {
+        if (isloading) {
+            return;
+        }
+        isloading = true;
+
+        let xhr = new XMLHttpRequest();
+        xhr.open('POST', `${API_ROOT}/v1/auth/magic-link`);
+        xhr.setRequestHeader("Content-Type", "application/json");
+        xhr.send(JSON.stringify({
+            email: email
+        }));
+
+        xhr.onload = () => {
+            if (xhr.status != 200) {
+                // error
+                hasError = true;
+                error = JSON.parse(xhr.responseText).errors[0].message;
+                isloading = false;
+            } else {
+                isloading = false;
+                isFinished = true;
+            }
+        };
     }
 </script>
 
-<h1>{t('login.title')}</h1>
-<h2>{t('login.subtitle')}</h2>
+<div class="flex in-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+    <div class="w-full max-w-md">
+        {#if !isFinished}
+            <!-- Title -->
+            <div>
+                <h1 class="font-semibold text-2xl">{t('login.title')}</h1>
+                <h2 class="ftext-sm">{t('login.subtitle')}</h2>
+            </div>
 
-<form on:submit|preventDefault={generateMagicLink}>
-    <label for="email">{t('login.prompt')}</label>
-    <input type="text" id="email" bind:value={email} />
-    <button>{t('login.actionButtonText')}</button>
+            <!-- The actual form -->
+            <form class="mt-5" action="#" method="POST" on:submit|preventDefault={generateMagicLink}>
+                <div class="-space-y-px rounded-md shadow-sm">
+                    <label for="email" class="sr-only">{t('login.prompt')}</label>
+                    <input id="email"
+                           class="dark:bg-slate-500 bg-gray-200 w-full rounded px-3 py-2 focus:outline-none focus:ring-purple-500 appearance-none">
+                    {#if hasError}
+                        <span class="text-red-600 text-sm">{error}</span>
+                    {/if}
+                </div>
+
+                <button class="bg-purple-400 dark:bg-purple-600 mt-4 w-full py-2 -space-y-px rounded-md shadow-sm place-content-center">
+                    {#if !isloading}
+                        {t('login.actionButtonText')}
+                    {:else}
+                        <svg class="animate-spin w-5 h-5 inline-block m-auto" xmlns="http://www.w3.org/2000/svg"
+                             fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                                    stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor"
+                                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                        </svg>
+                    {/if}
+                </button>
             </form>
+        {:else}
+            <!-- Title -->
+            <div>
+                <h1 class="font-semibold text-2xl">{t('login.sentMagicLink')}</h1>
+                <h2 class="ftext-sm">{t('login.magicLinkExplainer')}</h2>
+            </div>
+        {/if}
+    </div>
+</div>