continue scaffolding and refine the basic foundation

app/pages/auth/login.vue

@@ -10,17 +10,32 @@ if (session.value !== null) {
 }
 
 const form = reactive({
-    name: "",
     email: "",
     password: "",
-    confirmPassword: "",
 });
 const loading = ref(false);
 
 let emailInputEl = ref<HTMLInputElement | null>(null);
 let passwordInputEl = ref<HTMLInputElement | null>(null);
 
+let tempForm = {
+    email: "",
+    password: "",
+}
+
+// prevent text fields from clearing on hydration
+onBeforeMount(() => {
+    tempForm.email = (document.getElementById("email") as HTMLInputElement)?.value ?? "";
+    tempForm.password = (document.getElementById("password") as HTMLInputElement)?.value ?? "";
+})
+
+let hydrated = ref(false);
+
 onMounted(() => {
+    form.email = tempForm.email;
+    form.password = tempForm.password;
+    hydrated.value = true;
+
     emailInputEl.value!.addEventListener("input", () => {
         emailInputEl.value!.setCustomValidity("");
     });
@@ -87,8 +102,8 @@ const submit = async () => {
         <label for="password">Password</label>
         <input required minlength="8" maxlength="128" ref="passwordInputEl" type="password"
             autocomplete="current-password" id="password" v-model="form.password" />
-        <button class="accent" type="submit">
-            <iconify-icons v-if="loading" width="24" icon="svg-spinners:90-ring-with-bg" />
+        <button :disabled="!hydrated" class="accent" type="submit">
+            <Icon v-if="loading" width="24" name="svg-spinners:90-ring-with-bg" />
             <span v-else>Login</span>
         </button>
     </form>