From eee9a1f004c67c850b6d9b3342124f61c3ba0d4e Mon Sep 17 00:00:00 2001
From: bt90 <btom1990@googlemail.com>
Date: Sun, 20 Aug 2023 20:25:35 +0200
Subject: [PATCH] Passwordmanager friendly inputs (#3593)

* Mark username/password inputs as required

* Mark 2FA input as required

* Add autocomplete attributes

* Add autocomplete suggestion to password change

* Add autocomplete to 2FA dialog

* Mark 2fa input as required
---
 src/components/Login.vue             | 6 +++---
 src/components/TwoFADialog.vue       | 3 ++-
 src/components/settings/Security.vue | 3 +++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Login.vue b/src/components/Login.vue
index 0a0266e7..ec104018 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -5,18 +5,18 @@
                 <h1 class="h3 mb-3 fw-normal" />
 
                 <div v-if="!tokenRequired" class="form-floating">
-                    <input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username">
+                    <input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username" autocomplete="username" required>
                     <label for="floatingInput">{{ $t("Username") }}</label>
                 </div>
 
                 <div v-if="!tokenRequired" class="form-floating mt-3">
-                    <input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password">
+                    <input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password" autocomplete="current-password" required>
                     <label for="floatingPassword">{{ $t("Password") }}</label>
                 </div>
 
                 <div v-if="tokenRequired">
                     <div class="form-floating mt-3">
-                        <input id="otp" v-model="token" type="text" maxlength="6" class="form-control" placeholder="123456">
+                        <input id="otp" v-model="token" type="text" maxlength="6" class="form-control" placeholder="123456" autocomplete="one-time-code" required>
                         <label for="otp">{{ $t("Token") }}</label>
                     </div>
                 </div>
diff --git a/src/components/TwoFADialog.vue b/src/components/TwoFADialog.vue
index 8dc9f9c7..4f03ae59 100644
--- a/src/components/TwoFADialog.vue
+++ b/src/components/TwoFADialog.vue
@@ -28,6 +28,7 @@
                                     v-model="currentPassword"
                                     type="password"
                                     class="form-control"
+                                    autocomplete="current-password"
                                     required
                                 />
                             </div>
@@ -43,7 +44,7 @@
                             <div v-if="uri && twoFAStatus == false" class="mt-3">
                                 <label for="basic-url" class="form-label">{{ $t("twoFAVerifyLabel") }}</label>
                                 <div class="input-group">
-                                    <input v-model="token" type="text" maxlength="6" class="form-control">
+                                    <input v-model="token" type="text" maxlength="6" class="form-control" autocomplete="one-time-code" required>
                                     <button class="btn btn-outline-primary" type="button" @click="verifyToken()">{{ $t("Verify Token") }}</button>
                                 </div>
                                 <p v-show="tokenValid" class="mt-2" style="color: green;">{{ $t("tokenValidSettingsMsg") }}</p>
diff --git a/src/components/settings/Security.vue b/src/components/settings/Security.vue
index 7d13ea90..2fe4d448 100644
--- a/src/components/settings/Security.vue
+++ b/src/components/settings/Security.vue
@@ -19,6 +19,7 @@
                             v-model="password.currentPassword"
                             type="password"
                             class="form-control"
+                            autocomplete="current-password"
                             required
                         />
                     </div>
@@ -32,6 +33,7 @@
                             v-model="password.newPassword"
                             type="password"
                             class="form-control"
+                            autocomplete="new-password"
                             required
                         />
                     </div>
@@ -46,6 +48,7 @@
                             type="password"
                             class="form-control"
                             :class="{ 'is-invalid': invalidPassword }"
+                            autocomplete="new-password"
                             required
                         />
                         <div class="invalid-feedback">