SyntaxSquad/DADProject
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 3 Releases Wiki Activity

Merge pull request 'Implement login page with email/password authentication' (#69) from feature/login-page into develop

Browse Source 
Reviewed-on: https://gitea.fernandovideira.com/SyntaxSquad/DADProject/pulls/69
Reviewed-by: FernandoJVideira <[email protected]>
This commit was merged in pull request #69.
This commit is contained in:
FernandoJVideira
2025-12-22 17:08:37 +00:00
parent 8a6e0d0255 8e179200a5
commit 289e8df604
10 changed files with 68 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3
View File
@@ -99,3 +99,6 @@ Desktop.ini
# If you have any local secrets or files not to track, add them here: # If you have any local secrets or files not to track, add them here:
# /path/to/some/file # /path/to/some/file
package-lock.json
.vscode
.vscode/settings.json
Vendored
-3
View File
@@ -1,3 +0,0 @@
{
"postman.settings.dotenv-detection-notification-visibility": false
}
api/sample-requests.http
+9
View File
@@ -0,0 +1,9 @@
### Get All Students
POST http://localhost:8000/api/login
content-Type: application/json
Accept: application/json
{
"email": "[email protected]",
"password": "123"
}
deployment/kubernetes-vue.yml
+1 -1
View File
@@ -17,7 +17,7 @@ spec:
priorityClassName: low-priority priorityClassName: low-priority
containers: containers:
- name: web - name: web
image: registry-172.22.21.115.sslip.io/dad-group-x/web:v1.0.0 image: registry-172.22.21.115.sslip.io/dad-group-46/web:v1.0.1
resources: resources:
requests: requests:
memory: "64Mi" memory: "64Mi"
frontend/index.html
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/src/index.css" /> <link rel="stylesheet" href="/src/index.css" />
<title>Vite App</title> <title>Bisca</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
frontend/src/main.js
+1 -1
View File
@@ -13,7 +13,7 @@ console.log('[main.js] ws connection', wsConnection)
const app = createApp(App) const app = createApp(App)
app.provide('socket', io(wsConnection)) //app.provide('socket', io(wsConnection))
app.provide('serverBaseURL', `http://${apiDomain}`) app.provide('serverBaseURL', `http://${apiDomain}`)
app.provide('apiBaseURL', `http://${apiDomain}/api`) app.provide('apiBaseURL', `http://${apiDomain}/api`)
frontend/src/pages/login/LoginPage.vue
+8 -9
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8"> <div class="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
<div class="w-full max-w-md space-y-8"> <div class="w-full max-w-md space-y-8">
<div> <div>
<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900"> <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
@@ -64,16 +64,15 @@ const formData = ref({
const handleSubmit = async () => { const handleSubmit = async () => {
const promise = authStore.login(formData.value)
toast.promise(authStore.login(formData.value), { toast.promise(promise, {
loading: 'Calling API', loading: 'Calling API',
success: (data) => { success: (user) => {
return `Login Sucessfull - ${data?.name}` router.push('/')
return `Login Successful - ${user.name}`
}, },
error: (data) => `[API] Error saving game - ${data?.response?.data?.message}`, error: (error) =>
error.response?.data?.message
}) })
router.push('/')
} }
</script> </script>
frontend/src/stores/api.js
+9 -5
View File
@@ -16,12 +16,16 @@ export const useAPIStore = defineStore('api', () => {
}, },
}) })
// AUTH
const postLogin = async (credentials) => { const postLogin = async (credentials) => {
const response = await axios.post(`${API_BASE_URL}/login`, credentials) const response = await axios.post(`${API_BASE_URL}/login`, credentials)
token.value = response.data.token
axios.defaults.headers.common['Authorization'] = `Bearer ${token.value}` if (!response.data.token) throw response
}
token.value = response.data.token
axios.defaults.headers.common['Authorization'] = `Bearer ${token.value}`
return response
}
const postLogout = async () => { const postLogout = async () => {
await axios.post(`${API_BASE_URL}/logout`) await axios.post(`${API_BASE_URL}/logout`)
token.value = undefined token.value = undefined
frontend/src/stores/auth.js
+25 -5
View File
@@ -6,31 +6,51 @@ export const useAuthStore = defineStore('auth', () => {
const apiStore = useAPIStore() const apiStore = useAPIStore()
const currentUser = ref(undefined) const currentUser = ref(undefined)
const token = ref(localStorage.getItem('token') || null)
const isLoggedIn = computed(() => { const isLoggedIn = computed(() => {
return currentUser.value !== undefined return currentUser.value !== undefined && token.value !== null
}) })
const currentUserID = computed(() => { const currentUserID = computed(() => {
return currentUser.value?.id return currentUser.value?.id
}) })
const setToken = (jwtToken) => {
token.value = jwtToken
if (jwtToken) {
localStorage.setItem('token', jwtToken)
} else {
localStorage.removeItem('token')
}
}
const getToken = () => {
return token.value
}
const login = async (credentials) => { const login = async (credentials) => {
await apiStore.postLogin(credentials) const loginResp = await apiStore.postLogin(credentials)
const response = await apiStore.getAuthUser() const userResp = await apiStore.getAuthUser()
currentUser.value = response.data const jwtToken = loginResp.data.token
return response.data setToken(jwtToken)
currentUser.value = userResp.data
return userResp.data
} }
const logout = async () => { const logout = async () => {
await apiStore.postLogout() await apiStore.postLogout()
currentUser.value = undefined currentUser.value = undefined
setToken(null)
} }
return { return {
currentUser, currentUser,
isLoggedIn, isLoggedIn,
currentUserID, currentUserID,
token,
setToken,
getToken,
login, login,
logout, logout,
} }
frontend/src/stores/socket.js
+11 -6
View File
@@ -5,15 +5,20 @@ export const useSocketStore = defineStore('socket', () => {
const socket = inject('socket') const socket = inject('socket')
const handleConnection = () => { const handleConnection = () => {
socket.on('connect', () => { try {
console.log(`[Socket] Connected -- ${socket.id}`) socket.on('connect', () => {
}) console.log(`[Socket] Connected -- ${socket.id}`)
socket.on('disconnect', () => { })
console.log(`[Socket] Disconnected -- ${socket.id}`) socket.on('disconnect', () => {
}) console.log(`[Socket] Disconnected -- ${socket.id}`)
})
} catch (error) {
console.error('[Socket] Connection error:', error)
}
} }
return { return {
handleConnection, handleConnection,
} }
}) })