diff --git a/src/Mobile.vue b/src/Mobile.vue
index f6ca381d..e5d2f575 100644
--- a/src/Mobile.vue
+++ b/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;
 }
diff --git a/src/components/mobile/InformationSheet.vue b/src/components/mobile/InformationSheet.vue
new file mode 100644
index 00000000..73b43012
--- /dev/null
+++ b/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>
diff --git a/src/components/mobile/PasscodeInputSheet.vue b/src/components/mobile/PasscodeInputSheet.vue
new file mode 100644
index 00000000..c220341a
--- /dev/null
+++ b/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>
diff --git a/src/components/mobile/PasswordInputSheet.vue b/src/components/mobile/PasswordInputSheet.vue
new file mode 100644
index 00000000..1eb5fe88
--- /dev/null
+++ b/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>
diff --git a/src/components/mobile/PinCodeInputSheet.vue b/src/components/mobile/PinCodeInputSheet.vue
new file mode 100644
index 00000000..124a6b67
--- /dev/null
+++ b/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>
diff --git a/src/mobile-main.js b/src/mobile-main.js
index d1f8d84e..68029d3c 100644
--- a/src/mobile-main.js
+++ b/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);
 
diff --git a/src/views/mobile/ApplicationLock.vue b/src/views/mobile/ApplicationLock.vue
index ec552458..4c55ff59 100644
--- a/src/views/mobile/ApplicationLock.vue
+++ b/src/views/mobile/ApplicationLock.vue
@@ -27,51 +27,19 @@
             </f7-card-content>
         </f7-card>
 
-        <f7-sheet
-            style="height:auto;"
-            :opened="showInputPinCodeSheetForEnable" @sheet:closed="showInputPinCodeSheetForEnable = false; currentPinCodeForEnable = ''"
-        >
-            <f7-page-content>
-                <div class="display-flex padding justify-content-space-between align-items-center">
-                    <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>
+        <PinCodeInputSheet :title="$t('PIN Code')"
+                           :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.')"
+                           :show.sync="showInputPinCodeSheetForEnable"
+                           v-model="currentPinCodeForEnable"
+                           @pincode:confirm="enable">
+        </PinCodeInputSheet>
 
-        <f7-sheet
-            style="height:auto;"
-            :opened="showInputPinCodeSheetForDisable" @sheet:closed="showInputPinCodeSheetForDisable = false; currentPinCodeForDisable = ''"
-        >
-            <f7-page-content>
-                <div class="display-flex padding justify-content-space-between align-items-center">
-                    <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>
+        <PinCodeInputSheet :title="$t('PIN Code')"
+                           :hint="$t('Please enter your current PIN code when disable application lock')"
+                           :show.sync="showInputPinCodeSheetForDisable"
+                           v-model="currentPinCodeForDisable"
+                           @pincode:confirm="disable">
+        </PinCodeInputSheet>
     </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;
             }
diff --git a/src/views/mobile/users/TwoFactorAuth.vue b/src/views/mobile/users/TwoFactorAuth.vue
index 0fb827cb..9d0bdb92 100644
--- a/src/views/mobile/users/TwoFactorAuth.vue
+++ b/src/views/mobile/users/TwoFactorAuth.vue
@@ -30,119 +30,47 @@
             </f7-card-content>
         </f7-card>
 
-        <f7-sheet
-            style="height:auto;"
-            :opened="showInputPasscodeSheetForEnable" @sheet:closed="showInputPasscodeSheetForEnable = false; currentPasscodeForEnable = ''"
-        >
-            <f7-page-content>
-                <div class="display-flex padding justify-content-space-between align-items-center">
-                    <div style="font-size: 18px"><b>{{ $t('Passcode') }}</b></div>
+        <PasscodeInputSheet :title="$t('Passcode')"
+                            :hint="$t('Please use two factor authentication app scan the below qrcode and input current passcode')"
+                            :show.sync="showInputPasscodeSheetForEnable"
+                            :confirm-disabled="enableConfirming"
+                            :cancel-disabled="enableConfirming"
+                            v-model="currentPasscodeForEnable"
+                            @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">
-                    <p class="no-margin-top margin-bottom-half">{{ $t('Please use two factor authentication app scan the below qrcode and input current passcode') }}</p>
-                    <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>
+            </div>
+        </PasscodeInputSheet>
 
-        <f7-sheet
-            style="height:auto"
-            :opened="showInputPasswordSheetForDisable" @sheet:closed="showInputPasswordSheetForDisable = false; currentPasswordForDisable = ''"
-        >
-            <f7-page-content>
-                <div class="display-flex padding justify-content-space-between align-items-center">
-                    <div style="font-size: 18px"><b>{{ $t('Current Password') }}</b></div>
-                </div>
-                <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>
+        <PasswordInputSheet :title="$t('Current Password')"
+                            :hint="$t('Please enter your current password when disable two factor authentication')"
+                            :show.sync="showInputPasswordSheetForDisable"
+                            :confirm-disabled="disabling"
+                            :cancel-disabled="disabling"
+                            v-model="currentPasswordForDisable"
+                            @password:confirm="disable">
+        </PasswordInputSheet>
 
-        <f7-sheet
-            style="height:auto"
-            :opened="showInputPasswordSheetForRegenerate" @sheet:closed="showInputPasswordSheetForRegenerate = false; currentPasswordForRegenerate= ''"
-        >
-            <f7-page-content>
-                <div class="display-flex padding justify-content-space-between align-items-center">
-                    <div style="font-size: 18px"><b>{{ $t('Current Password') }}</b></div>
-                </div>
-                <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>
+        <PasswordInputSheet :title="$t('Current Password')"
+                            :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.')"
+                            :show.sync="showInputPasswordSheetForRegenerate"
+                            :confirm-disabled="regenerating"
+                            :cancel-disabled="regenerating"
+                            v-model="currentPasswordForRegenerate"
+                            @password:confirm="regenerateBackupCode">
+        </PasswordInputSheet>
 
-        <f7-sheet
-            style="height:auto"
-            :opened="showBackupCodeSheet" @sheet:closed="showBackupCodeSheet = false; currentBackupCode = ''"
-        >
-            <f7-page-content>
-                <div class="display-flex padding justify-content-space-between align-items-center">
-                    <div style="font-size: 18px"><b>{{ $t('Backup Code') }}</b></div>
-                </div>
-                <div class="padding-horizontal padding-bottom">
-                    <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>
+        <InformationSheet class="backup-code-sheet"
+                          :title="$t('Backup Code')"
+                          :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"
+                          :row-count="10"
+                          :enable-copy="true"
+                          :show.sync="showBackupCodeSheet"
+                          @info:copied="onBackupCodeCopied">
+        </InformationSheet>
     </f7-page>
 </template>
 
@@ -365,3 +293,9 @@ export default {
     }
 };
 </script>
+
+<style>
+.backup-code-sheet .information-content {
+    font-family: monospace;
+}
+</style>
diff --git a/src/views/mobile/users/UserProfile.vue b/src/views/mobile/users/UserProfile.vue
index 5db99e78..01ef6a09 100644
--- a/src/views/mobile/users/UserProfile.vue
+++ b/src/views/mobile/users/UserProfile.vue
@@ -78,31 +78,14 @@
             </f7-card-content>
         </f7-card>
 
-        <f7-sheet
-            style="height:auto"
-            :opened="showInputPasswordSheet" @sheet:closed="showInputPasswordSheet = false"
-        >
-            <f7-page-content>
-                <div class="display-flex padding justify-content-space-between align-items-center">
-                    <div style="font-size: 18px"><b>{{ $t('Current Password') }}</b></div>
-                </div>
-                <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>
+        <PasswordInputSheet :title="$t('Current Password')"
+                            :hint="$t('Please enter your current password when modifying your password')"
+                            :show.sync="showInputPasswordSheet"
+                            :confirm-disabled="saving"
+                            :cancel-disabled="saving"
+                            v-model="currentPassword"
+                            @password:confirm="save()">
+        </PasswordInputSheet>
     </f7-page>
 </template>