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
This commit is contained in:
bt90 2023-08-20 20:25:35 +02:00 committed by GitHub
parent 4d07b65bdd
commit eee9a1f004
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 4 deletions

View File

@ -5,18 +5,18 @@
<h1 class="h3 mb-3 fw-normal" /> <h1 class="h3 mb-3 fw-normal" />
<div v-if="!tokenRequired" class="form-floating"> <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> <label for="floatingInput">{{ $t("Username") }}</label>
</div> </div>
<div v-if="!tokenRequired" class="form-floating mt-3"> <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> <label for="floatingPassword">{{ $t("Password") }}</label>
</div> </div>
<div v-if="tokenRequired"> <div v-if="tokenRequired">
<div class="form-floating mt-3"> <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> <label for="otp">{{ $t("Token") }}</label>
</div> </div>
</div> </div>

View File

@ -28,6 +28,7 @@
v-model="currentPassword" v-model="currentPassword"
type="password" type="password"
class="form-control" class="form-control"
autocomplete="current-password"
required required
/> />
</div> </div>
@ -43,7 +44,7 @@
<div v-if="uri && twoFAStatus == false" class="mt-3"> <div v-if="uri && twoFAStatus == false" class="mt-3">
<label for="basic-url" class="form-label">{{ $t("twoFAVerifyLabel") }}</label> <label for="basic-url" class="form-label">{{ $t("twoFAVerifyLabel") }}</label>
<div class="input-group"> <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> <button class="btn btn-outline-primary" type="button" @click="verifyToken()">{{ $t("Verify Token") }}</button>
</div> </div>
<p v-show="tokenValid" class="mt-2" style="color: green;">{{ $t("tokenValidSettingsMsg") }}</p> <p v-show="tokenValid" class="mt-2" style="color: green;">{{ $t("tokenValidSettingsMsg") }}</p>

View File

@ -19,6 +19,7 @@
v-model="password.currentPassword" v-model="password.currentPassword"
type="password" type="password"
class="form-control" class="form-control"
autocomplete="current-password"
required required
/> />
</div> </div>
@ -32,6 +33,7 @@
v-model="password.newPassword" v-model="password.newPassword"
type="password" type="password"
class="form-control" class="form-control"
autocomplete="new-password"
required required
/> />
</div> </div>
@ -46,6 +48,7 @@
type="password" type="password"
class="form-control" class="form-control"
:class="{ 'is-invalid': invalidPassword }" :class="{ 'is-invalid': invalidPassword }"
autocomplete="new-password"
required required
/> />
<div class="invalid-feedback"> <div class="invalid-feedback">