Fix up register form and add styles to email code form

src/components/login/EmailCodeForm.svelte

@@ -10,15 +10,72 @@
   }
 </script>
 
-<form class="login-form" method="post" on:submit|preventDefault={submitLogin}>
-  <h1>Email Code</h1>
+<form class="email-code-widget" method="post" on:submit|preventDefault={submitLogin}>
+  <div class="email-code-content">
+    <h1>Email Code</h1>
 
-  <section>
-    <label for="email-code">Email</label>
-    <input id="email-code" type="text" name="email-code" placeholder=" " autocomplete="email-code" required bind:value={inputCode} />
-  </section>
-
-  <section>
+    <section>
+      <label for="email-code">Email</label>
+      <input id="email-code" type="text" name="email-code" placeholder=" " autocomplete="email-code" required bind:value={inputCode} />
+    </section>
+  </div>
+  <div class="email-code-action">
     <button type="submit">Submit</button>
-  </section>
+  </div>
 </form>
+
+<style lang="scss">
+  @import "../../assets/panel.scss";
+
+  .email-code-widget {
+    @include panel;
+
+    > .email-code-content {
+      background: var(--bg-panel);
+      border-radius: var(--large-curve) var(--large-curve) 0 0;
+      padding: 0 16px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      > h1 {
+        margin: 0;
+        padding: 32px;
+        line-height: normal;
+        text-align: center;
+      }
+
+      > section {
+        padding-bottom: 16px;
+        display: grid;
+        grid-template-columns: repeat(2, auto);
+        gap: 16px;
+
+        > label {
+          align-self: center;
+        }
+
+        > input {
+          padding: 8px;
+          line-height: 24px;
+          width: 260px;
+          height: 16px;
+          border-radius: var(--small-curve);
+          border: 2px solid var(--primary-hover);
+          transition: border-color 100ms;
+
+          &:focus {
+            border: 2px solid var(--primary-text);
+            outline: none;
+          }
+        }
+      }
+    }
+
+    > .email-code-action {
+      background: var(--bg-panel-action);
+      padding: 24px;
+      border-radius: 0 0 var(--large-curve) var(--large-curve);
+    }
+  }
+</style>

src/components/login/LoginForm.svelte

@@ -18,9 +18,7 @@
     <section>
       <label for="email">Email</label>
       <input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputEmail} />
-    </section>
 
-    <section>
       <label for="current-password">Password</label>
       <input id="current-password" name="current-password" type="password" autocomplete="current-password" required bind:value={inputPassword} />
     </section>
@@ -43,6 +41,9 @@
       background: var(--bg-panel);
       border-radius: var(--large-curve) var(--large-curve) 0 0;
       padding: 0 16px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
 
       > h1 {
         margin: 0;
@@ -53,10 +54,12 @@
 
       > section {
         padding-bottom: 16px;
+        display: grid;
+        grid-template-columns: repeat(2, auto);
+        gap: 16px;
 
         > label {
-          width: 100px;
-          display: inline-block;
+          align-self: center;
         }
 
         > input {
@@ -65,6 +68,13 @@
           width: 260px;
           height: 16px;
           border-radius: var(--small-curve);
+          border: 2px solid var(--primary-hover);
+          transition: border-color 100ms;
+
+          &:focus {
+            border: 2px solid var(--primary-text);
+            outline: none;
+          }
         }
       }
     }

src/components/register/RegisterForm.svelte

@@ -2,11 +2,18 @@
   import {createEventDispatcher} from "svelte";
   import {getEnv} from "~/utils/env";
 
+  export let err: {message: string; log_id: string};
+
+  // Account
   let inputEmail: string = "";
-  let inputUsername: string = "";
-  let inputDisplayName: string = "";
+  let inputTag: string = "";
   let inputPassword: string = "";
   let inputRepeat: string = "";
+
+  // Profile
+  let inputDisplayName: string = "";
+  let inputPronouns: number;
+  let inputGender: string;
   let inputBirthday: Date;
 
   const dispatch = createEventDispatcher();
@@ -14,10 +21,13 @@
   function submitLogin() {
     dispatch("submit", {
       email: inputEmail,
-      username: inputUsername,
-      displayName: inputDisplayName,
+      username: inputTag,
       password: inputPassword,
       repeatPassword: inputRepeat,
+      displayName: inputDisplayName,
+      pronouns: inputPronouns,
+      gender: inputGender,
+      birthday: inputBirthday,
     });
   }
 
@@ -30,21 +40,15 @@
   <div class="register-content">
     <h1>Register</h1>
 
-    <section>
-      <h2>Account</h2>
-    </section>
+    <h2>Account</h2>
 
     <section>
       <label for="email">Email</label>
       <input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputEmail} />
-    </section>
 
-    <section>
-      <label for="username">Username</label>
-      <input id="username" type="text" name="username" placeholder=" " autocomplete="off" required bind:value={inputUsername} />
-    </section>
+      <label for="tag">Tag</label>
+      <input id="tag" type="text" name="tag" placeholder=" " autocomplete="off" required bind:value={inputTag} />
 
-    <section>
       <label for="new-password">Password</label>
       <input
         id="new-password"
@@ -55,9 +59,7 @@
         required
         bind:value={inputPassword}
       />
-    </section>
 
-    <section>
       <label for="repeat-password">Repeat Password</label>
       <input
         id="repeat-password"
@@ -82,23 +84,28 @@
       </div>
     </section>
 
-    <section>
-      <h2>Profile <span class="optional">(optional)</span></h2>
-    </section>
+    <h2>Profile <span class="optional">(optional)</span></h2>
 
     <section>
       <label for="display_name">Display Name</label>
-      <input id="display_name" type="text" name="display_name" placeholder=" " autocomplete="off" required bind:value={inputDisplayName} />
-    </section>
+      <input id="display_name" type="text" name="display_name" placeholder=" " autocomplete="off" bind:value={inputDisplayName} />
+
+      <label for="pronouns">Pronouns</label>
+      <select id="pronouns" name="pronouns" bind:value={inputPronouns}>
+        <option value={0}>unknown (they/them)</option>
+        <option value={1}>he/him</option>
+        <option value={2}>she/her</option>
+        <option value={3}>they/them</option>
+      </select>
+
+      <label for="gender">Gender</label>
+      <input id="gender" type="text" name="gender" placeholder="male/female/whatever..." autocomplete="off" bind:value={inputGender} />
 
-    <section>
       <label for="birthday">Birthday</label>
       <input id="birthday" type="date" name="birthday" bind:value={inputBirthday} />
     </section>
 
-    <section>
-      <h2>Policy</h2>
-    </section>
+    <h2>Policy</h2>
 
     <section>
       <div>
@@ -108,6 +115,13 @@
     </section>
   </div>
   <div class="register-action">
+    {#if err}
+      <section class="error-message">
+        <div class="error-header">Error</div>
+        <div>{err.message}</div>
+        <div>Log ID: {err.log_id}</div>
+      </section>
+    {/if}
     <section>
       <button type="submit">Register</button>
     </section>
@@ -116,6 +130,7 @@
 
 <style lang="scss">
   @import "../../assets/panel.scss";
+  @import "../../assets/material-symbols.scss";
 
   .register-widget {
     @include panel;
@@ -124,40 +139,54 @@
       background: var(--bg-panel);
       border-radius: var(--large-curve) var(--large-curve) 0 0;
       padding: 0 16px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      a[target="_blank"] {
+        margin-right: 20px;
+        position: relative;
+
+        &::after {
+          @include mso;
+          position: absolute;
+          margin-left: 4px;
+          content: "open_in_new";
+          font-size: inherit;
+          line-height: initial;
+        }
+      }
 
       > h1 {
         margin: 0;
-        padding: 32px;
+        padding: 32px 32px 0;
         line-height: normal;
         text-align: center;
       }
 
+      > h2 {
+        //margin-right: 300px;
+
+        > .optional {
+          font-size: 75%;
+          font-weight: 300;
+        }
+      }
+
       > section {
         padding-bottom: 16px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        > h2 {
-          margin: 0;
-
-          > .optional {
-            font-size: 75%;
-            font-weight: 300;
-          }
-        }
+        display: grid;
+        grid-template-columns: repeat(2, auto);
+        gap: 16px;
 
         > label {
-          width: 80px;
-          display: inline-block;
-          text-align: center;
-          margin-right: 8px;
+          align-self: center;
         }
 
         > input {
           padding: 8px;
           line-height: 24px;
-          width: 260px;
+          width: 300px;
           height: 16px;
           border-radius: var(--small-curve);
           border: 2px solid var(--primary-hover);
@@ -168,6 +197,19 @@
             outline: none;
           }
         }
+
+        > select {
+          padding: 8px;
+          width: 100%;
+          border-radius: var(--small-curve);
+          border: 2px solid var(--primary-hover);
+          transition: border-color 100ms;
+
+          &:focus {
+            border: 2px solid var(--primary-text);
+            outline: none;
+          }
+        }
       }
     }
 
@@ -187,4 +229,16 @@
       color: darken(#e5625e, 5);
     }
   }
+
+  .error-message {
+    margin-bottom: 16px;
+    background-color: darken(#e5625e, 10);
+    padding: 16px;
+    border-radius: 8px;
+
+    > .error-header {
+      font-size: 120%;
+      font-weight: 1000;
+    }
+  }
 </style>

src/routes/register/RegisterRoute.svelte

@@ -2,15 +2,58 @@
   import Page from "~/lib/Page.svelte";
   import RegisterForm from "~/components/register/RegisterForm.svelte";
   import {postRegister} from "~/api/register";
+  import {navigate} from "svelte-navigator";
 
   type RegisterFormResp = {access_token?: string; refresh_token?: string};
 
+  let created: boolean = false;
+  let err: {message: string; log_id: string} = undefined;
+
   async function submitRegister(e: {detail: object}) {
     console.info(e.detail);
-    postRegister(e.detail, undefined);
+    let x = await postRegister(e.detail, undefined);
+    if (x.message !== undefined) {
+      if (x.message === "Account Created") created = true;
+      else err = x;
+    } else err == undefined;
   }
 </script>
 
 <Page>
-  <RegisterForm on:submit={submitRegister} />
+  {#if created}
+    <div class="register-widget">
+      <div class="register-content">
+        <h1>Register</h1>
+        <p>Account created, please login to continue.</p>
+      </div>
+      <div class="register-action">
+        <button on:click={() => navigate("/login")}>Login</button>
+      </div>
+    </div>
+  {:else}
+    <RegisterForm on:submit={submitRegister} {err} />
+  {/if}
 </Page>
+
+<style lang="scss">
+  @import "../../assets/panel.scss";
+
+  .register-widget {
+    @include panel;
+
+    > .register-content {
+      background: var(--bg-panel);
+      border-radius: var(--large-curve) var(--large-curve) 0 0;
+      padding: 0 16px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    > .register-action {
+      background: var(--bg-panel-action);
+      padding: 24px;
+      border-radius: 0 0 var(--large-curve) var(--large-curve);
+    }
+  }
+</style>