merge: auth pages

codescalersinternships · Aug 29, 2024 · ee4d8e2 · ee4d8e2
2 parents 3a6b28c + 0c506eb
commit ee4d8e2
Show file tree

Hide file tree

Showing 17 changed files with 718 additions and 6 deletions.
diff --git a/client/index.html b/client/index.html
@@ -3,7 +3,8 @@
 
 <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/testtrackerfavicon.png" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="src/style.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Test Tracker</title>
     <link rel="stylesheet" href="src/style.css">

diff --git a/client/package.json b/client/package.json
@@ -11,6 +11,7 @@
     "@mdi/font": "7.4.47",
     "axios": "^1.7.5",
     "core-js": "^3.37.1",
+    "md5": "^2.3.0",
     "roboto-fontface": "*",
     "vue": "^3.4.31",
     "vuetify": "^3.6.11",
@@ -20,6 +21,7 @@
   },
   "devDependencies": {
     "@babel/types": "^7.24.7",
+    "@types/md5": "^2.3.5",
     "@types/node": "^20.14.10",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-typescript": "^13.0.0",

diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml
diff --git a/client/src/api/auth.ts b/client/src/api/auth.ts
@@ -0,0 +1,37 @@
+import { axios } from './axios'
+import md5 from 'md5'
+import { logInInfo, signUpInfo } from '../types/types'
+
+async function signUp (newUser:signUpInfo) {
+  try {
+    await axios.post('/auth/signup/', newUser)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
+async function signUpInvitation (password:string) {
+  try {
+    await axios.put('/members/set_password/', password)
+  } catch (error) {
+    console.error(error)
+    throw error
+  }
+}
+
+async function logInUser (userInfo: logInInfo) {
+  try {
+    const response = await axios.post('/auth/login/', userInfo)
+    const token = response.data.access_token
+    const refreshtoken = response.data.refresh_token
+    localStorage.setItem('TEST_TRACKER_ACCESS_TOKEN', token)
+    localStorage.setItem('TTPHASH', md5(userInfo.password))
+    localStorage.setItem('TEST_TRACKER_REFRESH_TOKEN', refreshtoken)
+  } catch (error) {
+    localStorage.removeItem('TEST_TRACKER_ACCESS_TOKEN')
+    throw error
+  }
+}
+
+export default { logInUser, signUp, signUpInvitation }
diff --git a/client/src/api/axios.ts b/client/src/api/axios.ts
@@ -4,8 +4,8 @@ export const AuthClient: AxiosInstance = axios.create({
   baseURL: window.env.SERVER_DOMAIN_NAME_API,
   timeout: 1000,
   headers: {
+    Authorization: accessToken ? `Bearer ${accessToken}` : '',
     'Content-Type': 'application/json',
-    Authorization: localStorage.getItem('token'),
   },
 })
 

diff --git a/client/src/assets/authPagesBackGround.png b/client/src/assets/authPagesBackGround.png
diff --git a/client/src/assets/logo.png b/client/src/assets/logo.png
diff --git a/client/src/assets/tflogo.png b/client/src/assets/tflogo.png
diff --git a/client/src/components.d.ts b/client/src/components.d.ts
@@ -7,9 +7,8 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    AppFooter: typeof import('./components/AppFooter.vue')['default']
+    LoginHintComponent: typeof import('./components/LoginHintComponent.vue')['default']
     CustomNotification: typeof import('./components/notifier/CustomNotification.vue')['default']
-    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
     MemberForm: typeof import('./components/members/MemberForm.vue')['default']
     NavigationBar: typeof import('./components/NavigationBar.vue')['default']
     ProfileInformationForm: typeof import('./components/settings/ProfileInformationForm.vue')['default']

diff --git a/client/src/components/LoginHintComponent.vue b/client/src/components/LoginHintComponent.vue
@@ -0,0 +1,31 @@
+<template>
+  <v-row>
+    <v-col class="d-flex justify-center">
+      <p class="text-caption text-decoration-none text-grey-darken-2">
+        Already have an account?
+        <router-link
+          class="text-caption text-decoration-none text-blue"
+          to="/login"
+        >
+          Sign in
+        </router-link>
+      </p>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+  import { useRouter } from 'vue-router'
+
+  export default {
+    setup () {
+      const router = useRouter()
+      function handleLogIn () {
+        router.push(`/login`)
+      }
+      return {
+        handleLogIn,
+      }
+    },
+  }
+</script>