Feat: oauth2 github

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    copy: typeof import('./src/components/icons/Person copy.vue')['default']
     CustomHeaders: typeof import('./src/components/dialogs/customHeaders.vue')['default']
     DarkModeSwitcher: typeof import('./src/components/DarkModeSwitcher.vue')['default']
     Edit: typeof import('./src/components/icons/Edit.vue')['default']
@@ -26,15 +27,18 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElTag: typeof import('element-plus/es')['ElTag']
+    Github: typeof import('./src/components/icons/Github.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']
     Moon: typeof import('./src/components/icons/Moon.vue')['default']
     MoviePush: typeof import('./src/components/MoviePush.vue')['default']
+    Person: typeof import('./src/components/icons/Person.vue')['default']
     Play: typeof import('./src/components/icons/Play.vue')['default']
     Player: typeof import('./src/components/Player.vue')['default']
     RoomList: typeof import('./src/components/RoomList.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     Sun: typeof import('./src/components/icons/Sun.vue')['default']
     Trash: typeof import('./src/components/icons/Trash.vue')['default']
+    UserInfo: typeof import('./src/components/UserInfo.vue')['default']
   }
 }

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.4.1",
+    "@vueuse/router": "^10.5.0",
     "artplayer": "^5.0.9",
     "artplayer-plugin-danmuku": "^5.0.1",
     "axios": "^1.4.0",

src/assets/global.less

@@ -118,6 +118,14 @@ a {
   }
 }
 
+.btn-black {
+  @apply bg-black dark:border-white;
+  &:hover {
+    @apply border-black text-black bg-zinc-100 shadow-lg;
+    box-shadow: 0 0 10px #8a8a8a;
+  }
+}
+
 .el-collapse-item__header,
 .el-collapse-item__wrap {
   background: #aaa0 !important;

src/components/Header.vue

@@ -3,15 +3,12 @@ import { ref, computed } from "vue";
 import { RouterLink } from "vue-router";
 import { roomStore } from "@/stores/room";
 import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
+import UserInfo from "./UserInfo.vue";
 const room = roomStore();
 const mobileMenu = ref(false);
 
 const menuLinks = computed(() => {
   let links = [
-    {
-      name: "注册",
-      to: "/auth/register"
-    },
     {
       name: "登录",
       to: "/auth/login"
@@ -83,6 +80,10 @@ const menuLinks = computed(() => {
       </div>
       <div class="hidden lg:flex lg:flex-1 lg:justify-end">
         <DarkModeSwitcher />
+        <UserInfo />
+        <span v-if="room.login" class="cursor-pointer ml-5">
+          <MoonIcon width="18" height="18" color="#e4e4e7" />
+        </span>
       </div>
     </nav>
 

src/components/UserInfo.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div></div>
+</template>

src/components/icons/Github.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    width?: string;
+    height?: string;
+    color?: string;
+  }>(),
+  {
+    width: "15",
+    height: "15",
+    color: "#ffff",
+  }
+);
+</script>
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    :fill="color"
+    viewBox="0 0 15 15"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.24182 2.32181C3.3919 2.23132 3.5784 2.22601 3.73338 2.30781L12.7334 7.05781C12.8974 7.14436 13 7.31457 13 7.5C13 7.68543 12.8974 7.85564 12.7334 7.94219L3.73338 12.6922C3.5784 12.774 3.3919 12.7687 3.24182 12.6782C3.09175 12.5877 3 12.4252 3 12.25V2.75C3 2.57476 3.09175 2.4123 3.24182 2.32181ZM4 3.57925V11.4207L11.4288 7.5L4 3.57925Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+</template>

src/components/icons/Person.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    width?: string;
+    height?: string;
+    color?: string;
+  }>(),
+  {
+    width: "15",
+    height: "15",
+    color: "#ffff",
+  }
+);
+</script>
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    :fill="color"
+    viewBox="0 0 15 15"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.24182 2.32181C3.3919 2.23132 3.5784 2.22601 3.73338 2.30781L12.7334 7.05781C12.8974 7.14436 13 7.31457 13 7.5C13 7.68543 12.8974 7.85564 12.7334 7.94219L3.73338 12.6922C3.5784 12.774 3.3919 12.7687 3.24182 12.6782C3.09175 12.5877 3 12.4252 3 12.25V2.75C3 2.57476 3.09175 2.4123 3.24182 2.32181ZM4 3.57925V11.4207L11.4288 7.5L4 3.57925Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    ></path>
+  </svg>
+</template>

src/router/index.ts

@@ -13,10 +13,10 @@ const router = createRouter({
       meta: { title: "首页" }
     },
     {
-      path: "/auth/register",
-      name: "register",
-      component: () => import("../views/auth/Register.vue"),
-      meta: { title: "注册" }
+      path: "/oauth/:type/callback",
+      name: "callback",
+      component: () => import("../views/oAuth2/callback.vue"),
+      meta: { title: "Oauth" }
     },
     {
       path: "/auth/login",

src/services/apis/auth.ts

@@ -31,3 +31,23 @@ export const LoginApi = useDefineApi<
   url: "/api/user/login",
   method: "POST"
 });
+
+// 使用 Github 账号登录
+export const oAuth2WithGithub = useDefineApi<any, { url: string }>({
+  url: "/oauth2/login/github",
+  method: "POST"
+});
+
+// github callback
+export const getGithubUseInfo = useDefineApi<
+  {
+    data: {
+      code: string;
+      state: string;
+    };
+  },
+  { token: string }
+>({
+  url: "/oauth2/callback/github",
+  method: "POST"
+});

src/views/auth/Login.vue

@@ -3,52 +3,21 @@ import { ref } from "vue";
 import { ElNotification, ElMessage } from "element-plus";
 import { roomStore } from "@/stores/room";
 import router from "@/router/index";
-import { LoginApi } from "@/services/apis/auth";
+import { oAuth2WithGithub } from "@/services/apis/auth";
 import { strLengthLimit } from "@/utils/utils";
 const room = roomStore();
 
-const { state: userToken, execute: reqLoginApi } = LoginApi();
-
 const formData = ref({
   username: localStorage.getItem("uname") || "",
   password: localStorage.getItem("password") || ""
 });
 const savePwd = ref(false);
 
-const register = async () => {
-  if (formData.value?.username === "" || formData.value?.password === "") {
-    ElNotification({
-      title: "错误",
-      message: "请填写表单完整",
-      type: "error"
-    });
-    return;
-  }
+const useGithub = async () => {
+  const { state, execute } = oAuth2WithGithub();
   try {
-    for (const key in formData.value) {
-      strLengthLimit(key, 32);
-    }
-    await reqLoginApi({
-      data: formData.value
-    });
-    if (!userToken.value)
-      return ElNotification({
-        title: "错误",
-        message: "服务器并未返回token",
-        type: "error"
-      });
-    localStorage.setItem("userToken", userToken.value?.token);
-    ElNotification({
-      title: "登录成功",
-      type: "success"
-    });
-    room.login = true;
-
-    localStorage.setItem("uname", formData.value.username);
-    savePwd.value && localStorage.setItem("password", formData.value.password);
-    localStorage.setItem("login", "true");
-
-    // router.replace("/cinema");
+    await execute();
+    if (state.value) window.location.href = state.value.url;
   } catch (err: any) {
     console.error(err);
     ElNotification({
@@ -62,24 +31,10 @@ const register = async () => {
 
 <template>
   <div class="room">
-    <form @submit.prevent="" class="sm:w-96 w-full">
-      <input
-        class="l-input"
-        type="text"
-        v-model="formData.username"
-        placeholder="用户名"
-        required
-      />
-      <br />
-      <input class="l-input" type="text" v-model="formData.password" placeholder="密码" required />
-      <br />
-      <div class="text-sm"><b>注意：</b>所有输入框最大只可输入32个字符</div>
-      <div>
-        <input class="w-auto" type="checkbox" v-model="savePwd" />
-        <label title="明文保存到本机哦~">&nbsp;记住密码</label>
-      </div>
-      <button class="btn m-[10px]" @click="register()">登录</button>
-    </form>
+    <div class="login-box w-full">
+      <h1 class="text-[28px] font-bold">请选择登陆方式</h1>
+      <button class="btn btn-black m-[10px]" @click="useGithub()">使用 Github 账号登录</button>
+    </div>
   </div>
 </template>
 
@@ -88,22 +43,12 @@ const register = async () => {
   text-align: center;
   margin-top: 5vmax;
 
-  form {
+  .login-box {
     // width: 443px;
     margin: auto;
 
-    input {
-      width: 70%;
-
-      &:hover {
-        padding: 10px 15px;
-        width: 74%;
-      }
-    }
-
     .btn {
       padding: 10px 15px;
-      width: 70%;
 
       &:hover {
         padding: 12px 15px;

src/views/auth/Register.vue

@@ -48,7 +48,7 @@ const register = async () => {
     savePwd.value && localStorage.setItem("password", formData.value.password);
     localStorage.setItem("login", "true");
 
-    // router.replace("/cinema");
+    router.replace("/");
   } catch (err: any) {
     console.error(err);
     ElNotification({