Use custom validity for server-only validation

I'll admit it's a bit weird because it sets and reports validity _after_
submitting, but this way is the most accessible by default.

Author: GrantGryczan

frontend/pages/sign-in.vue

@@ -13,7 +13,7 @@ watch([email, password], () => {
   areCredentialsWrong.value = false;
 });
 
-async function submitSignIn() {
+async function submitSignIn(event: Event) {
   loading.value = true;
 
   try {
@@ -27,6 +27,12 @@ async function submitSignIn() {
       catchApiErrors: {
         USER_CREDENTIALS_WRONG: () => {
           areCredentialsWrong.value = true;
+
+          // Wait for the custom validity to update before reporting it.
+          // (`nextTick` doesn't wait long enough.)
+          setTimeout(() => {
+            (event.target as HTMLFormElement).reportValidity();
+          });
         },
       },
     });
@@ -61,6 +67,9 @@ async function submitSignIn() {
           maxlength="254"
           required
           autofocus
+          :custom-validity="
+            areCredentialsWrong ? 'Incorrect email or password.' : ''
+          "
         />
 
         <TextInput
@@ -69,6 +78,9 @@ async function submitSignIn() {
           type="password"
           maxlength="256"
           required
+          :custom-validity="
+            areCredentialsWrong ? 'Incorrect email or password.' : ''
+          "
         >
           <template #after>
             <div class="reset-password-link-wrapper">
@@ -77,10 +89,6 @@ async function submitSignIn() {
           </template>
         </TextInput>
 
-        <p v-if="areCredentialsWrong" class="warning">
-          Incorrect email or password.
-        </p>
-
         <Button type="submit">Sign In</Button>
       </fieldset>
     </form>

frontend/pages/sign-up.vue

@@ -129,8 +129,11 @@ async function submitCode(event: Event) {
         RESOURCE_NOT_FOUND: () => {
           isCodeWrong.value = true;
 
-          const form = event.target as HTMLFormElement;
-          form.getElementsByTagName("input")[0]?.select();
+          // Wait for the custom validity to update before reporting it.
+          // (`nextTick` doesn't wait long enough.)
+          setTimeout(() => {
+            (event.target as HTMLFormElement).reportValidity();
+          });
         },
       },
     });
@@ -240,12 +243,9 @@ async function completeSignUp() {
             aria-label="Verification Code"
             required
             autofocus
+            :custom-validity="isCodeWrong ? 'Incorrect verification code.' : ''"
           />
 
-          <p v-if="isCodeWrong" class="warning">
-            That verification code is incorrect.
-          </p>
-
           <Button type="submit">Verify</Button>
         </fieldset>
       </form>