From 74eeaeca55cb06d2dedd7d954126891f63b36c20 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Tue, 14 Sep 2021 20:45:51 +0800
Subject: [PATCH] fix: login page keyboard shortcut keys not working in macOS.
 (#352)

---
 src/components/Login/LoginForm.vue | 26 +++++++++++---------
 src/utils/device.js                |  4 +--
 src/views/user/Login.vue           | 39 ++++++++++++++++++------------
 3 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue
index 9bc30757..476f596f 100644
--- a/src/components/Login/LoginForm.vue
+++ b/src/components/Login/LoginForm.vue
@@ -9,42 +9,43 @@
     >
       <a-form-model-item
         v-if="!form.needAuthCode"
-        class="animated fadeInUp"
         :style="{ 'animation-delay': '0.1s' }"
+        class="animated fadeInUp"
         prop="username"
       >
-        <a-input placeholder="用户名/邮箱" v-model="form.model.username">
-          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
+        <a-input v-model="form.model.username" placeholder="用户名/邮箱">
+          <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
         </a-input>
       </a-form-model-item>
       <a-form-model-item
         v-if="!form.needAuthCode"
-        class="animated fadeInUp"
         :style="{ 'animation-delay': '0.2s' }"
+        class="animated fadeInUp"
         prop="password"
       >
-        <a-input v-model="form.model.password" type="password" placeholder="密码">
-          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
+        <a-input v-model="form.model.password" placeholder="密码" type="password">
+          <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
         </a-input>
       </a-form-model-item>
       <a-form-model-item
         v-if="form.needAuthCode"
-        class="animated fadeInUp"
         :style="{ 'animation-delay': '0.1s' }"
+        class="animated fadeInUp"
         prop="authcode"
       >
-        <a-input placeholder="两步验证码" v-model="form.model.authcode" :maxLength="6">
-          <a-icon slot="prefix" type="safety-certificate" style="color: rgba(0,0,0,.25)" />
+        <a-input v-model="form.model.authcode" :maxLength="6" placeholder="两步验证码">
+          <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="safety-certificate" />
         </a-input>
       </a-form-model-item>
-      <a-form-model-item class="animated fadeInUp" :style="{ 'animation-delay': '0.3s' }">
+      <a-form-model-item :style="{ 'animation-delay': '0.3s' }" class="animated fadeInUp">
         <a-button
+          :block="true"
           :loading="form.logging"
           type="primary"
-          :block="true"
           @click="form.needAuthCode ? handleLogin() : handleLoginClick()"
-          >{{ buttonName }}</a-button
         >
+          {{ buttonName }}
+        </a-button>
       </a-form-model-item>
     </a-form-model>
   </div>
@@ -52,6 +53,7 @@
 <script>
 import adminApi from '@/api/admin'
 import { mapActions } from 'vuex'
+
 export default {
   name: 'LoginForm',
   data() {
diff --git a/src/utils/device.js b/src/utils/device.js
index 1244595e..8f840d55 100644
--- a/src/utils/device.js
+++ b/src/utils/device.js
@@ -13,7 +13,7 @@ export const deviceEnquire = function(callback) {
     }
   }
 
-  const matchLablet = {
+  const matchTablet = {
     match: () => {
       callback && callback(DEVICE_TYPE.TABLET)
     }
@@ -28,6 +28,6 @@ export const deviceEnquire = function(callback) {
   // screen and (max-width: 1087.99px)
   enquireJs
     .register('screen and (max-width: 576px)', matchMobile)
-    .register('screen and (min-width: 576px) and (max-width: 1199px)', matchLablet)
+    .register('screen and (min-width: 576px) and (max-width: 1199px)', matchTablet)
     .register('screen and (min-width: 1200px)', matchDesktop)
 }
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index c613da7e..ea710658 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -11,11 +11,11 @@
       <a-row>
         <a-col :span="24">
           <router-link :to="{ name: 'ResetPassword' }">
-            <a class="tip animated fadeInRight" v-if="resetPasswordButtonVisible" href="javascript:void(0);">
+            <a v-if="resetPasswordButtonVisible" class="tip animated fadeInRight" href="javascript:void(0);">
               找回密码
             </a>
           </router-link>
-          <a @click="handleToggleShowApiForm" class="tip animated fadeInUp" :style="{ 'animation-delay': '0.4s' }">
+          <a :style="{ 'animation-delay': '0.4s' }" class="tip animated fadeInUp" @click="handleToggleShowApiForm">
             <a-icon type="setting" />
           </a>
         </a-col>
@@ -23,21 +23,21 @@
     </div>
     <div v-show="apiForm.visible" class="api-form animated">
       <a-form layout="vertical">
-        <a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.1s' }">
+        <a-form-item :style="{ 'animation-delay': '0.1s' }" class="animated fadeInUp">
           <a-tooltip placement="top" title="如果 Admin 不是独立部署，请不要更改此 API" trigger="click">
-            <a-input placeholder="API 地址" v-model="apiForm.apiUrl">
-              <a-icon slot="prefix" type="api" style="color: rgba(0,0,0,.25)" />
+            <a-input v-model="apiForm.apiUrl" placeholder="API 地址">
+              <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="api" />
             </a-input>
           </a-tooltip>
         </a-form-item>
-        <a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.2s' }">
+        <a-form-item :style="{ 'animation-delay': '0.2s' }" class="animated fadeInUp">
           <a-button :block="true" @click="handleRestoreApiUrl">恢复默认</a-button>
         </a-form-item>
-        <a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.3s' }">
-          <a-button type="primary" :block="true" @click="handleModifyApiUrl">保存设置</a-button>
+        <a-form-item :style="{ 'animation-delay': '0.3s' }" class="animated fadeInUp">
+          <a-button :block="true" type="primary" @click="handleModifyApiUrl">保存设置</a-button>
         </a-form-item>
         <a-row>
-          <a @click="handleToggleShowApiForm" class="tip animated fadeInUp" :style="{ 'animation-delay': '0.4s' }">
+          <a :style="{ 'animation-delay': '0.4s' }" class="tip animated fadeInUp" @click="handleToggleShowApiForm">
             <a-icon type="rollback" />
           </a>
         </a-row>
@@ -51,6 +51,7 @@ import adminApi from '@/api/admin'
 import { mapActions, mapGetters, mapMutations } from 'vuex'
 
 import LoginForm from '@/components/Login/LoginForm'
+
 export default {
   components: {
     LoginForm
@@ -68,13 +69,11 @@ export default {
     ...mapGetters({ defaultApiUrl: 'apiUrl' })
   },
   beforeMount() {
-    const _this = this
-    _this.handleVerifyIsInstall()
-    document.addEventListener('keydown', function(e) {
-      if (e.keyCode === 72 && e.altKey && e.shiftKey) {
-        _this.resetPasswordButtonVisible = !_this.resetPasswordButtonVisible
-      }
-    })
+    this.handleVerifyIsInstall()
+    document.addEventListener('keydown', this.onRegisterResetPasswordKeydown)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.onRegisterResetPasswordKeydown)
   },
   methods: {
     ...mapActions(['refreshUserCache', 'refreshOptionsCache']),
@@ -82,6 +81,14 @@ export default {
       setApiUrl: 'SET_API_URL',
       restoreApiUrl: 'RESTORE_API_URL'
     }),
+    onRegisterResetPasswordKeydown(e) {
+      // Windows / Linux: Shift + Alt + h
+      // maxOS: Shift + Command + h
+      if (e.keyCode === 72 && (e.altKey || e.metaKey) && e.shiftKey) {
+        e.preventDefault()
+        this.resetPasswordButtonVisible = !this.resetPasswordButtonVisible
+      }
+    },
     async handleVerifyIsInstall() {
       const response = await adminApi.isInstalled()
       if (!response.data.data) {