updated sign in/up
Davide Di Modica committed
Oct 12, 2023 at 18:28 UTC
aaaae8dfde13412653217a7387d010759693bdef
4 files changed
+108
-45
src/components/SignInUp/SignIn.vue
+4
-11
@@ -95,20 +95,13 @@ function signIn(e: Event) {
95
password: model.value.password
96
}
97
98
- Api.auth
98
+ useAuthStore()
99
.login(payload)
100
- .then(res => {
101
- if (res.data.success && res.data.token) {
102
- useAuthStore().setLogged({
103
- token: res.data.token
104
- })
105
- router.push({ path: "/", replace: true })
106
- } else {
107
- message.warning(res.data?.message || "An error occurred. Please try again later.")
108
- }
100
+ .then(() => {
101
+ router.push({ path: "/", replace: true })
102
})
103
.catch(err => {
111
- message.error(err.response?.data?.message || "An error occurred. Please try again later.")
104
+ message.error(err?.message || "An error occurred. Please try again later.")
105
})
106
.finally(() => {
107
loading.value = false
src/components/SignInUp/SignUp.vue
+40
-7
@@ -53,6 +53,16 @@
53
</n-step>
54
<n-step title="Details">
55
<div class="pt-3" v-show="wizardCurrent === 2">
56
+ <n-form-item path="username" label="Username">
57
+ <n-input
58
+ v-model:value="model.username"
59
+ @keydown.enter="signUp"
60
+ size="large"
61
+ placeholder="Username..."
62
+ />
63
+ </n-form-item>
64
+
65
+ <!--
66
<div class="propic flex gap-5 mb-5">
67
<div class="avatar">
68
<n-avatar :size="80" :src="model.propic" round />
@@ -106,8 +116,9 @@
116
placeholder="Customer Code..."
117
/>
118
</n-form-item>
119
+ -->
120
110
- <div class="flex items-center justify-between mt-3">
121
+ <div class="flex items-center justify-between mt-3 gap-3">
122
<n-button @click="wizardCurrent = 1" size="large">
123
<template #icon>
124
<n-icon>
@@ -171,11 +182,14 @@ import type { RegisterPayload } from "@/types/auth.d"
182
interface ModelType {
183
email: string
184
password: string
185
+ username: string
186
confirmPassword: string
187
+ /*
188
customerCode: string
189
firstName: string
190
lastName: string
191
propic: string
192
+ */
193
}
194
195
const emit = defineEmits<{
@@ -190,14 +204,18 @@ const model = ref<ModelType>({
204
email: "",
205
password: "",
206
confirmPassword: "",
207
+ username: ""
208
+ /*
209
customerCode: "",
210
firstName: "",
211
lastName: "",
212
propic: ""
213
+ */
214
})
215
216
const accountStepValid = computed(() => !!model.value.email && !!model.value.password && !!model.value.confirmPassword)
200
-const detailsStepValid = computed(() => !!model.value.customerCode && !!model.value.firstName && !!model.value.lastName)
217
+const detailsStepValid = computed(() => !!model.value.username)
218
+//const detailsStepValid = computed(() => !!model.value.customerCode && !!model.value.firstName && !!model.value.lastName)
219
220
const passwordSchema = new passwordValidator()
221
passwordSchema
@@ -211,8 +229,8 @@ passwordSchema
229
.lowercase() // Must have lowercase letters
230
.has()
231
.digits(1) // Must have at least 1 digit
214
- .has()
215
- .symbols(1) // Must have at least 1 symbol
232
+//.has()
233
+//.symbols(1) // Must have at least 1 symbol
234
235
const rules: FormRules = {
236
email: [
@@ -240,7 +258,8 @@ const rules: FormRules = {
258
return !!passwordSchema.validate(value, { details: false })
259
},
260
message:
243
- "The string should have a minimum length of 8 characters, minimum of 1 uppercase and lowercase letter, minimum of 1 digit and 1 symbol",
261
+ "The string should have a minimum length of 8 characters, minimum of 1 uppercase and lowercase letter and minimum of 1 digit",
262
+ //"The string should have a minimum length of 8 characters, minimum of 1 uppercase and lowercase letter, minimum of 1 digit and 1 symbol",
263
trigger: ["blur"]
264
}
265
],
@@ -258,6 +277,14 @@ const rules: FormRules = {
277
trigger: ["blur", "password-input"]
278
}
279
],
280
+ username: [
281
+ {
282
+ required: true,
283
+ trigger: ["blur"],
284
+ message: "Username Code is required"
285
+ }
286
+ ]
287
+ /*
288
customerCode: [
289
{
290
required: true,
@@ -279,6 +306,7 @@ const rules: FormRules = {
306
message: "Last Name is required"
307
}
308
]
309
+ */
310
}
311
312
function signUp(e: Event) {
@@ -288,6 +316,11 @@ function signUp(e: Event) {
316
loading.value = true
317
318
const payload: RegisterPayload = {
319
+ password: model.value.password,
320
+ email: model.value.email,
321
+ username: model.value.username,
322
+ role_id: 1
323
+ /*
324
customerCode: model.value.customerCode,
325
usersFirstName: model.value.firstName,
326
usersLastName: model.value.lastName,
@@ -295,7 +328,7 @@ function signUp(e: Event) {
328
usersRole: "admin",
329
imageFile: model.value.propic,
330
notifications: 0,
298
- password: model.value.password
331
+ */
332
}
333
334
Api.auth
@@ -324,6 +357,6 @@ function signUp(e: Event) {
357
358
function setCroppedImage(result: ImageCropperResult) {
359
const canvas = result.canvas as HTMLCanvasElement
327
- model.value.propic = canvas.toDataURL()
360
+ // model.value.propic = canvas.toDataURL()
361
}
362
</script>
src/stores/auth.ts
+48
-20
@@ -1,54 +1,82 @@
1
import { defineStore, acceptHMRUpdate } from "pinia"
2
-import type { Role, Roles, User } from "@/types/auth.d"
2
+import { UserRole, type User, type LoginPayload } from "@/types/auth.d"
3
import _castArray from "lodash/castArray"
4
+import Api from "@/api"
5
+import * as jose from "jose"
6
import SecureLS from "secure-ls"
7
+import { scopeToRole } from "@/utils/auth"
8
const ls = new SecureLS({ encodingType: "aes", isCompression: false })
9
10
export const useAuthStore = defineStore("auth", {
11
state: () => ({
9
- role: "admin" as Role | null,
12
user: {
11
- token: ""
13
+ access_token: "",
14
+ role: UserRole.Unknown
15
} as User
16
}),
17
actions: {
15
- setLogged(payload: User) {
16
- this.role = "admin"
17
- this.user = payload
18
+ setLogged(token: string) {
19
+ const jwtPayload = jose.decodeJwt(token)
20
+ const scopes = jwtPayload.scopes as string[]
21
+
22
+ this.user = {
23
+ access_token: token,
24
+ role: scopeToRole(scopes)
25
+ }
26
},
27
setToken(token: string) {
20
- this.user.token = token
28
+ this.user.access_token = token
29
},
30
setLogout() {
23
- this.role = null
31
this.user = {
25
- token: ""
32
+ access_token: "",
33
+ role: UserRole.Unknown
34
}
35
+ },
36
+ login(payload: LoginPayload) {
37
+ return new Promise((resolve, reject) => {
38
+ Api.auth
39
+ .login(payload)
40
+ .then(res => {
41
+ if (res.data.access_token) {
42
+ useAuthStore().setLogged(res.data.access_token)
43
+ resolve(res.data)
44
+ } else {
45
+ reject(res.data)
46
+ }
47
+ })
48
+ .catch(err => {
49
+ reject(err.response?.data)
50
+ })
51
+ })
52
}
53
},
54
getters: {
30
- isLogged(state) {
31
- return state.user?.token
55
+ isLogged(state): boolean {
56
+ return !!state.user?.access_token
57
+ },
58
+ userToken(state): string {
59
+ return state.user?.access_token
60
},
33
- userRole(state) {
34
- return state.role
61
+ userRole(state): UserRole {
62
+ return state.user?.role
63
},
36
- isRoleGranted(state) {
37
- return (roles?: Roles) => {
64
+ isRoleGranted() {
65
+ return (roles?: UserRole | UserRole[]) => {
66
if (!roles) {
67
return true
68
}
41
- if (!state.role) {
69
+ if (!this.userRole) {
70
return false
71
}
72
45
- const arrRoles: Role[] = _castArray(roles)
73
+ const arrRoles: UserRole[] = _castArray(roles)
74
47
- if (arrRoles.includes("all")) {
75
+ if (arrRoles.includes(UserRole.All)) {
76
return true
77
}
78
51
- return arrRoles.includes(state.role)
79
+ return arrRoles.includes(this.userRole)
80
}
81
}
82
},
@@ -57,7 +85,7 @@ export const useAuthStore = defineStore("auth", {
85
getItem: key => ls.get(key),
86
setItem: (key, value) => ls.set(key, value)
87
},
60
- paths: ["role", "user"]
88
+ paths: ["user"]
89
}
90
})
91
src/types/auth.d.ts
+16
-7
@@ -1,11 +1,8 @@
1
-export type Role = "all" | "admin" | "moderator"
2
-export type Roles = role | role[]
3
-
1
export interface RouteMetaAuth {
2
checkAuth?: boolean
3
authRedirect?: string
4
auth?: boolean
8
- roles?: Roles
5
+ roles?: UserRole | UserRole[]
6
}
7
8
export interface LoginPayload {
@@ -14,16 +11,28 @@ export interface LoginPayload {
11
}
12
13
export interface RegisterPayload {
14
+ username: string
15
+ password: string
16
+ email: string
17
+ role_id: number
18
+ /*
19
customerCode: string
20
usersFirstName: string
21
usersLastName: string
20
- usersEmail: string
22
usersRole: "admin"
23
imageFile: string
24
notifications: number
24
- password: string
25
+ */
26
+}
27
+
28
+export enum UserRole {
29
+ All = "all",
30
+ Unknown = 0,
31
+ Admin = 1,
32
+ Analyst = 2
33
}
34
35
export interface User {
28
- token: string
36
+ access_token: string
37
+ role: UserRole
38
}