Merge pull request #2 from cha0sCat/feat-reg

fix ui problems
kikoeru-project · Mar 6, 2021 · 1d84fa0 · 1d84fa0
2 parents 35eb121 + 2378771
commit 1d84fa0
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 46 deletions.
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -11,7 +11,7 @@
             Kikoeru
           </router-link>
         </q-toolbar-title>
-        
+
         <q-input dark dense rounded standout v-model="keyword" debounce="500" input-class="text-right" class="q-mr-sm">
           <template v-slot:append>
             <q-icon v-if="keyword === ''" name="search" />
@@ -20,7 +20,7 @@
         </q-input>
 
       </q-toolbar>
-      
+
       <AudioPlayer />
     </q-header>
 
@@ -39,7 +39,7 @@
     >
       <q-scroll-area class="fit">
         <q-list>
-          <q-item 
+          <q-item
             clickable
             v-ripple
             exact
@@ -60,7 +60,7 @@
             </q-item-section>
           </q-item>
 
-          <q-item 
+          <q-item
             clickable
             v-ripple
             exact
@@ -78,7 +78,7 @@
             </q-item-section>
           </q-item>
 
-          <q-item 
+          <q-item
             clickable
             v-ripple
             exact
@@ -98,7 +98,27 @@
         </q-list>
 
         <q-list>
-          <q-item 
+          <q-item
+            clickable
+            v-ripple
+            exact
+            to="/admin"
+            active-class="text-deep-purple text-weight-medium"
+            v-if="this.$store.state.User.group === 'administrator'"
+            @click="miniState = true"
+          >
+            <q-item-section avatar>
+              <q-icon name="tune" />
+            </q-item-section>
+
+            <q-item-section>
+              <q-item-label class="text-subtitle1">
+                设定
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-item
             clickable
             v-ripple
             exact
@@ -114,6 +134,7 @@
               <q-item-label class="text-subtitle1">
                 登出
               </q-item-label>
+              <q-item-label caption lines="2">{{ userName }}</q-item-label>
             </q-item-section>
           </q-item>
         </q-list>
@@ -158,7 +179,7 @@ import AudioPlayer from 'components/AudioPlayer'
 import LyricsBar from 'components/LyricsBar'
 import SleepMode from 'components/SleepMode'
 import NotifyMixin from '../mixins/Notification.js'
-import { mapMutations } from 'vuex'
+import { mapMutations, mapState } from 'vuex'
 
 export default {
   name: 'MainLayout',
@@ -206,11 +227,6 @@ export default {
           icon: 'mic',
           path: '/vas'
         },
-        {
-          title: '设定',
-          icon: 'tune',
-          path: '/admin'
-        },
       ],
       sharedConfig: {}
     }
@@ -240,6 +256,9 @@ export default {
     authEnabled: function () {
       return this.$store.state.User.auth;
     },
+    ...mapState('User', {
+      userName: 'name'
+    })
   },
 
   methods: {
@@ -252,14 +271,18 @@ export default {
         .then((res) => {
           this.$store.commit('User/INIT', res.data.user)
           this.$store.commit('User/SET_AUTH', res.data.auth)
+          this.$store.commit('User/SET_REG', res.data.reg)
         })
         .catch((error) => {
           if (error.response) {
             // 请求已发出，但服务器响应的状态码不在 2xx 范围内
             if (error.response.status === 401) {
-              this.showWarnNotif(error.response.data.error)
+              // this.showWarnNotif(error.response.data.error)
               // 验证失败，跳转到登录页面
-              this.$router.push('/login')
+              const path = this.$router.currentRoute.path
+              if (path !=='/login') {
+                this.$router.push('/login');
+              }
             } else {
               this.showErrNotif(error.response.data.error || `${error.response.status} ${error.response.statusText}`)
             }
@@ -318,9 +341,12 @@ export default {
           if (error.response) {
             // 请求已发出，但服务器响应的状态码不在 2xx 范围内
             if (error.response.status === 401) {
-              this.showWarnNotif(error.response.data.error)
+              // this.showWarnNotif(error.response.data.error)
               // 验证失败，跳转到登录页面
-              this.$router.push('/login')
+              const path = this.$router.currentRoute.path
+              if (path !=='/login') {
+                this.$router.push('/login');
+              }
             } else {
               this.showErrNotif(error.response.data.error || `${error.response.status} ${error.response.statusText}`)
             }

diff --git a/src/pages/Login.vue b/src/pages/Login.vue
@@ -1,51 +1,101 @@
 <template>
   <q-form @submit="onSubmit" style="width: 260px;" class="absolute-center	q-gutter-md">
     <q-input filled v-model="name" label="用户名" class="fit"
-      lazy-rules
-      :rules="[ val => val.length >= 5 || '密码长度至少为 5' ]"
+             lazy-rules
+             :rules="[ val => val && val.length >= 5 || '用户名长度至少为 5' ]"
     />
-
-    <q-input filled type="password" v-model="password" label="密码"  class="fit"
-      lazy-rules
-      :rules="[ val => val.length >= 5 || '密码长度至少为 5' ]"
+
+    <q-input filled type="password" v-model="password" label="密码" class="fit"
+             lazy-rules
+             :rules="[ val => val && val.length >= 5 || '密码长度至少为 5' ]"
+             clearable
+    />
+
+    <!-- 仅在注册界面出现 -->
+    <q-input filled type="password" v-model="passwordConfirm" label="请再次输入密码" class="fit"
+             lazy-rules
+             bottom-slots
+             :rules="[ val => val && val === password || '两次密码必须一致' ]"
+             clearable
+             v-if="showRegisterForm"
     />
 
-    <q-btn label="登录" type="submit" color="primary" class="fit" />
+    <!-- 入口界面按钮 -->
+    <q-btn label="注册" color="secondary" class="fit" @click="navigateToRegister" v-if="this.$store.state.User.reg && !showRegisterForm"/>
+    <q-btn label="登录" type="submit" color="primary" class="fit" v-if="!showRegisterForm"/>
+
+    <!-- 注册界面按钮 -->
+    <q-btn label="去看看！" type="submit" color="secondary" class="fit" v-if="showRegisterForm"/>
+    <q-btn label="返回" color="primary" class="fit" @click="navigateBack" v-if="showRegisterForm"/>
   </q-form>
 </template>
-   
+
 <script>
-import { setAxiosHeaders } from 'boot/axios'
+import {setAxiosHeaders} from 'boot/axios'
 import NotifyMixin from '../mixins/Notification.js'
 
 export default {
   mixins: [NotifyMixin],
 
-  data () {
+  data() {
     return {
       name: '',
       password: '',
+      passwordConfirm: '',
+      // false: login form
+      showRegisterForm: false
     }
   },
-
+  mounted() {
+    this.checkRegEnable();
+  },
   methods: {
-    onSubmit () {
-      this.$axios.post('/api/auth/me', {
+    navigateToRegister() {
+      this.showRegisterForm = true;
+    },
+    navigateBack() {
+      this.showRegisterForm = false;
+    },
+    onSubmit(){
+      if (this.showRegisterForm) {
+        this.reg();
+      } else {
+        this.login();
+      }
+    },
+    checkRegEnable () {
+      this.$axios.get('/api/auth/reg')
+        .then((res) => {
+          this.$store.commit('User/SET_REG', res.data.reg)
+        });
+    },
+    login() {
+      let response = this.$axios.post('/api/auth/me', {
         name: this.name,
         password: this.password
       })
-        .then((res) => {
-          try {
-            this.$q.localStorage.set('jwt-token', res.data.token)
-            setAxiosHeaders(res.data.token)
-            this.showSuccNotif('登录成功.')
-            this.$router.push('/')
-          } catch (error) {
-            // 由于Web Storage API错误，
-            // 数据未成功保存
-            this.showErrNotif(error.message)
-          }
-        })
+      this.handleResponse(response, "login")
+    },
+    reg() {
+      let response = this.$axios.post('/api/auth/reg', {
+        name: this.name,
+        password: this.password
+      })
+      this.handleResponse(response, "reg")
+    },
+    handleResponse(response, type) {
+      response.then((res) => {
+        try {
+          this.$q.localStorage.set('jwt-token', res.data.token)
+          setAxiosHeaders(res.data.token)
+          this.showSuccNotif(type === "reg" ? "注册成功." : "登录成功.")
+          this.$router.push('/')
+        } catch (error) {
+          // 由于Web Storage API错误，
+          // 数据未成功保存
+          this.showErrNotif(error.message)
+        }
+      })
         .catch((error) => {
           if (error.response) {
             // 请求已发出，但服务器响应的状态码不在 2xx 范围内
@@ -58,7 +108,7 @@ export default {
             this.showErrNotif(error.message || error)
           }
         })
-    }, 
+    }
   }
 }
-</script>
+</script>
diff --git a/src/store/module-User/mutations.js b/src/store/module-User/mutations.js
@@ -3,10 +3,14 @@ const mutations = {
     state.name = user.name
     state.group = user.group
   },
-  
+
   SET_AUTH (state, flag) {
     state.auth = flag
+  },
+
+  SET_REG (state, flag) {
+    state.reg = flag;
   }
 }
 
-export default mutations
+export default mutations
diff --git a/src/store/module-User/state.js b/src/store/module-User/state.js
@@ -2,6 +2,7 @@ export default function () {
   return {
     auth: false, // 是否启用用户验证
     name: '',
-    group: ''
+    group: '',
+    reg: false // 是否开启注册功能
   }
 }