up

frontend/src/App.vue

@@ -1,15 +1,26 @@
 <template>
-  <Sign/>
+  <!-- <Sign/> -->
   <!-- <HelloWorld msg="Vite + Vue" /> -->
+  <div>
+    <!-- <router-link to="/">Home</router-link>
+    <router-link to="/login">Login</router-link> -->
+
+    <router-view />
+
+    <footer>My app footer</footer>
+  </div>
 </template>
 
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
 import Sign from './components/Sign.vue'
+import SigninPage from './views/Login.vue';
+import CallbackPage from './views/Callback.vue';
+
 </script>
 
 <style scoped>
-.logo {
+/* .logo {
   height: 6em;
   padding: 1.5em;
   will-change: filter;
@@ -20,5 +31,5 @@ import Sign from './components/Sign.vue'
 }
 .logo.vue:hover {
   filter: drop-shadow(0 0 2em #42b883aa);
-}
+} */
 </style>

frontend/src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
+import router from './router'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')

frontend/src/router/index.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import Login from '../views/Login.vue'
+import Callback from '../views/Callback.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Login',
+    component: Login
+  },
+  {
+    path: '/login/callback',
+    name: 'Callback',
+    component: Callback
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

frontend/src/views/Callback.vue

@@ -0,0 +1,51 @@
+html
+<template>
+  <div>
+    <h1>Callback page</h1>
+    <p v-if="error">{{ error }}</p>
+  </div>
+</template>
+
+<script>
+import { useRoute } from 'vue-router'
+import axios from 'axios'
+
+export default {
+  setup() {
+    const route = useRoute()
+
+    if (route.query.error) {
+      return {
+        error: route.query.error_description
+      }
+    }
+
+    async function getAccessToken() {
+      const response = await axios.post('https://github.com/login/oauth/access_token', null, {
+        params: {
+          client_id: process.env.VUE_APP_GITHUB_CLIENT_ID,
+          client_secret: process.env.VUE_APP_GITHUB_CLIENT_SECRET,
+          code: route.query.code
+        },
+        headers: {
+          accept: 'application/json'
+        }
+      })
+
+      return response.data.access_token
+    }
+
+    async function getUserData(token) {
+      const response = await axios.get('https://api.github.com/user', {
+        headers: {
+          Authorization: `token ${token}`
+        }
+      })
+
+      console.log(response.data)
+    }
+
+    getAccessToken().then(token => getUserData(token))
+  }
+}
+</script>

frontend/src/views/Login.vue

@@ -0,0 +1,29 @@
+html
+<template>
+  <div>
+    <h1>Login with GitHub</h1>
+    <button @click="login">Login with GitHub</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const login = async () => {
+  const client_id = '9f75836d51c1cb447fa5';//process.env.VUE_APP_GITHUB_CLIENT_ID;
+  const redirect_uri = "http://localhost:5173/login/callback";
+  const scope = "read:user";
+  const url = `https://github.com/login/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&scope=${scope}`;
+  console.log(url);
+  window.location.href = url;
+};
+
+// export default {
+//   name: 'Login',
+//   setup() {
+//     return {
+//       login,
+//     };
+//   },
+// };
+</script>