code refactor

src/Mobile.vue

@@ -97,10 +97,6 @@ i.icon.la, i.icon.las, i.icon.lab {
     box-shadow: 0 0 3px rgba(0,0,0,.5) !important;
 }
 
-.list-item-pincode-input .item-inner {
-    justify-content: center;
-}
-
 .work-break-all {
     word-break: break-all;
 }

src/components/mobile/InformationSheet.vue

@@ -0,0 +1,46 @@
+<template>
+    <f7-sheet style="height:auto" :opened="show" @sheet:closed="onSheetClosed">
+        <f7-page-content>
+            <div class="display-flex padding justify-content-space-between align-items-center">
+                <div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
+            </div>
+            <div class="padding-horizontal padding-bottom">
+                <p class="no-margin-top margin-bottom-half" v-if="hint">
+                    <span>{{ hint }}</span>
+                    <f7-link class="icon-after-text"
+                             icon-only icon-f7="doc_on_doc" icon-size="16px"
+                             v-if="enableCopy"
+                             v-clipboard:copy="information" v-clipboard:success="onCopied"></f7-link>
+                </p>
+                <textarea class="information-content full-line" :rows="rowCount" readonly="readonly" v-model="information"></textarea>
+                <div class="margin-top text-align-center">
+                    <f7-link @click="cancel" :text="$t('Close')"></f7-link>
+                </div>
+            </div>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script>
+export default {
+    props: [
+        'title',
+        'hint',
+        'information',
+        'rowCount',
+        'enableCopy',
+        'show'
+    ],
+    methods: {
+        onSheetClosed() {
+            this.$emit('update:show', false);
+        },
+        onCopied() {
+            this.$emit('info:copied');
+        },
+        cancel() {
+            this.$emit('update:show', false);
+        }
+    }
+}
+</script>

src/components/mobile/PasscodeInputSheet.vue

@@ -0,0 +1,71 @@
+<template>
+    <f7-sheet style="height:auto" :opened="show"
+              @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+        <f7-page-content>
+            <div class="display-flex padding justify-content-space-between align-items-center">
+                <div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
+            </div>
+            <div class="padding-horizontal padding-bottom">
+                <p class="no-margin-top margin-bottom-half" v-if="hint">{{ hint }}</p>
+                <slot></slot>
+                <f7-list no-hairlines class="no-margin-top margin-bottom">
+                    <f7-list-input
+                        type="number"
+                        autocomplete="one-time-code"
+                        outline
+                        clear-button
+                        :placeholder="$t('Passcode')"
+                        :value="currentPasscode"
+                        @input="currentPasscode = $event.target.value"
+                        @keyup.enter.native="confirm()"
+                    ></f7-list-input>
+                </f7-list>
+                <f7-button large fill
+                           :class="{ 'disabled': !currentPasscode || confirmDisabled }"
+                           :text="$t('Continue')"
+                           @click="confirm">
+                </f7-button>
+                <div class="margin-top text-align-center">
+                    <f7-link :class="{ 'disabled': cancelDisabled }" @click="cancel" :text="$t('Cancel')"></f7-link>
+                </div>
+            </div>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script>
+export default {
+    props: [
+        'value',
+        'title',
+        'hint',
+        'confirmDisabled',
+        'cancelDisabled',
+        'show'
+    ],
+    data() {
+        return {
+            currentPasscode: ''
+        }
+    },
+    methods: {
+        onSheetOpen() {
+            this.currentPasscode = '';
+        },
+        onSheetClosed() {
+            this.$emit('update:show', false);
+        },
+        confirm() {
+            if (!this.currentPasscode || this.confirmDisabled) {
+                return;
+            }
+
+            this.$emit('input', this.currentPasscode);
+            this.$emit('passcode:confirm', this.currentPasscode);
+        },
+        cancel() {
+            this.$emit('update:show', false);
+        }
+    }
+}
+</script>

src/components/mobile/PasswordInputSheet.vue

@@ -0,0 +1,70 @@
+<template>
+    <f7-sheet style="height:auto" :opened="show"
+              @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+        <f7-page-content>
+            <div class="display-flex padding justify-content-space-between align-items-center">
+                <div style="font-size: 18px" v-if="title"><b>{{ title }}</b></div>
+            </div>
+            <div class="padding-horizontal padding-bottom">
+                <p class="no-margin-top margin-bottom-half" v-if="hint">{{ hint }}</p>
+                <f7-list no-hairlines class="no-margin-top margin-bottom">
+                    <f7-list-input
+                        type="password"
+                        autocomplete="current-password"
+                        outline
+                        clear-button
+                        :placeholder="$t('Password')"
+                        :value="currentPassword"
+                        @input="currentPassword = $event.target.value"
+                        @keyup.enter.native="confirm()"
+                    ></f7-list-input>
+                </f7-list>
+                <f7-button large fill
+                           :class="{ 'disabled': !currentPassword || confirmDisabled }"
+                           :text="$t('Continue')"
+                           @click="confirm">
+                </f7-button>
+                <div class="margin-top text-align-center">
+                    <f7-link :class="{ 'disabled': cancelDisabled }" @click="cancel" :text="$t('Cancel')"></f7-link>
+                </div>
+            </div>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script>
+export default {
+    props: [
+        'value',
+        'title',
+        'hint',
+        'confirmDisabled',
+        'cancelDisabled',
+        'show'
+    ],
+    data() {
+        return {
+            currentPassword: ''
+        }
+    },
+    methods: {
+        onSheetOpen() {
+            this.currentPassword = '';
+        },
+        onSheetClosed() {
+            this.$emit('update:show', false);
+        },
+        confirm() {
+            if (!this.currentPassword || this.confirmDisabled) {
+                return;
+            }
+
+            this.$emit('input', this.currentPassword);
+            this.$emit('password:confirm', this.currentPassword);
+        },
+        cancel() {
+            this.$emit('update:show', false);
+        }
+    }
+}
+</script>

src/components/mobile/PinCodeInputSheet.vue

@@ -0,0 +1,74 @@
+<template>
+    <f7-sheet style="height:auto" :opened="show"
+              @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+        <f7-page-content>
+            <div class="display-flex padding justify-content-space-between align-items-center">
+                <div style="font-size: 18px"><b>{{ title }}</b></div>
+            </div>
+            <div class="padding-horizontal padding-bottom">
+                <p class="no-margin-top margin-bottom-half">{{ hint }}</p>
+                <f7-list no-hairlines class="no-margin-top margin-bottom">
+                    <f7-list-item class="list-item-pincode-input">
+                        <PincodeInput secure :length="6" v-model="currentPinCode" />
+                    </f7-list-item>
+                </f7-list>
+                <f7-button large fill
+                           :class="{ 'disabled': !currentPinCodeValid || confirmDisabled }"
+                           :text="$t('Continue')"
+                           @click="confirm">
+                </f7-button>
+                <div class="margin-top text-align-center">
+                    <f7-link @click="cancel" :text="$t('Cancel')"></f7-link>
+                </div>
+            </div>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script>
+export default {
+    props: [
+        'value',
+        'title',
+        'hint',
+        'confirmDisabled',
+        'cancelDisabled',
+        'show'
+    ],
+    data() {
+        return {
+            currentPinCode: ''
+        }
+    },
+    computed: {
+        currentPinCodeValid() {
+            return this.currentPinCode && this.currentPinCode.length === 6;
+        },
+    },
+    methods: {
+        onSheetOpen() {
+            this.currentPinCode = '';
+        },
+        onSheetClosed() {
+            this.$emit('update:show', false);
+        },
+        confirm() {
+            if (!this.currentPinCodeValid || this.confirmDisabled) {
+                return;
+            }
+
+            this.$emit('input', this.currentPinCode);
+            this.$emit('pincode:confirm', this.currentPinCode);
+        },
+        cancel() {
+            this.$emit('update:show', false);
+        }
+    }
+}
+</script>
+
+<style>
+.list-item-pincode-input .item-inner {
+    justify-content: center;
+}
+</style>

src/mobile-main.js

@@ -37,8 +37,12 @@ import categoryIconFilter from './filters/categoryIcon.js';
 import tokenDeviceFilter from './filters/tokenDevice.js';
 import tokenIconFilter from './filters/tokenIcon.js';
 
+import PasswordInputSheet from "./components/mobile/PasswordInputSheet.vue";
+import PasscodeInputSheet from "./components/mobile/PasscodeInputSheet.vue";
+import PinCodeInputSheet from "./components/mobile/PinCodeInputSheet.vue";
 import IconSelectionSheet from "./components/mobile/IconSelectionSheet.vue";
 import ColorSelectionSheet from "./components/mobile/ColorSelectionSheet.vue";
+import InformationSheet from "./components/mobile/InformationSheet.vue";
 import NumberPadSheet from "./components/mobile/NumberPadSheet.vue";
 import App from './Mobile.vue';
 
@@ -47,8 +51,12 @@ Vue.use(VueI18nFilter);
 Vue.use(VueMoment, { moment });
 Vue.use(VueClipboard);
 Vue.component('PincodeInput', PincodeInput);
+Vue.component('PasswordInputSheet', PasswordInputSheet);
+Vue.component('PasscodeInputSheet', PasscodeInputSheet);
+Vue.component('PinCodeInputSheet', PinCodeInputSheet);
 Vue.component('IconSelectionSheet', IconSelectionSheet);
 Vue.component('ColorSelectionSheet', ColorSelectionSheet);
+Vue.component('InformationSheet', InformationSheet);
 Vue.component('NumberPadSheet', NumberPadSheet);
 Framework7.use(Framework7Vue);
 

src/views/mobile/ApplicationLock.vue

@@ -27,51 +27,19 @@
             </f7-card-content>
         </f7-card>
 
-        <f7-sheet
+        <PinCodeInputSheet :title="$t('PIN Code')"
-            style="height:auto;"
+                           :hint="$t('Please input a new PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.')"
-            :opened="showInputPinCodeSheetForEnable" @sheet:closed="showInputPinCodeSheetForEnable = false; currentPinCodeForEnable = ''"
+                           :show.sync="showInputPinCodeSheetForEnable"
-        >
+                           v-model="currentPinCodeForEnable"
-            <f7-page-content>
+                           @pincode:confirm="enable">
-                <div class="display-flex padding justify-content-space-between align-items-center">
+        </PinCodeInputSheet>
-                    <div style="font-size: 18px"><b>{{ $t('PIN Code') }}</b></div>
-                </div>
-                <div class="padding-horizontal padding-bottom">
-                    <p class="no-margin-top margin-bottom-half">{{ $t('Please input a new PIN code. PIN code would encrypt your local data, so you need input this PIN code when you launch this app. If this PIN code is lost, you should re-login.') }}</p>
-                    <f7-list form no-hairlines class="no-margin-top margin-bottom">
-                        <f7-list-item class="list-item-pincode-input">
-                            <PincodeInput secure :length="6" v-model="currentPinCodeForEnable" />
-                        </f7-list-item>
-                    </f7-list>
-                    <f7-button large fill :class="{ 'disabled': !currentPinCodeForEnableValid }" :text="$t('Continue')" @click="enable(currentPinCodeForEnable)"></f7-button>
-                    <div class="margin-top text-align-center">
-                        <f7-link @click="showInputPinCodeSheetForEnable = false" :text="$t('Cancel')"></f7-link>
-                    </div>
-                </div>
-            </f7-page-content>
-        </f7-sheet>
 
-        <f7-sheet
+        <PinCodeInputSheet :title="$t('PIN Code')"
-            style="height:auto;"
+                           :hint="$t('Please enter your current PIN code when disable application lock')"
-            :opened="showInputPinCodeSheetForDisable" @sheet:closed="showInputPinCodeSheetForDisable = false; currentPinCodeForDisable = ''"
+                           :show.sync="showInputPinCodeSheetForDisable"
-        >
+                           v-model="currentPinCodeForDisable"
-            <f7-page-content>
+                           @pincode:confirm="disable">
-                <div class="display-flex padding justify-content-space-between align-items-center">
+        </PinCodeInputSheet>
-                    <div style="font-size: 18px"><b>{{ $t('PIN Code') }}</b></div>
-                </div>
-                <div class="padding-horizontal padding-bottom">
-                    <p class="no-margin-top margin-bottom-half">{{ $t('Please enter your current PIN code when disable application lock') }}</p>
-                    <f7-list form no-hairlines class="no-margin-top margin-bottom">
-                        <f7-list-item class="list-item-pincode-input">
-                            <PincodeInput secure :length="6" v-model="currentPinCodeForDisable" />
-                        </f7-list-item>
-                    </f7-list>
-                    <f7-button large fill :class="{ 'disabled': !currentPinCodeForDisableValid }" :text="$t('Continue')" @click="disable(currentPinCodeForDisable)"></f7-button>
-                    <div class="margin-top text-align-center">
-                        <f7-link @click="showInputPinCodeSheetForDisable = false" :text="$t('Cancel')"></f7-link>
-                    </div>
-                </div>
-            </f7-page-content>
-        </f7-sheet>
     </f7-page>
 </template>
 
@@ -88,14 +56,6 @@ export default {
             showInputPinCodeSheetForDisable: false
         };
     },
-    computed: {
-        currentPinCodeForEnableValid() {
-            return this.currentPinCodeForEnable && this.currentPinCodeForEnable.length === 6;
-        },
-        currentPinCodeForDisableValid() {
-            return this.currentPinCodeForDisable && this.currentPinCodeForDisable.length === 6;
-        },
-    },
     watch: {
         isEnableApplicationLockWebAuthn: function (newValue) {
             const self = this;
@@ -155,7 +115,7 @@ export default {
                 return;
             }
 
-            if (!this.currentPinCodeForEnableValid) {
+            if (!this.currentPinCodeForEnable || this.currentPinCodeForEnable.length !== 6) {
                 this.$alert('PIN code is invalid');
                 return;
             }

src/views/mobile/users/TwoFactorAuth.vue

@@ -30,119 +30,47 @@
             </f7-card-content>
         </f7-card>
 
-        <f7-sheet
+        <PasscodeInputSheet :title="$t('Passcode')"
-            style="height:auto;"
+                            :hint="$t('Please use two factor authentication app scan the below qrcode and input current passcode')"
-            :opened="showInputPasscodeSheetForEnable" @sheet:closed="showInputPasscodeSheetForEnable = false; currentPasscodeForEnable = ''"
+                            :show.sync="showInputPasscodeSheetForEnable"
-        >
+                            :confirm-disabled="enableConfirming"
-            <f7-page-content>
+                            :cancel-disabled="enableConfirming"
-                <div class="display-flex padding justify-content-space-between align-items-center">
+                            v-model="currentPasscodeForEnable"
-                    <div style="font-size: 18px"><b>{{ $t('Passcode') }}</b></div>
+                            @passcode:confirm="enableConfirm">
+            <div class="row">
+                <div class="col-100 text-align-center">
+                    <img alt="qrcode" width="240px" height="240px" :src="new2FAQRCode" />
                 </div>
-                <div class="padding-horizontal padding-bottom">
+            </div>
-                    <p class="no-margin-top margin-bottom-half">{{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}</p>
+        </PasscodeInputSheet>
-                    <div class="row">
-                        <div class="col-100 text-align-center">
-                            <img alt="qrcode" width="240px" height="240px" :src="new2FAQRCode" />
-                        </div>
-                    </div>
-                    <f7-list form no-hairlines class="no-margin-top margin-bottom">
-                        <f7-list-input
-                            type="number"
-                            autocomplete="one-time-code"
-                            outline
-                            clear-button
-                            :placeholder="$t('Passcode')"
-                            :value="currentPasscodeForEnable"
-                            @input="currentPasscodeForEnable = $event.target.value"
-                        ></f7-list-input>
-                    </f7-list>
-                    <f7-button large fill :class="{ 'disabled': !currentPasscodeForEnable }" :text="$t('Continue')" @click="enableConfirm"></f7-button>
-                    <div class="margin-top text-align-center">
-                        <f7-link :class="{ 'disabled': enableConfirming }" @click="showInputPasscodeSheetForEnable = false" :text="$t('Cancel')"></f7-link>
-                    </div>
-                </div>
-            </f7-page-content>
-        </f7-sheet>
 
-        <f7-sheet
+        <PasswordInputSheet :title="$t('Current Password')"
-            style="height:auto"
+                            :hint="$t('Please enter your current password when disable two factor authentication')"
-            :opened="showInputPasswordSheetForDisable" @sheet:closed="showInputPasswordSheetForDisable = false; currentPasswordForDisable = ''"
+                            :show.sync="showInputPasswordSheetForDisable"
-        >
+                            :confirm-disabled="disabling"
-            <f7-page-content>
+                            :cancel-disabled="disabling"
-                <div class="display-flex padding justify-content-space-between align-items-center">
+                            v-model="currentPasswordForDisable"
-                    <div style="font-size: 18px"><b>{{ $t('Current Password') }}</b></div>
+                            @password:confirm="disable">
-                </div>
+        </PasswordInputSheet>
-                <div class="padding-horizontal padding-bottom">
-                    <p class="no-margin-top margin-bottom-half">{{ $t('Please enter your current password when disable two factor authentication') }}</p>
-                    <f7-list form no-hairlines class="no-margin-top margin-bottom">
-                        <f7-list-input
-                            type="password"
-                            autocomplete="current-password"
-                            outline
-                            clear-button
-                            :placeholder="$t('Password')"
-                            :value="currentPasswordForDisable"
-                            @input="currentPasswordForDisable = $event.target.value"
-                        ></f7-list-input>
-                    </f7-list>
-                    <f7-button large fill :class="{ 'disabled': !currentPasswordForDisable }" :text="$t('Continue')" @click="disable(currentPasswordForDisable)"></f7-button>
-                    <div class="margin-top text-align-center">
-                        <f7-link :class="{ 'disabled': disabling }" @click="showInputPasswordSheetForDisable = false" :text="$t('Cancel')"></f7-link>
-                    </div>
-                </div>
-            </f7-page-content>
-        </f7-sheet>
 
-        <f7-sheet
+        <PasswordInputSheet :title="$t('Current Password')"
-            style="height:auto"
+                            :hint="$t('Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.')"
-            :opened="showInputPasswordSheetForRegenerate" @sheet:closed="showInputPasswordSheetForRegenerate = false; currentPasswordForRegenerate= ''"
+                            :show.sync="showInputPasswordSheetForRegenerate"
-        >
+                            :confirm-disabled="regenerating"
-            <f7-page-content>
+                            :cancel-disabled="regenerating"
-                <div class="display-flex padding justify-content-space-between align-items-center">
+                            v-model="currentPasswordForRegenerate"
-                    <div style="font-size: 18px"><b>{{ $t('Current Password') }}</b></div>
+                            @password:confirm="regenerateBackupCode">
-                </div>
+        </PasswordInputSheet>
-                <div class="padding-horizontal padding-bottom">
-                    <p class="no-margin-top margin-bottom-half">{{ $t('Please enter your current password when regenerate two factor authentication backup codes. If you regenerate backup codes, the old codes will be invalidated.') }}</p>
-                    <f7-list form no-hairlines class="no-margin-top margin-bottom">
-                        <f7-list-input
-                            type="password"
-                            autocomplete="current-password"
-                            outline
-                            clear-button
-                            :placeholder="$t('Password')"
-                            :value="currentPasswordForRegenerate"
-                            @input="currentPasswordForRegenerate = $event.target.value"
-                        ></f7-list-input>
-                    </f7-list>
-                    <f7-button large fill :class="{ 'disabled': !currentPasswordForRegenerate }" :text="$t('Continue')" @click="regenerateBackupCode(currentPasswordForRegenerate)"></f7-button>
-                    <div class="margin-top text-align-center">
-                        <f7-link :class="{ 'disabled': regenerating }" @click="showInputPasswordSheetForRegenerate = false" :text="$t('Cancel')"></f7-link>
-                    </div>
-                </div>
-            </f7-page-content>
-        </f7-sheet>
 
-        <f7-sheet
+        <InformationSheet class="backup-code-sheet"
-            style="height:auto"
+                          :title="$t('Backup Code')"
-            :opened="showBackupCodeSheet" @sheet:closed="showBackupCodeSheet = false; currentBackupCode = ''"
+                          :hint="$t('Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.')"
-        >
+                          :information="currentBackupCode"
-            <f7-page-content>
+                          :row-count="10"
-                <div class="display-flex padding justify-content-space-between align-items-center">
+                          :enable-copy="true"
-                    <div style="font-size: 18px"><b>{{ $t('Backup Code') }}</b></div>
+                          :show.sync="showBackupCodeSheet"
-                </div>
+                          @info:copied="onBackupCodeCopied">
-                <div class="padding-horizontal padding-bottom">
+        </InformationSheet>
-                    <p class="no-margin-top margin-bottom-half">
-                        <span>{{ $t('Please copy these backup codes to safe place, the below codes can only be shown once. If these codes were lost, you can regenerate backup codes at any time.') }}</span>
-                        <f7-link icon-only icon-f7="doc_on_doc" icon-size="16px" class="icon-after-text"
-                                 v-clipboard:copy="currentBackupCode" v-clipboard:success="onBackupCodeCopied"></f7-link>
-                    </p>
-                    <textarea class="full-line" rows="10" readonly="readonly" v-model="currentBackupCode"></textarea>
-                    <div class="margin-top text-align-center">
-                        <f7-link @click="showBackupCodeSheet = false" :text="$t('Close')"></f7-link>
-                    </div>
-                </div>
-            </f7-page-content>
-        </f7-sheet>
     </f7-page>
 </template>
 
@@ -365,3 +293,9 @@ export default {
     }
 };
 </script>
+
+<style>
+.backup-code-sheet .information-content {
+    font-family: monospace;
+}
+</style>

src/views/mobile/users/UserProfile.vue

@@ -78,31 +78,14 @@
             </f7-card-content>
         </f7-card>
 
-        <f7-sheet
+        <PasswordInputSheet :title="$t('Current Password')"
-            style="height:auto"
+                            :hint="$t('Please enter your current password when modifying your password')"
-            :opened="showInputPasswordSheet" @sheet:closed="showInputPasswordSheet = false"
+                            :show.sync="showInputPasswordSheet"
-        >
+                            :confirm-disabled="saving"
-            <f7-page-content>
+                            :cancel-disabled="saving"
-                <div class="display-flex padding justify-content-space-between align-items-center">
+                            v-model="currentPassword"
-                    <div style="font-size: 18px"><b>{{ $t('Current Password') }}</b></div>
+                            @password:confirm="save()">
-                </div>
+        </PasswordInputSheet>
-                <div class="padding-horizontal padding-bottom">
-                    <p class="no-margin-top">{{ $t('Please enter your current password when modifying your password') }}</p>
-                    <f7-list form no-hairlines class="no-margin-top margin-bottom">
-                        <f7-list-input
-                            type="password"
-                            autocomplete="current-password"
-                            outline
-                            clear-button
-                            :placeholder="$t('Password')"
-                            :value="currentPassword"
-                            @input="currentPassword = $event.target.value"
-                        ></f7-list-input>
-                    </f7-list>
-                    <f7-button large fill :class="{ 'disabled': !currentPassword || saving }" :text="$t('Continue')" @click="save"></f7-button>
-                </div>
-            </f7-page-content>
-        </f7-sheet>
     </f7-page>
 </template>