From f33666b8486d76e005e4204e0d46f4dba8142aee Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Sun, 6 Apr 2025 12:27:43 +0200
Subject: [PATCH] Use fieldset in login form

---
 dashboard/src/views/LoginView.vue | 48 +++++++++++++++++--------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/dashboard/src/views/LoginView.vue b/dashboard/src/views/LoginView.vue
index 3ee6fc4fc..e9f6e7bfb 100644
--- a/dashboard/src/views/LoginView.vue
+++ b/dashboard/src/views/LoginView.vue
@@ -93,37 +93,41 @@ onMounted(async () => {
       <br/>
       <div :html="note"></div>
 
-      <div class="has-error" v-if="passwordError">{{ $t('login.errorIncorrectCredentials') }}</div>
-      <div class="has-error" v-if="internalError">{{ $t('login.errorInternal') }}</div>
-
       <form @submit.prevent="onSubmit" v-if="!totpTokenRequired">
-        <input type="submit" style="display: none;"/>
+        <fieldset :disabled="busy">
+          <input type="submit" style="display: none;"/>
 
-        <FormGroup>
-          <label for="inputUsername">{{ $t('login.username') }}</label>
-          <TextInput id="inputUsername" v-model="username" autofocus required/>
-        </FormGroup>
+          <FormGroup>
+            <label for="inputUsername">{{ $t('login.username') }}</label>
+            <TextInput id="inputUsername" v-model="username" autofocus required/>
+          </FormGroup>
 
-        <FormGroup>
-          <label for="inputPassword">{{ $t('login.password') }}</label>
-          <PasswordInput id="inputPassword" v-model="password" required/>
-        </FormGroup>
+          <FormGroup>
+            <label for="inputPassword">{{ $t('login.password') }}</label>
+            <PasswordInput id="inputPassword" v-model="password" required/>
+          </FormGroup>
 
-        <div class="public-page-layout-button-bar">
-          <Button id="loginSubmitButton" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
-          <a href="/passwordreset.html">{{ $t('login.resetPasswordAction') }}</a>
-        </div>
+          <div class="has-error" v-if="passwordError">{{ $t('login.errorIncorrectCredentials') }}</div>
+          <div class="has-error" v-if="internalError">{{ $t('login.errorInternal') }}</div>
+
+          <div class="public-page-layout-button-bar">
+            <Button id="loginSubmitButton" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
+            <a href="/passwordreset.html">{{ $t('login.resetPasswordAction') }}</a>
+          </div>
+        </fieldset>
       </form>
 
       <form @submit.prevent="onSubmit" v-if="totpTokenRequired" autocomplete="off">
-        <input type="submit" style="display: none;"/>
+        <fieldset :disabled="busy">
+          <input type="submit" style="display: none;"/>
 
-        <FormGroup :has-error="totpError">
-          <label for="inputTotpToken">{{ $t('login.2faToken') }}</label>
-          <TextInput id="inputTotpToken" v-model="totpToken" required/>
-        </FormGroup>
+          <FormGroup :has-error="totpError">
+            <label for="inputTotpToken">{{ $t('login.2faToken') }}</label>
+            <TextInput id="inputTotpToken" v-model="totpToken" required/>
+          </FormGroup>
 
-        <Button id="totpTokenSubmitButton" style="margin-top: 12px" type="submit" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
+          <Button id="totpTokenSubmitButton" style="margin-top: 12px" @click.prevent="onSubmit" :loading="busy">{{ $t('login.signInAction') }}</Button>
+        </fieldset>
       </form>
     </div>
   </PublicPageLayout>