Feat/GitHub auth (#6)

* ✨ (sign in) create sign in to github button

* ✨ (github login) login via github button

* 💄 (homepage)

* ➕ (date fns)

* ✨ (github login) refresh token when token expired

src/components/Authorize.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="authorize">
+    <div v-if="hasError">An error occured when sign in...</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { GithubToken } from '@/modules/user/interfaces/GithubToken'
+import { GithubTokenError } from '@/modules/user/interfaces/GithubTokenError'
+import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
+import { defineComponent, onBeforeMount, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const AUTHENTICATION_SERVER = 'https://litenote.li212.fr'
+
+export default defineComponent({
+  name: 'Authorize',
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+    const { saveCredentials } = useGitHubLogin()
+
+    const code = route.query.code
+    let hasError = ref(false)
+
+    onBeforeMount(async () => {
+      if (code) {
+        const authenticationServerURL = new URL(AUTHENTICATION_SERVER)
+        authenticationServerURL.searchParams.set('code', code.toString())
+
+        const response = await fetch(authenticationServerURL.toString())
+        const body = (await response.json()) as GithubToken | GithubTokenError
+
+        if ('error' in body) {
+          hasError.value = true
+        } else {
+          body.access_token
+          saveCredentials(body)
+        }
+
+        router.push({ name: 'Home' })
+      }
+    })
+
+    return {
+      code,
+      hasError
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.authorize {
+}
+</style>

src/components/SignInGithub.vue

@@ -0,0 +1,41 @@
+<template>
+  <a :href="url" class="sign-in-github button is-primary">
+    <span>
+      Sign in with
+      <img src="@/assets/icons/github.svg" alt="GitHub" />
+    </span>
+  </a>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+const GITHUB_URL = 'https://github.com/login/oauth/authorize'
+
+const CLIENT_ID = 'Iv1.12dc43d013ce3623'
+
+const SCOPE = 'repo'
+
+export default defineComponent({
+  name: 'SignInGitHub',
+  setup() {
+    const url = new URL(GITHUB_URL)
+    url.searchParams.set('client_id', CLIENT_ID)
+    url.searchParams.set('scope', SCOPE)
+
+    return {
+      url
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.sign-in-github {
+  span {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.5rem;
+  }
+}
+</style>

src/components/WelcomeWorld.vue

@@ -3,14 +3,20 @@
     <div class="columns is-vcentered">
       <div class="column get-started">
         <h3 class="title is-3">Lite Note</h3>
-        <router-link
-          :to="{
-            name: 'Home',
-            params: { user: 'lite-note', repo: 'getting-started' }
-          }"
-          class="button is-primary"
-          >Get started</router-link
-        >
+        <div class="buttons is-centered">
+          <router-link
+            :to="{
+              name: 'Home',
+              params: { user: 'lite-note', repo: 'getting-started' }
+            }"
+            class="button is-primary"
+            >Get started</router-link
+          >
+          <router-link class="button" :to="{ name: 'About' }"
+            >about</router-link
+          >
+        </div>
+        <sign-in-github class="github-login" />
       </div>
       <div class="column">
         <p>
@@ -90,8 +96,6 @@
           rel="noopener noreferrer"
           >Julien</a
         >
-        |
-        <router-link :to="{ name: 'About' }">about</router-link>
       </p>
     </footer>
   </div>
@@ -102,8 +106,10 @@ import { defineComponent } from 'vue'
 import { useForm } from '@/hooks/useForm.hook'
 import { useGitHubLogin } from '@/hooks/useGitHubLogin.hook'
 import { useFavoriteRepos } from '@/modules/repo/hooks/useFavoriteRepos.hook'
+import SignInGithub from '@/components/SignInGithub.vue'
 
 export default defineComponent({
+  components: { SignInGithub },
   name: 'WelcomeWord',
   setup() {
     const { isLogged, username } = useGitHubLogin()
@@ -119,7 +125,9 @@ export default defineComponent({
   padding: 1rem;
   margin: auto;
   display: flex;
+  flex: 1;
   flex-direction: column;
+  justify-content: space-between;
 
   .get-started {
     margin: center;
@@ -130,6 +138,10 @@ export default defineComponent({
   h4 {
     text-align: center;
   }
+
+  .github-login {
+    margin-top: 1rem;
+  }
 }
 
 footer {