From f8c66be130f3209e9c993fdde95ded6fecdfeeaf Mon Sep 17 00:00:00 2001
From: Andreas Nedbal <andreas.nedbal@in2code.de>
Date: Wed, 4 May 2022 03:10:34 +0200
Subject: [PATCH] refactor(client): refactor settings/security to use
Composition API (#8592)
---
.../client/src/pages/settings/security.vue | 136 ++++++++----------
1 file changed, 61 insertions(+), 75 deletions(-)
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index 6fb3f1c413..401648790a 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -1,17 +1,17 @@
<template>
<div class="_formRoot">
<FormSection>
- <template #label>{{ $ts.password }}</template>
- <FormButton primary @click="change()">{{ $ts.changePassword }}</FormButton>
+ <template #label>{{ i18n.ts.password }}</template>
+ <FormButton primary @click="change()">{{ i18n.ts.changePassword }}</FormButton>
</FormSection>
<FormSection>
- <template #label>{{ $ts.twoStepAuthentication }}</template>
+ <template #label>{{ i18n.ts.twoStepAuthentication }}</template>
<X2fa/>
</FormSection>
<FormSection>
- <template #label>{{ $ts.signinHistory }}</template>
+ <template #label>{{ i18n.ts.signinHistory }}</template>
<MkPagination :pagination="pagination">
<template v-slot="{items}">
<div>
@@ -30,15 +30,15 @@
<FormSection>
<FormSlot>
- <FormButton danger @click="regenerateToken"><i class="fas fa-sync-alt"></i> {{ $ts.regenerateLoginToken }}</FormButton>
- <template #caption>{{ $ts.regenerateLoginTokenDescription }}</template>
+ <FormButton danger @click="regenerateToken"><i class="fas fa-sync-alt"></i> {{ i18n.ts.regenerateLoginToken }}</FormButton>
+ <template #caption>{{ i18n.ts.regenerateLoginTokenDescription }}</template>
</FormSlot>
</FormSection>
</div>
</template>
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { defineExpose } from 'vue';
import FormSection from '@/components/form/section.vue';
import FormSlot from '@/components/form/slot.vue';
import FormButton from '@/components/ui/button.vue';
@@ -46,77 +46,63 @@ import MkPagination from '@/components/ui/pagination.vue';
import X2fa from './2fa.vue';
import * as os from '@/os';
import * as symbols from '@/symbols';
+import { i18n } from '@/i18n';
-export default defineComponent({
- components: {
- FormSection,
- FormButton,
- MkPagination,
- FormSlot,
- X2fa,
- },
+const pagination = {
+ endpoint: 'i/signin-history' as const,
+ limit: 5,
+};
+
+async function change() {
+ const { canceled: canceled1, result: currentPassword } = await os.inputText({
+ title: i18n.ts.currentPassword,
+ type: 'password'
+ });
+ if (canceled1) return;
+
+ const { canceled: canceled2, result: newPassword } = await os.inputText({
+ title: i18n.ts.newPassword,
+ type: 'password'
+ });
+ if (canceled2) return;
+
+ const { canceled: canceled3, result: newPassword2 } = await os.inputText({
+ title: i18n.ts.newPasswordRetype,
+ type: 'password'
+ });
+ if (canceled3) return;
+
+ if (newPassword !== newPassword2) {
+ os.alert({
+ type: 'error',
+ text: i18n.ts.retypedNotMatch
+ });
+ return;
+ }
- emits: ['info'],
-
- data() {
- return {
- [symbols.PAGE_INFO]: {
- title: this.$ts.security,
- icon: 'fas fa-lock',
- bg: 'var(--bg)',
- },
- pagination: {
- endpoint: 'i/signin-history' as const,
- limit: 5,
- },
- }
- },
+ os.apiWithDialog('i/change-password', {
+ currentPassword,
+ newPassword
+ });
+}
- methods: {
- async change() {
- const { canceled: canceled1, result: currentPassword } = await os.inputText({
- title: this.$ts.currentPassword,
- type: 'password'
- });
- if (canceled1) return;
+function regenerateToken() {
+ os.inputText({
+ title: i18n.ts.password,
+ type: 'password'
+ }).then(({ canceled, result: password }) => {
+ if (canceled) return;
+ os.api('i/regenerate_token', {
+ password: password
+ });
+ });
+}
- const { canceled: canceled2, result: newPassword } = await os.inputText({
- title: this.$ts.newPassword,
- type: 'password'
- });
- if (canceled2) return;
-
- const { canceled: canceled3, result: newPassword2 } = await os.inputText({
- title: this.$ts.newPasswordRetype,
- type: 'password'
- });
- if (canceled3) return;
-
- if (newPassword !== newPassword2) {
- os.alert({
- type: 'error',
- text: this.$ts.retypedNotMatch
- });
- return;
- }
-
- os.apiWithDialog('i/change-password', {
- currentPassword,
- newPassword
- });
- },
-
- regenerateToken() {
- os.inputText({
- title: this.$ts.password,
- type: 'password'
- }).then(({ canceled, result: password }) => {
- if (canceled) return;
- os.api('i/regenerate_token', {
- password: password
- });
- });
- },
+defineExpose({
+ [symbols.PAGE_INFO]: {
+ title: i18n.ts.security,
+ icon: 'fas fa-lock',
+ bg: 'var(--bg)',
}
});
</script>