Account: Update 2FA icon on activation and deactivation #808

Signed-off-by: Michael Mayer <michael@photoprism.app>
This commit is contained in:
Michael Mayer
2024-03-26 12:00:49 +01:00
parent 0c73e977a9
commit 16dfa71fbb
3 changed files with 39 additions and 32 deletions

View File

@@ -10,7 +10,8 @@
</h3>
</v-flex>
<v-flex xs2 class="text-xs-right">
<v-icon size="28" color="primary">vpn_key</v-icon>
<v-icon v-if="page === 'deactivate'" size="28" color="primary">verified_user</v-icon>
<v-icon v-else size="28" color="primary">vpn_key</v-icon>
</v-flex>
</v-layout>
</v-card-title>
@@ -239,7 +240,6 @@
</v-dialog>
</template>
<script>
import User from "model/user";
import Util from "common/util";
export default {
@@ -248,7 +248,7 @@ export default {
show: Boolean,
model: {
type: Object,
default: () => new User(null),
default: () => this.$session.getUser(),
},
},
data() {
@@ -264,14 +264,13 @@ export default {
maxLength: 72,
rtl: this.$rtl,
key: {},
user: this.$session.getUser(),
};
},
computed: {
page() {
if (this.user?.AuthProvider !== "default" && this.user?.AuthProvider !== "local" && this.user?.AuthProvider !== "ldap") {
if (this.model?.AuthProvider !== "default" && this.model?.AuthProvider !== "local" && this.model?.AuthProvider !== "ldap") {
return "not_available";
} else if (this.user?.AuthMethod === "2fa") {
} else if (this.model?.AuthMethod === "2fa") {
return "deactivate";
} else if (this.key?.Type === "totp") {
if (!this.key?.VerifiedAt) {
@@ -319,15 +318,7 @@ export default {
this.updateUser();
},
updateUser() {
this.$notify.blockUI();
this.$session
.refresh()
.then(() => {
this.user = this.$session.getUser();
})
.finally(() => {
this.$notify.unblockUI();
});
this.$emit("updateUser");
},
setupDisabled() {
return this.isDemo || this.busy || this.password.length < this.minLength;

View File

@@ -213,6 +213,10 @@ export class User extends RestModel {
}
disable2FA() {
if (!this.Name) {
return true;
}
switch (this.AuthProvider) {
case "default":
return false;

View File

@@ -183,27 +183,28 @@
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm6 class="pa-2">
<v-btn block depressed color="secondary-light" class="action-webdav-dialog compact" :disabled="isPublic || isDemo || !user.WebDAV" @click.stop="showDialog('webdav')">
<translate>Connect via WebDAV</translate>
<v-icon :right="!rtl" :left="rtl" dark>sync_alt</v-icon>
<v-btn block depressed color="secondary-light" class="action-change-password compact" :disabled="isPublic || isDemo || user.Name === '' || provider !== 'local'" @click.stop="showDialog('password')">
<translate>Change Password</translate>
<v-icon :right="!rtl" :left="rtl" dark>lock</v-icon>
</v-btn>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-btn block depressed color="secondary-light" class="action-passcode-dialog compact" :disabled="isPublic || isDemo || user.disable2FA()" @click.stop="showDialog('passcode')">
<translate>2-Factor Authentication</translate>
<v-icon v-if="user.AuthMethod === '2fa'" :right="!rtl" :left="rtl" dark>verified_user</v-icon>
<v-icon v-else :right="!rtl" :left="rtl" dark>vpn_key</v-icon>
</v-btn>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-btn block depressed color="secondary-light" class="action-apps-dialog compact" :disabled="true" @click.stop="showDialog('apps')">
<translate>Apps and Devices</translate>
<v-icon :right="!rtl" :left="rtl" dark>smartphone</v-icon>
<v-icon :right="!rtl" :left="rtl" dark>devices</v-icon>
</v-btn>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-btn block depressed color="secondary-light" class="action-passcode-dialog compact" :disabled="user.disable2FA()" @click.stop="showDialog('passcode')">
<translate>2-Factor Authentication</translate>
<v-icon :right="!rtl" :left="rtl" dark>vpn_key</v-icon>
</v-btn>
</v-flex>
<v-flex xs12 sm6 class="pa-2">
<v-btn block depressed color="secondary-light" class="action-change-password compact" :disabled="isPublic || isDemo || user.Name === ''" @click.stop="showDialog('password')">
<translate>Change Password</translate>
<v-icon :right="!rtl" :left="rtl" dark>lock</v-icon>
<v-btn block depressed color="secondary-light" class="action-webdav-dialog compact" :disabled="isPublic || isDemo || !user.WebDAV" @click.stop="showDialog('webdav')">
<translate>Connect via WebDAV</translate>
<v-icon :right="!rtl" :left="rtl" dark>sync_alt</v-icon>
</v-btn>
</v-flex>
</v-layout>
@@ -340,7 +341,7 @@
</v-card>
</v-form>
<p-account-apps-dialog :show="dialog.apps" :model="user" @close="dialog.apps = false"></p-account-apps-dialog>
<p-account-passcode-dialog :show="dialog.passcode" :model="user" @close="dialog.passcode = false"></p-account-passcode-dialog>
<p-account-passcode-dialog :show="dialog.passcode" :model="user" @close="dialog.passcode = false" @updateUser="updateUser()"></p-account-passcode-dialog>
<p-account-password-dialog :show="dialog.password" :model="user" @close="dialog.password = false"></p-account-password-dialog>
<p-webdav-dialog :show="dialog.webdav" @close="dialog.webdav = false"></p-webdav-dialog>
</div>
@@ -359,6 +360,8 @@ export default {
data() {
const isDemo = this.$config.isDemo();
const isPublic = this.$config.isPublic();
const user = this.$session.getUser();
return {
busy: isDemo || isPublic,
options,
@@ -366,8 +369,9 @@ export default {
isPublic,
valid: true,
rtl: this.$rtl,
user: new User(this.$session.getUser()),
user: user,
countries: countries,
provider: this.$session.provider ? this.$session.provider : user.AuthProvider,
dialog: {
apps: false,
passcode: false,
@@ -406,8 +410,16 @@ export default {
}
this.dialog[name] = true;
},
isDisabled() {
return this.isDemo || this.busy;
updateUser() {
this.$notify.blockUI();
this.$session
.refresh()
.then(() => {
this.user = this.$session.getUser();
})
.finally(() => {
this.$notify.unblockUI();
});
},
validEmail(v) {
if (typeof v !== "string" || v === "") {