continue scaffolding and refine the basic foundation

app/pages/auth/register.vue

@@ -28,7 +28,30 @@ let emailInputEl = ref<HTMLInputElement | null>(null);
 let passwordInputEl = ref<HTMLInputElement | null>(null);
 let confirmPasswordInputEl = ref<HTMLInputElement | null>(null);
 
+let tempForm = {
+    name: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+}
+
+// prevent text fields from clearing on hydration
+onBeforeMount(() => {
+    tempForm.name = (document.getElementById("name") as HTMLInputElement)?.value ?? "";
+    tempForm.email = (document.getElementById("email") as HTMLInputElement)?.value ?? "";
+    tempForm.password = (document.getElementById("password") as HTMLInputElement)?.value ?? "";
+    tempForm.confirmPassword = (document.getElementById("confirmPassword") as HTMLInputElement)?.value ?? "";
+})
+
+const hydrated = ref(false);
+
 onMounted(() => {
+    form.name = tempForm.name;
+    form.email = tempForm.email;
+    form.password = tempForm.password;
+    form.confirmPassword = tempForm.confirmPassword;
+    hydrated.value = true;
+
     nameInputEl.value!.addEventListener("input", () => {
         nameInputEl.value!.setCustomValidity("");
     });
@@ -123,7 +146,7 @@ const submit = async () => {
         <label for="confirmPassword">Confirm Password</label>
         <input required minlength="8" maxlength="128" ref="confirmPasswordInputEl" type="password"
             autocomplete="new-password" id="confirmPassword" v-model="form.confirmPassword" />
-        <button class="accent" type="submit">
+        <button :disabled="!hydrated" class="accent" type="submit">
             <Icon v-if="loading" class="text-6" name="svg-spinners:90-ring-with-bg" />
             <span v-else>Register</span>
         </button>