From 62cc53415379393e31e0c16ba1a000781497cebd Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Thu, 24 Apr 2025 22:48:34 +0200
Subject: [PATCH] Improve error reporting on account creation form

---
 dashboard/src/components/SetupAccount.vue | 24 ++++++++++-------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/dashboard/src/components/SetupAccount.vue b/dashboard/src/components/SetupAccount.vue
index bd59139eb..52d4694f6 100644
--- a/dashboard/src/components/SetupAccount.vue
+++ b/dashboard/src/components/SetupAccount.vue
@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { marked } from 'marked';
 import { Button, PasswordInput, FormGroup, TextInput, fetcher } from 'pankow';
 import { API_ORIGIN } from '../constants.js';
@@ -15,7 +15,7 @@ const formError = ref({});
 const mode = ref('');
 const footer = ref('');
 const cloudronName = ref('');
-
+const form = useTemplateRef('form');
 const profileLocked = ref(false);
 const existingUsername = ref(false);
 const username = ref('');
@@ -33,6 +33,8 @@ const MODE = {
 };
 
 async function onSubmit() {
+  if (!form.value.reportValidity()) return;
+
   busy.value = true;
   formError.value = {};
 
@@ -112,9 +114,9 @@ onMounted(async () => {
         <br/>
         <div>{{ $t('setupAccount.description') }}</div>
 
-        <div class="text-danger" v-if="formError.generic">{{ formError.generic }}</div>
+        <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
 
-        <form @submit.prevent="onSubmit()" autocomplete="off">
+        <form @submit.prevent="onSubmit()" autocomplete="off" ref="form">
           <fieldset>
             <!-- prevents autofill -->
             <input type="password" style="display: none;"/>
@@ -124,11 +126,7 @@ onMounted(async () => {
             <FormGroup :has-error="formError.username">
               <label for="inputUsername">{{ $t('setupAccount.username') }}</label>
               <TextInput id="inputUsername" v-model="username" :disabled="profileLocked || existingUsername" required/>
-              <div class="text-danger" v-if="formError.username">{{ formError.username }}</div>
-              <!-- TODO -->
-              <!-- <small ng-show="setupAccountForm.username.$error.minlength">{{ 'setupAccount.errorUsernameTooShort' | tr }}</small> -->
-              <!-- <small ng-show="setupAccountForm.username.$error.maxlength">{{ 'setupAccount.errorUsernameTooLong' | tr }}</small> -->
-              <!-- <small ng-show="setupAccountForm.username.$dirty && setupAccountForm.username.$invalid">{{ 'setupAccount.errorUsernameInvalid' | tr }}</small> -->
+              <div class="error-label" v-if="formError.username">{{ formError.username }}</div>
             </FormGroup>
 
             <FormGroup>
@@ -139,15 +137,13 @@ onMounted(async () => {
             <FormGroup :has-error="formError.password">
               <label for="inputPassword">{{ $t('setupAccount.password') }}</label>
               <PasswordInput id="inputPassword" v-model="password" required/>
-              <div class="text-danger" v-if="formError.password">{{ formError.password }}</div>
-              <!-- TODO -->
-              <!-- <small ng-show="setupAccountForm.password.$dirty && setupAccountForm.password.$invalid">{{ 'setupAccount.errorPassword' | tr }}</small> -->
+              <div class="error-label" v-if="formError.password">{{ formError.password }}</div>
             </FormGroup>
 
             <FormGroup :has-error="password !== '' && passwordRepeat !== '' && password !== passwordRepeat">
               <label for="inputPasswordRepeat">{{ $t('setupAccount.passwordRepeat') }}</label>
               <PasswordInput id="inputPasswordRepeat" v-model="passwordRepeat" required/>
-              <div class="text-danger" v-if="password !== '' && passwordRepeat !== '' && password !== passwordRepeat">{{ $t('setupAccount.errorPasswordNoMatch') }}</div>
+              <div class="error-label" v-if="password !== '' && passwordRepeat !== '' && password !== passwordRepeat">{{ $t('setupAccount.errorPasswordNoMatch') }}</div>
             </FormGroup>
           </fieldset>
         </form>
@@ -168,7 +164,7 @@ onMounted(async () => {
         <small>{{ $t('setupAccount.welcomeTo') }}</small>
         <h1>{{ cloudronName }}</h1>
         <br/>
-        <h3 class="text-danger">{{ $t('setupAccount.invalidToken.title') }}</h3>
+        <h3 class="error-label">{{ $t('setupAccount.invalidToken.title') }}</h3>
         <div>{{ $t('setupAccount.invalidToken.description') }}</div>
       </div>