Move buttons and create separate form styles

.editorconfig

@@ -13,13 +13,13 @@ insert_final_newline = true
 [*.css]
 indent_size = 2
 indent_style = space
-trim_trailing_whitespace = true
+trim_trailing_whitespace = false
 
 # HTML
 [*.{htm,html}]
 indent_size = 2
 indent_style = space
-trim_trailing_whitespace = true
+trim_trailing_whitespace = false
 
 # GNU make
 [Makefile]

src/assets/form.scss

@@ -0,0 +1,60 @@
+@mixin form-styles() {
+  h1 {
+    margin: 0;
+    padding: 32px 32px 0;
+    line-height: normal;
+    text-align: center;
+  }
+
+  h2 {
+    //margin-right: 300px;
+
+    >.optional {
+      font-size: 75%;
+      font-weight: 300;
+    }
+  }
+
+  section {
+    padding-bottom: 24px;
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    gap: 16px;
+
+    &.first-section {
+      padding-bottom: 8px;
+    }
+
+    label {
+      align-self: center;
+    }
+
+    input {
+      padding: 8px;
+      line-height: 24px;
+      width: 300px;
+      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;
+      }
+    }
+
+    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;
+      }
+    }
+  }
+}

src/components/oauth/Authorize.svelte

@@ -127,8 +127,8 @@
       </div>
     </div>
     <div class="oauth-btns">
-      <button class="authorize-btn" on:click|preventDefault={runAuthorize}>Authorize</button>
       <button class="cancel-btn secondary" on:click|preventDefault={runCancel}>Cancel</button>
+      <button class="authorize-btn" on:click|preventDefault={runAuthorize}>Authorize</button>
     </div>
   </div>
 {:else}

src/components/register/RegisterForm.svelte

@@ -2,12 +2,13 @@
   import {ExternalLink} from "lucide-svelte";
   import {createEventDispatcher} from "svelte";
   import {navigate} from "svelte-navigator";
+  import PasswordConstraints from "~/lib/PasswordConstraints.svelte";
 
   export let err: {message: string; log_id: string};
 
   // Account
   let inputEmail: string = "";
-  let inputTag: string = "";
+  let inputUsername: string = "";
   let inputPassword: string = "";
   let inputRepeat: string = "";
 
@@ -22,7 +23,7 @@
   function submitLogin() {
     dispatch("submit", {
       email: inputEmail,
-      username: inputTag,
+      username: inputUsername,
       password: inputPassword,
       repeatPassword: inputRepeat,
       displayName: inputDisplayName,
@@ -31,10 +32,6 @@
       birthday: inputBirthday,
     });
   }
-
-  function conDone(v: boolean): string {
-    return v ? "follows-constraint" : "missing-constraint";
-  }
 </script>
 
 <form class="register-widget" method="post" on:submit|preventDefault={submitLogin}>
@@ -45,10 +42,10 @@
 
     <section class="first-section">
       <label for="email">Email</label>
-      <input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputEmail} />
+      <input id="email" type="email" name="email" placeholder=" " autocomplete="email" required bind:value={inputEmail} />
 
-      <label for="tag">Tag</label>
-      <input id="tag" type="text" name="tag" placeholder=" " autocomplete="off" required bind:value={inputTag} />
+      <label for="username">Username</label>
+      <input id="username" type="text" name="tag" placeholder=" " autocomplete="uesrname" required bind:value={inputUsername} />
 
       <label for="new-password">Password</label>
       <input
@@ -74,15 +71,7 @@
     </section>
 
     <section>
-      <div id="password-constraints">
-        <ul>
-          <li class={conDone(inputPassword.length >= 8)}>Eight or more characters</li>
-          <li class={conDone(inputPassword.toLocaleLowerCase() != inputPassword)}>Uppercase characters</li>
-          <li class={conDone(inputPassword.toLocaleUpperCase() != inputPassword)}>Lowercase characters</li>
-          <li class={conDone(/\d/.test(inputPassword))}>Numeric digit</li>
-          <li class={conDone(/\W/.test(inputPassword))}>Special symbol</li>
-        </ul>
-      </div>
+      <PasswordConstraints password={inputPassword} />
     </section>
 
     <h2>Profile <span class="optional">(optional)</span></h2>
@@ -136,6 +125,7 @@
 
 <style lang="scss">
   @import "../../assets/panel.scss";
+  @import "../../assets/form.scss";
 
   .register-widget {
     @include panel;
@@ -148,64 +138,7 @@
       flex-direction: column;
       align-items: center;
 
-      > h1 {
-        margin: 0;
-        padding: 32px 32px 0;
-        line-height: normal;
-        text-align: center;
-      }
-
-      > h2 {
-        //margin-right: 300px;
-
-        > .optional {
-          font-size: 75%;
-          font-weight: 300;
-        }
-      }
-
-      > section {
-        padding-bottom: 24px;
-        display: grid;
-        grid-template-columns: repeat(2, auto);
-        gap: 16px;
-
-        &.first-section {
-          padding-bottom: 8px;
-        }
-
-        > label {
-          align-self: center;
-        }
-
-        > input {
-          padding: 8px;
-          line-height: 24px;
-          width: 300px;
-          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;
-          }
-        }
-
-        > 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;
-          }
-        }
-      }
+      @include form-styles();
     }
 
     > .register-action {
@@ -228,18 +161,6 @@
     }
   }
 
-  #password-constraints > ul {
-    margin: 0;
-
-    > li.follows-constraint {
-      color: darken(#bdd358, 5);
-    }
-
-    > li.missing-constraint {
-      color: darken(#e5625e, 5);
-    }
-  }
-
   .error-message {
     margin-bottom: 16px;
     background-color: darken(#e5625e, 10);

src/components/settings/Settings.svelte

@@ -1,12 +1,23 @@
 <script lang="ts">
   import LazyDelay from "~/lib/LazyDelay.svelte";
+  import PasswordConstraints from "~/lib/PasswordConstraints.svelte";
   import {profileStore} from "~/stores/login";
+
+  let inputEmail: string = "";
+  let inputPassword: string = "";
+  let inputNewPassword: string = "";
+  let inputRepeatPassword: string = "";
+
+  function conDone(v: boolean): string {
+    return v ? "follows-constraint" : "missing-constraint";
+  }
 </script>
 
 <div class="settings-widget">
   <div class="settings-content">
     {#if $profileStore}
-      <div>Honestly I'm just too lazy to make this yet</div>
+      <h1>Settings</h1>
+      <section>Honestly I'm just too lazy to make this yet</section>
     {:else}
       <LazyDelay delayMs={500}>Loading...</LazyDelay>
     {/if}
@@ -15,6 +26,7 @@
 
 <style lang="scss">
   @import "../../assets/panel.scss";
+  @import "../../assets/form.scss";
 
   .settings-widget {
     @include panel;
@@ -26,6 +38,8 @@
       flex-direction: column;
       padding: 12px 24px;
 
+      @include form-styles();
+
       /*> .icon {
         margin: 0 auto 12px auto;
         width: 150px;

src/lib/PasswordConstraints.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  export let password: string;
+
+  function conDone(v: boolean): string {
+    return v ? "follows-constraint" : "missing-constraint";
+  }
+</script>
+
+<div id="password-constraints">
+  <ul>
+    <li class={conDone(password.length >= 8)}>Eight or more characters</li>
+    <li class={conDone(password.toLocaleLowerCase() != password)}>Uppercase characters</li>
+    <li class={conDone(password.toLocaleUpperCase() != password)}>Lowercase characters</li>
+    <li class={conDone(/\d/.test(password))}>Numeric digit</li>
+    <li class={conDone(/\W/.test(password))}>Special symbol</li>
+  </ul>
+</div>
+
+<style lang="scss">
+  #password-constraints > ul {
+    margin: 0;
+
+    > li.follows-constraint {
+      color: darken(#bdd358, 5);
+    }
+
+    > li.missing-constraint {
+      color: darken(#e5625e, 5);
+    }
+  }
+</style>