Add login modal experience (#16)

change/@zhishuyun-hub-8ef393bb-8bf8-4e7c-b165-250df21c65ac.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add auth modal",
+  "packageName": "@zhishuyun/hub",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <el-config-provider :locale="locale">
     <router-view />
+    <auth-panel />
   </el-config-provider>
 </template>
 
@@ -9,10 +10,12 @@ import { defineComponent } from 'vue';
 import { ElConfigProvider } from 'element-plus';
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
 import { getDomain, getPath, setCookie } from './utils';
+import AuthPanel from './components/common/AuthPanel.vue';
 
 export default defineComponent({
   components: {
-    ElConfigProvider
+    ElConfigProvider,
+    AuthPanel
   },
   data() {
     return {

src/components/chat/InputBox.vue

@@ -184,7 +184,7 @@ export default defineComponent({
   }
   .btn {
     display: block;
-    z-index: 10000;
+    z-index: 100;
     cursor: pointer;
     position: absolute;
     top: 7px;

src/components/common/AuthPanel.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-dialog
+    :model-value="!authenticated"
+    modal-class="dialog"
+    width="400px"
+    :show-close="false"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+  >
+    <iframe width="360" height="560" :src="iframeUrl" frameborder="0" />
+  </el-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElDialog } from 'element-plus';
+import { getBaseUrlAuth } from '@/utils';
+
+export default defineComponent({
+  name: 'AuthPanel',
+  components: {
+    ElDialog
+  },
+  data() {
+    return {
+      iframeUrl: `${getBaseUrlAuth()}/auth/login`
+    };
+  },
+  computed: {
+    authenticated() {
+      return !!this.$store.state.token.access;
+    }
+  },
+  mounted() {
+    window.addEventListener('message', async (event: MessageEvent) => {
+      if (event.origin !== getBaseUrlAuth()) {
+        return;
+      }
+      if (event.data.name === 'login') {
+        const data = event.data.data;
+        const token = {
+          access: data.access_token,
+          refresh: data.refresh_token,
+          expiration: data.expires_in
+        };
+        await this.$store.dispatch('setToken', token);
+        await this.$store.dispatch('getUser');
+        window.location.reload();
+      }
+    });
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.dialog {
+  width: 400px;
+  height: 600px;
+}
+</style>

src/components/common/Navigator.vue

@@ -27,7 +27,7 @@
       <div class="link">
         <help-entry />
       </div>
-      <div class="link">
+      <div v-if="authenticated" class="link">
         <el-tooltip effect="dark" :content="$t('common.nav.logOut')" placement="right">
           <el-button class="button" @click="onLogout">
             <font-awesome-icon icon="fa-solid fa-arrow-right-from-bracket" />
@@ -43,7 +43,6 @@ import { defineComponent } from 'vue';
 import { ElButton, ElTooltip } from 'element-plus';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import {
-  ROUTE_AUTH_LOGIN,
   ROUTE_CHAT_CONVERSATION,
   ROUTE_CHAT_CONVERSATION_NEW,
   ROUTE_CONSOLE_ROOT,
@@ -84,10 +83,14 @@ export default defineComponent({
       ]
     };
   },
+  computed: {
+    authenticated() {
+      return !!this.$store.state.token.access;
+    }
+  },
   methods: {
     onLogout() {
       this.$store.dispatch('resetToken');
-      this.$router.push({ name: ROUTE_AUTH_LOGIN });
     },
     onConsole() {
       this.$router.push({ name: ROUTE_CONSOLE_ROOT });

src/components/common/SuccessInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-alert v-if="show" :title="content" type="success" center :closable="false" show-icon class="alert-succcess-info">
+  <el-alert v-if="show" :title="content" type="success" center :closable="false" show-icon class="alert-success-info">
   </el-alert>
 </template>
 
@@ -36,12 +36,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.alert-succcess-info {
+.alert-success-info {
   position: fixed;
   top: 110px;
   left: 50%;
   transform: translate(-50%, 0);
-  z-index: 1000;
+  z-index: 100;
   width: 10%;
 }
 </style>

src/i18n/zh/distribution/message.ts

@@ -1,6 +1,6 @@
 export default {
   deltaPriceForNextLevel: '距离下一级别还差',
-  howToWithdrawal: '请添加客服处理提现，提现需扣除 5% 的所得税，提供发票可进行抵扣',
+  howToWithdrawal: '请添加客服处理提现，提现需扣除 6% 的所得税，提供发票可进行抵扣',
   technicalDetail: '技术细节',
   distributionQrDescription: '分销二维码（内容同链接）',
   distributionDescription:

src/layouts/Console.vue

@@ -58,6 +58,9 @@ export default defineComponent({
     display: flex;
     flex-direction: row;
   }
+  .menu {
+    display: none;
+  }
 }
 
 @media screen and (max-width: 767px) {
@@ -76,7 +79,7 @@ export default defineComponent({
     position: fixed;
     right: 20px;
     top: 20px;
-    z-index: 1000;
+    z-index: 100;
   }
 }
 </style>

src/operators/instance.ts

@@ -33,12 +33,12 @@ httpClient.interceptors.response.use(
   (error) => {
     if (error?.response?.status === 401) {
       store.dispatch('resetToken');
-      router.push({
-        name: ROUTE_AUTH_LOGIN,
-        query: {
-          redirect: router?.currentRoute?.value?.path
-        }
-      });
+      // router.push({
+      //   name: ROUTE_AUTH_LOGIN,
+      //   query: {
+      //     redirect: router?.currentRoute?.value?.path
+      //   }
+      // });
     }
     return Promise.reject(error);
   }

src/pages/auth/Callback.vue

@@ -30,7 +30,7 @@ export default defineComponent({
       this.accessToken = data.access;
       this.refreshToken = data.refresh;
     } else {
-      this.$router.push({ name: ROUTE_AUTH_LOGIN });
+      this.$store.dispatch('resetToken');
       return;
     }
     // if token acquired, get user info
@@ -41,7 +41,7 @@ export default defineComponent({
         await this.$router.push(this.redirect);
       }
     } else {
-      await this.$router.push({ name: ROUTE_AUTH_LOGIN });
+      this.$store.dispatch('resetToken');
     }
   }
 });

src/pages/console/distribution/Index.vue

@@ -250,8 +250,7 @@ export default defineComponent({
     },
     distributionLink() {
       const origin = window.location.origin;
-      const newOrigin = origin.replace('hub.', 'auth.');
-      return `${newOrigin}/auth/login?inviter_id=${this.$store.getters.user.id}&redirect=${origin}`;
+      return `${origin}?inviter_id=${this.$store.getters.user.id}`;
     }
   },
   watch: {