feat(preview): 登录新增校验 start 功能

.env.prod

@@ -2,3 +2,7 @@ VITE_BASE_URL=/
 
 # backend service base url, prod environment
 VITE_SERVICE_BASE_URL=/snail-job
+
+VITE_OTHER_SERVICE_BASE_URL= `{
+  "api": "/api"
+}`

.env.test

@@ -1,4 +1,8 @@
 VITE_BASE_URL=/
 
 # backend service base url, test environment
-VITE_SERVICE_BASE_URL=http://preview.easyretry.com/snail-job
+VITE_SERVICE_BASE_URL=https://preview.snailjob.opensnail.com/snail-job
+
+VITE_OTHER_SERVICE_BASE_URL= `{
+  "api": "http://localhost:3000/api"
+}`

src/utils/service.ts

@@ -69,5 +69,5 @@ function createProxyPattern(key?: App.Service.OtherBaseURLKey) {
     return '/snail-job';
   }
 
-  return `/proxy-${key}`;
+  return `/${key}`;
 }

src/views/_builtin/login/modules/pwd-login.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
 import Vcode from 'vue3-puzzle-vcode';
+import { useRoute } from 'vue-router';
 import { md5 } from '@/utils/common';
 import { $t } from '@/locales';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
@@ -55,6 +56,102 @@ const onClose = () => {
 const onSuccess = () => {
   handleSubmit();
 };
+
+const route = useRoute();
+const starred = ref<boolean>(false);
+
+async function userStarred() {
+  const accessToken = localStorage.getItem('gitee_access_token');
+  if (!accessToken) {
+    authorize();
+    return;
+  }
+  const response = await fetch(`https://gitee.com/api/v5/user/starred/aizuda/snail-job?access_token=${accessToken}`);
+
+  if (response.status === 401) {
+    refreshTokenFn();
+  }
+
+  starred.value = response.status === 204;
+}
+
+function authorize() {
+  const clientId = 'aae2edfddf290269fe0a756bc1c1ec1614e41dfabdb71c19322293e2b5179377';
+  const redirectUri = 'https://preview.snailjob.opensnail.com/login';
+  // const redirectUri = 'http://localhost:9527/login';
+  location.href = `https://gitee.com/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=user_info`;
+}
+
+async function refreshTokenFn() {
+  const refreshToken = localStorage.getItem('gitee_refresh_token');
+  if (!refreshToken) {
+    authorize();
+    return;
+  }
+  const response = await fetch('https://gitee.com/oauth/token', {
+    method: 'POST',
+    headers: new Headers({
+      'Content-Type': 'application/json'
+    }),
+    body: JSON.stringify({
+      grant_type: 'refresh_token',
+      refresh_token: refreshToken
+    })
+  });
+
+  const res = await response.json();
+
+  localStorage.setItem('gitee_access_token', res.data.access_token);
+  localStorage.setItem('gitee_refresh_token', res.data.refresh_token);
+}
+
+async function oauth2() {
+  const code = route.query.code;
+  if (!code) {
+    return;
+  }
+  const response = await fetch('/api/oauth2/login', {
+    method: 'POST',
+    headers: new Headers({
+      'Content-Type': 'application/json'
+    }),
+    body: JSON.stringify({ code })
+  });
+
+  const res = await response.json();
+
+  if (res.code !== 200) {
+    authorize();
+    return;
+  }
+
+  const accessToken = res.data.access_token;
+  const refreshToken = res.data.refresh_token;
+  localStorage.setItem('gitee_access_token', accessToken);
+  localStorage.setItem('gitee_refresh_token', refreshToken);
+}
+
+function handleVisibilitychange() {
+  const state = document.visibilityState;
+  if (state === 'visible') {
+    userStarred();
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('visibilitychange', handleVisibilitychange);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('visibilitychange', handleVisibilitychange);
+});
+
+async function init() {
+  await oauth2();
+  await userStarred();
+}
+
+init();
 </script>
 
 <template>
@@ -71,9 +168,25 @@ const onSuccess = () => {
       />
     </NFormItem>
     <NSpace vertical :size="24">
-      <NPopover :show="codeShow" row style="padding: 0">
+      <div v-if="!starred" class="flex-col-center justify-between">
+        <div>
+          💖 如果您喜欢 Snail Job，请给它一个
+          <NA href="https://gitee.com/aizuda/snail-job" target="_blank" rel="noopener noreferrer">&ensp;Star&ensp;</NA>
+          ，
+        </div>
+        <div>您的支持将是我们前行的动力。 👨‍💻👨‍💻👨‍💻</div>
+      </div>
+      <NPopover :show="codeShow" row>
         <template #trigger>
-          <NButton type="primary" size="large" round block :loading="authStore.loginLoading" @click="validateCode">
+          <NButton
+            :disabled="!starred"
+            type="primary"
+            size="large"
+            round
+            block
+            :loading="authStore.loginLoading"
+            @click="validateCode"
+          >
             {{ $t('page.login.common.login') }}
           </NButton>
         </template>
@@ -92,4 +205,8 @@ const onSuccess = () => {
   </NForm>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.n-popover) {
+  padding: 0 !important;
+}
+</style>