Skip to content

Commit a8645c5

Browse files
HarshPatel5940dependabot[bot]
HarshPatel5940
and
dependabot[bot]
committed
Implement Logout (#24)
* feat: logout * fix: toast not working * perf: bump deps * feat: add toast for login chore(deps): bump @eslint/plugin-kit from 0.2.2 to 0.2.3 in /client (#25) Bumps [@eslint/plugin-kit](https://github.com/eslint/rewrite) from 0.2.2 to 0.2.3. - [Release notes](https://github.com/eslint/rewrite/releases) - [Changelog](https://github.com/eslint/rewrite/blob/main/release-please-config.json) - [Commits](eslint/rewrite@plugin-kit-v0.2.2...plugin-kit-v0.2.3) --- updated-dependencies: - dependency-name: "@eslint/plugin-kit" dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> chore(deps): bump cross-spawn from 7.0.3 to 7.0.5 in /client (#26) Bumps [cross-spawn](https://github.com/moxystudio/node-cross-spawn) from 7.0.3 to 7.0.5. - [Changelog](https://github.com/moxystudio/node-cross-spawn/blob/master/CHANGELOG.md) - [Commits](moxystudio/node-cross-spawn@v7.0.3...v7.0.5) --- updated-dependencies: - dependency-name: cross-spawn dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
1 parent 7309432 commit a8645c5

File tree

19 files changed

+1185
-1130
lines changed

19 files changed

+1185
-1130
lines changed

‎client/app/app.config.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default defineAppConfig({
2+
ui: {
3+
notifications: {
4+
position: 'top-8 bottom-[unset]',
5+
transition: 'slide',
6+
},
7+
},
8+
})

‎client/app/app.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
<NuxtLayout>
44
<NuxtPage />
55
</NuxtLayout>
6+
<UNotifications />
67
</div>
78
</template>

‎client/app/components/Hero.vue‎

Lines changed: 47 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,69 @@ const isLoggedIn = ref(false)
33
const username = ref('')
44
const email = ref('')
55
const profile = useProfile()
6+
const toast = useToast()
7+
const BE = import.meta.env.VITE_BE_URL
8+
9+
async function fetchSession() {
10+
try {
11+
const response = await fetch(`${BE}/api/auth/session`, {
12+
credentials: 'include',
13+
})
14+
if (!response.ok) {
15+
console.error('Failed to fetch session')
16+
return
17+
}
18+
const body = await response.json()
19+
20+
return {
21+
status: response.status,
22+
data: body.data,
23+
}
24+
}
25+
catch (e) {
26+
return {
27+
status: 500,
28+
error: e,
29+
}
30+
}
31+
}
632
733
async function checkSession() {
8-
const { data, error } = await useFetch('/api/session')
9-
if (error.value || !data.value) {
34+
const { status, data, error } = await fetchSession()
35+
if (status !== 200) {
1036
console.error(error.value)
1137
return
1238
}
1339
14-
const details = data.value.data.data
15-
isLoggedIn.value = details.user_id !== ''
16-
username.value = details.name
17-
email.value = details.email
40+
isLoggedIn.value = data.user_id !== ''
41+
username.value = data.name
42+
email.value = data.email
1843
1944
profile.set(
20-
details.user_id,
21-
details.name,
22-
details.email,
23-
details.isAdmin,
24-
details.isDeleted,
25-
details.isPremium,
45+
data.user_id,
46+
data.name,
47+
data.email,
48+
data.isAdmin,
49+
data.isDeleted,
50+
data.isPremium,
2651
)
52+
toast.add({
53+
title: 'Welcome back!',
54+
description: `You are now logged in as ${data.name}`,
55+
type: 'success',
56+
})
2757
}
28-
checkSession()
58+
59+
onMounted(async () => {
60+
await checkSession()
61+
})
2962
3063
async function redirectToLogin() {
3164
if (isLoggedIn.value) {
3265
navigateTo('/dashboard')
3366
return
3467
}
35-
const { data } = await useFetch('/api/login')
36-
if (data.value && data.value.status === 307) {
37-
navigateTo(data.value.data.redirectURI, { external: true })
38-
}
68+
await navigateTo(`${BE}/api/auth/google/login?r=client`, { external: true })
3969
}
4070
</script>
4171

‎client/app/components/Navbar.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<script setup lang="ts">
2+
const toast = useToast()
3+
const profile = useProfile()
4+
5+
async function signOut() {
6+
const BE = import.meta.env.VITE_BE_URL
7+
8+
const response = await fetch(`${BE}/api/auth/logout`, {
9+
method: 'POST',
10+
credentials: 'include',
11+
})
12+
13+
const body = await response.json()
14+
15+
return {
16+
status: response.status,
17+
data: body,
18+
}
19+
}
20+
21+
async function handleSignOut() {
22+
toast.add({
23+
title: 'Signing out!',
24+
color: 'orange',
25+
icon: 'mingcute:alert-line',
26+
timeout: 2000,
27+
})
28+
const res = await signOut()
29+
if (res.status !== 200) {
30+
toast.add({
31+
title: 'Failed to sign out!',
32+
color: 'red',
33+
icon: 'mingcute:alert-line',
34+
timeout: 2000,
35+
})
36+
return
37+
}
38+
profile.reset()
39+
navigateTo('/')
40+
toast.add({
41+
title: 'Signed out!',
42+
color: 'green',
43+
icon: 'heroicons:check-circle',
44+
timeout: 2000,
45+
})
46+
}
47+
48+
const items = [
49+
[{
50+
label: `${profile.name}`,
51+
slot: 'account',
52+
disabled: true,
53+
}],
54+
[{
55+
label: 'Your Gists',
56+
icon: 'heroicons:folder-open',
57+
}, {
58+
label: 'Your Stars',
59+
icon: 'heroicons:folder-open',
60+
}],
61+
[{
62+
label: 'Status',
63+
icon: 'i-heroicons-signal',
64+
}, {
65+
label: 'Settings',
66+
icon: 'i-heroicons-cog-8-tooth',
67+
}],
68+
[{
69+
label: 'Sign out',
70+
icon: 'i-heroicons-arrow-left-on-rectangle',
71+
onClick: handleSignOut,
72+
}],
73+
]
74+
</script>
75+
76+
<template>
77+
<div class="h-12 w-full border flex flex-row align-middle items-center justify-between px-5 overflow-x-hidden">
78+
<div>
79+
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
80+
CodeFlick
81+
</h1>
82+
</div>
83+
<div class="flex flex-row items-center h-full ">
84+
<UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }" class="bg-inherit">
85+
<Icon name="iconoir:profile-circle" class="text-green-500 w-7 h-7" />
86+
<template #account="{ item }">
87+
<div class="text-left">
88+
Signed in as <strong>{{ item.label }}</strong>
89+
</div>
90+
</template>
91+
92+
<template #item="{ item }">
93+
<div :onclick="item.onClick" class="w-full flex flex-row justify-between ">
94+
<span class="truncate">{{ item.label }}</span>
95+
96+
<UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
97+
</div>
98+
</template>
99+
</UDropdown>
100+
<div class="pt-1">
101+
<Theme />
102+
</div>
103+
</div>
104+
</div>
105+
</template>

‎client/app/pages/dashboard/index.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<Navbar />
3+
</template>

‎client/env.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const BE_URL = process.env.BE_URL

‎client/eslint.config.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,7 @@ import nuxt from './.nuxt/eslint.config.mjs'
55
export default nuxt(
66
antfu({
77
formatters: true,
8+
9+
ignores: ['*.config.*', 'vite-env.d.ts'],
810
}),
911
)

‎client/nuxt-server/api/login.get.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎client/nuxt.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// https://nuxt.com/docs/api/configuration/nuxt-config
2+
// eslint-disable-next-line no-undef
23
export default defineNuxtConfig({
34
modules: [
45
'@nuxt/eslint',

‎client/package.json‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "nuxt-app",
2+
"name": "codeflick-frontend",
33
"type": "module",
44
"private": true,
55
"scripts": {
@@ -14,21 +14,21 @@
1414
},
1515
"dependencies": {
1616
"@iconify-json/logos": "1.2.3",
17-
"@nuxt/ui": "^2.18.7",
18-
"@pinia/nuxt": "^0.5.0",
17+
"@nuxt/ui": "^2.19.2",
18+
"@pinia/nuxt": "^0.7.0",
1919
"@vueuse/motion": "^2.2.6",
20-
"@vueuse/nuxt": "^11.1.0",
21-
"nuxt": "^3.13.2",
22-
"pinia": "^2.2.5",
23-
"pinia-plugin-persistedstate": "^4.1.2"
20+
"@vueuse/nuxt": "^11.2.0",
21+
"nuxt": "^3.14.159",
22+
"pinia": "^2.2.6",
23+
"pinia-plugin-persistedstate": "^4.1.3"
2424
},
2525
"devDependencies": {
26-
"@antfu/eslint-config": "^3.8.0",
27-
"@iconify-json/devicon": "^1.2.4",
26+
"@antfu/eslint-config": "^3.9.1",
27+
"@iconify-json/devicon": "^1.2.5",
2828
"@iconify-json/solar": "^1.2.1",
29-
"@iconify-json/tabler": "^1.2.6",
29+
"@iconify-json/tabler": "^1.2.8",
3030
"@nuxt/devtools": "latest",
31-
"@nuxt/eslint": "^0.6.1",
31+
"@nuxt/eslint": "^0.7.0",
3232
"eslint-plugin-format": "^0.1.2"
3333
}
3434
}

0 commit comments

Comments
 (0)