webui work

tfweb/src/lib/auth.ts

@@ -110,6 +110,32 @@ export async function authSession(email: string): Promise<[AuthResult, null | AP
     }
 }
 
+export async function signup(email: string): Promise<[AuthResult, null | APIError]> {
+    logger.info('sending signup');
+
+    try {
+        logger.debug(`api call: baseurl ${PUBLIC_BASE_URL}`);
+        const resp = await fetch(`${PUBLIC_BASE_URL}/v1/signup`, {
+            'method': 'POST',
+            'body': JSON.stringify({
+                email: email
+            }),
+            'headers': {
+                'Content-Type': 'application/json'
+            }
+        });
+        if (!resp.ok) {
+            const rawerror = JSON.parse(await resp.text()).errors[0];
+            logger.error(`error sending authentication: ${rawerror.message}`);
+            return [AuthResult.Failed, {code: rawerror.code, message: rawerror.message}];
+        }
+        return [AuthResult.Successful, null]
+    } catch (e) {
+        logger.error(`error making API request: ${e}`);
+        return [AuthResult.Failed, {code: "api_call_failed", message: `${e}`}]
+    }
+}
+
 export async function verifyLink(ml: string): Promise<[AuthResult, null | APIError]> {
     logger.info('checking magic link authentication');
 
@@ -164,10 +190,41 @@ export async function createTotp(token: string): Promise<[AuthResult, TOTPCreate
             logger.error(`error sending totp create: ${rawerror.message}`);
             return [AuthResult.Failed, {code: rawerror.code, message: rawerror.message}];
         }
-        logger.info(`call success, ${await resp.text()}`)
         return [AuthResult.Successful, JSON.parse(await resp.text()).data]
     } catch (e) {
         logger.error(`error making API request: ${e}`);
         return [AuthResult.Failed, {code: "api_call_failed", message: `${e}`}]
     }
 }
+
+export async function verifyTotp(token: string, totpToken: string, totpCode: string): Promise<[AuthResult, undefined | APIError]> {
+    logger.info('verifying totp authenticator');
+
+    try {
+        logger.debug(`api call: baseurl ${PUBLIC_BASE_URL}`);
+        const resp = await fetch(`${PUBLIC_BASE_URL}/v1/totp-authenticators`, {
+            'method': 'POST',
+            'body': JSON.stringify({
+                totpToken: totpToken,
+                code: totpCode
+            }),
+            'headers': {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`
+            }
+        });
+        if (!resp.ok) {
+            logger.error('call returned error code');
+            const rawerror = JSON.parse(await resp.text()).errors[0];
+            logger.error(`error sending totp create: ${rawerror.message}`);
+            return [AuthResult.Failed, {code: rawerror.code, message: rawerror.message}];
+        }
+
+        window.localStorage.setItem("mfa", JSON.parse(await resp.text()).data.authToken);
+
+        return [AuthResult.Successful, undefined]
+    } catch (e) {
+        logger.error(`error making API request: ${e}`);
+        return [AuthResult.Failed, {code: "api_call_failed", message: `${e}`}]
+    }
+}

tfweb/src/lib/i18n/locales/en.json

@@ -2,8 +2,9 @@
   "itworks": {
     "header": "It works!",
     "body": "If you're seeing this page, tfweb is installed and (probably) correctly configured.",
-    "linkbody": "Perhaps you meant to visit the {link0}?",
+    "linkbody": "Perhaps you meant to visit the {link0} or {link1}?",
-    "linkbody.link0": "admin panel"
+    "linkbody.link0": "admin panel",
+    "linkbody.link1": "create an account"
   },
   "login": {
     "title": "Log in to your account",
@@ -20,6 +21,22 @@
       "usermissing": "That user does not exist."
     }
   },
+  "signup": {
+    "title": "Create an account",
+    "subtitle": "We'll send you an email with a \"magic link\"",
+    "label": "What is your email?",
+    "button": "Create account",
+    "email": "Check your email",
+    "emailbody": "We sent you an email with a link to complete signing up.",
+    "emailbody2": "Didn't work? Check your junk inbox or click {link0} to try again.",
+    "emailbody2.link0": "here",
+    "error": {
+      "invalidEmail": "That email address isn't valid. Try again.",
+      "generic": "There was an error logging you in. Try again or contact support with the error code {err}",
+      "userexists": "That user already exists. Try {link0}?",
+      "userexists.link0": "logging in"
+    }
+  },
   "ml": {
     "header": "Authenticated!",
     "body": "Redirecting to admin page...",

tfweb/src/routes/+page.svelte

@@ -21,5 +21,5 @@
     <h1>{$t('itworks.header')}</h1>
     <p>{$t('itworks.body')}</p>
     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-    <p>{@html $t('itworks.linkbody', {values:{link0:'<a href="/admin">'+$t('itworks.linkbody.link0')+'</a>'}})}</p>
+    <p>{@html $t('itworks.linkbody', {values:{link0:'<a href="/admin">'+$t('itworks.linkbody.link0')+'</a>',link1:'<a href="/signup">'+$t('itworks.linkbody.link1')+'</a>'}})}</p>
 </LoadingWrapper>

tfweb/src/routes/2fasetup/+page.svelte

@@ -2,7 +2,8 @@
     import {isLoading, t} from "svelte-i18n";
     import LoadingWrapper from "$components/LoadingWrapper.svelte";
     import {onMount} from "svelte";
-    import {AuthResult, authSession, createTotp, isAuthedSession} from "$lib/auth.ts";
+    import {AuthResult, authSession, createTotp, isAuthedSession, verifyTotp} from "$lib/auth.ts";
+    import type {TOTPCreateInfo} from "$lib/auth.ts";
     import type {SessionInfo} from "$lib/auth.ts";
     import type {APIError} from "$lib/auth.ts";
     import {Logger, logSetup} from "$lib/logger";
@@ -18,6 +19,10 @@
     let logger = new Logger("2fasetup/+page.svelte");
 
     let totp_secret = '';
+    let otp_url = '';
+    let totp_create_token = '';
+
+    let code = '';
 
     onMount(async () => {
         let session_load_info = await isAuthedSession();
@@ -54,10 +59,41 @@
             return;
         }
 
+        logger.info('setting secret and otpurl');
+
+        totp_secret = (create_res[1] as TOTPCreateInfo).secret;
+        otp_url = (create_res[1] as TOTPCreateInfo).url;
+        totp_create_token = (create_res[1] as TOTPCreateInfo).totpToken;
+
+        logger.info(totp_secret);
+        logger.info(otp_url);
+
         loading = false;
     })
 
     async function onSubmit() {
+        let create_res = await verifyTotp(window.localStorage.getItem("session"), totp_create_token, code);
+
+        if (create_res[0] == AuthResult.Failed) {
+            logger.error(`totp auth fail`);
+            isError = true;
+            let err = create_res[1] as APIError;
+
+            let etext = err.code;
+
+            if (etext === "api_call_failed") {
+                etext = $t('2fasetup.error.api');
+            } else if (etext === "ERR_ALREADY_HAS_TOTP") {
+                window.location.href = '/2fa';
+                return;
+            }
+
+            error = $t('2fasetup.error.generic', {values:{err:etext}});
+            loading = false;
+            return;
+        }
+
+        window.location.href = '/admin';
 
     }
 </script>
@@ -71,13 +107,13 @@
     <p>{$t('2fasetup.body')}</p>
     <h4>{$t('2fasetup.scan')}</h4>
     <div>
-        <QrCode value="abcd1234"/>
+        <QrCode bind:value={otp_url}/>
     </div>
     <h4>{$t('2fasetup.code')}</h4>
-    <div><span>totp secret hete</span></div>
+    <div><span>{totp_secret}</span></div>
     <form on:submit|preventDefault={onSubmit}>
         <label for="code">{$t('2fasetup.verify')}</label>
-        <input type="number" min="0" max="999999" id="code" />
+        <input bind:value={code} type="number" min="0" max="999999" id="code" />
         <button>{$t('2fasetup.button')}</button>
     </form>
 </LoadingWrapper>

tfweb/src/routes/admin/+page.svelte

@@ -2,7 +2,7 @@
     import {isLoading, t} from "svelte-i18n";
     import LoadingWrapper from "$components/LoadingWrapper.svelte";
     import {onMount} from "svelte";
-    import {AuthResult, isAuthedSession} from "$lib/auth.ts";
+    import {AuthResult, isAuthedMFA, isAuthedSession} from "$lib/auth.ts";
     import {Logger, logSetup} from "$lib/logger";
     import type {APIError} from "$lib/auth.ts";
 
@@ -23,6 +23,14 @@
             return;
         }
 
+        let mfa_load_info = await isAuthedMFA();
+        if (mfa_load_info[0] == AuthResult.Failed) {
+            let err = mfa_load_info[1] as APIError;
+            logger.error(`mfa load failed: ${err.code} ${err.message}`);
+            window.location.href = '/2fa';
+            return;
+        }
+
         loading = false;
     })
 </script>

tfweb/src/routes/signup/+page.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+    import {isLoading, t} from "svelte-i18n";
+    import LoadingWrapper from "$components/LoadingWrapper.svelte";
+    import {onMount} from "svelte";
+    import {AuthResult, authSession, isAuthedSession, signup} from "$lib/auth.ts";
+    import type {APIError} from "$lib/auth.ts";
+    import {Logger, logSetup} from "$lib/logger";
+
+    let loading = true;
+    let isError = false;
+    let error = '';
+    $: currentlyLoading = $isLoading || loading;
+
+    logSetup();
+    let logger = new Logger("signup/+page.svelte");
+
+    onMount(async () => {
+        let session_load_info = await isAuthedSession();
+        if (session_load_info[0] != AuthResult.Failed) {
+            logger.error(`session load success, the user is already logged in`);
+            window.location.href = '/2fa';
+            return;
+        }
+
+        loading = false;
+    })
+
+    let email = '';
+    let email_regexp = new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+
+    let hasErrForm = false;
+    let errForm = '';
+
+    let isDone = false;
+
+    async function onSubmit() {
+        loading = true;
+
+        if (!email_regexp.test(email)) {
+            errForm = $t('signup.error.invalidEmail');
+            hasErrForm = true;
+            loading = false;
+            return;
+        }
+
+        let auth_result = await signup(email);
+
+        if (auth_result[0] === AuthResult.Failed) {
+
+            hasErrForm = true;
+
+            // parse the error and filter out common ones for more specific error messages
+            let err = auth_result[1] as APIError;
+
+            if (err.code == "ERR_USER_EXISTS") {
+                errForm = $t('signup.error.userexists', {values:{link0:'<a href="/login">'+$t('signup.error.userexists.link0')+'</a>'}});
+            } else {
+                errForm = $t('signup.error.generic', {values: {err: (auth_result[1] as APIError).code}});
+            }
+
+            loading = false;
+            return;
+        }
+
+        isDone = true;
+        loading = false;
+    }
+</script>
+
+<svelte:head>
+    <title>{$t("common.title", {values: {title: $t("common.page.signup")}})}</title>
+</svelte:head>
+
+<LoadingWrapper isLoading={currentlyLoading} isError={isError} error={error}>
+    {#if isDone}
+        <h1>{$t('signup.email')}</h1>
+        <p>{$t('signup.emailbody')}</p>
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        <p>{@html $t('signup.emailbody2', {values:{link0:'<a href="/signup">'+$t('signup.emailbody2.link0')+'</a>'}})}</p>
+    {:else}
+        <h1>{$t('signup.title')}</h1>
+        <h3>{$t('signup.subtitle')}</h3>
+        <form on:submit|preventDefault={onSubmit}>
+            <label for="email">{$t('signup.label')}</label>
+            <input type="email" bind:value={email} placeholder="john.doe@google.com" id="email"/>
+            <button>{$t('signup.button')}</button>
+            {#if hasErrForm}
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                <p>{@html errForm}</p>
+            {/if}
+        </form>
+    {/if}
+</LoadingWrapper>