jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Improve error reporting on account creation form

Browse Source
This commit is contained in:
Johannes Zellner
2025-04-24 22:48:34 +02:00
parent 4df1ec867c
commit 62cc534153
1 changed files with 10 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
dashboard/src/components/SetupAccount.vue
View File

@@ -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>