From cf7cdd2efe2279b0071b83a3bdb02dc85eac263b Mon Sep 17 00:00:00 2001 From: Conrad Bekondo Date: Fri, 27 Dec 2024 14:33:15 +0100 Subject: [PATCH] chore: setup home page --- netlify/functions/auth/index.ts | 19 +++++++++++-------- src/app/pages/home/home.component.html | 9 ++++++++- src/app/pages/home/home.component.scss | 3 +++ src/app/pages/home/home.component.ts | 25 +++++++++++++++++++++++-- src/app/state/user/actions.ts | 8 +++++++- src/app/state/user/index.ts | 24 ++++++++++++++++++++---- src/styles.scss | 1 + 7 files changed, 73 insertions(+), 16 deletions(-) diff --git a/netlify/functions/auth/index.ts b/netlify/functions/auth/index.ts index 008edb8..10da6cb 100644 --- a/netlify/functions/auth/index.ts +++ b/netlify/functions/auth/index.ts @@ -17,7 +17,7 @@ const db = drizzle({ passport.use(new GoogleStrategy({ clientID: String(process.env['OAUTH2_CLIENT_ID']), clientSecret: String(process.env['OAUTH2_CLIENT_SECRET']), - callbackURL: `${process.env['BASE_URL']}/api/auth/google/callback`, + callbackURL: `${process.env['URL']}/api/auth/google/callback`, }, async (accessToken: string, __: string, profile: Profile, done: VerifyCallback) => { let existingUser = await db.query.users.findFirst({ where: eq(users.users.credentials, profile.id) @@ -73,13 +73,16 @@ passport.deserializeUser((id, done) => { }); const router = Router(); -router.get('/', passport.authenticate('google', { - session: false, - scope: [ - 'profile', - 'email', - ] -})); +router.get('/', (req,res,next) => { + console.debug(process.env['URL']); + passport.authenticate('google', { + session: false, + scope: [ + 'profile', + 'email', + ] + })(req,res,next); +}); router.get('/callback', passport.authenticate('google', { failureRedirect: '/auth/login', session: false, }), (req: Request, res: Response) => { diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 5f2c53f..60a7006 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -1 +1,8 @@ -

home works!

+
+ + + + + + +
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index e69de29..52b9d1d 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -0,0 +1,3 @@ +:host { + @apply grid grid-rows-[auto_1fr] w-full h-full; +} diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index c139048..a70d0db 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,11 +1,32 @@ import { Component } from '@angular/core'; +import { Menubar } from 'primeng/menubar'; +import { MenuItem } from 'primeng/api'; +import { dispatch, select } from '@ngxs/store'; +import { principal, SignOut } from '../../state/user'; +import { Avatar } from 'primeng/avatar'; +import { Menu } from 'primeng/menu'; @Component({ selector: 'tm-home', - imports: [], + imports: [ + Menubar, + Avatar, + Menu + ], templateUrl: './home.component.html', styleUrl: './home.component.scss' }) export class HomeComponent { - + private readonly signOut = dispatch(SignOut); + readonly principal = select(principal); + readonly menuItems: MenuItem[] = [ + { label: 'Home', routerLink: '/', icon: 'pi pi-home', routerLinkActiveOptions: { match: true } }, + ]; + readonly userMenuItems: MenuItem[] = [ + { label: 'Profile', icon: 'pi pi-user', routerLink: '/auth/profile' }, + { separator: true }, + { + label: 'Sign out', icon: 'pi pi-sign-out', command: () => this.signOut() + }, + ] } diff --git a/src/app/state/user/actions.ts b/src/app/state/user/actions.ts index 1ccf8fc..5d20ff6 100644 --- a/src/app/state/user/actions.ts +++ b/src/app/state/user/actions.ts @@ -9,5 +9,11 @@ export class GoogleSignInFlow { export class FinishGoogleSignInFlow { static type = `${prefix} finish google sign-in flow` - constructor(readonly accessToken: string){} + + constructor(readonly accessToken: string) { + } +} + +export class SignOut { + static type = `${prefix} sign out` } diff --git a/src/app/state/user/index.ts b/src/app/state/user/index.ts index f9ba0c9..5eae2ef 100644 --- a/src/app/state/user/index.ts +++ b/src/app/state/user/index.ts @@ -1,12 +1,18 @@ -import { Action, createSelector, provideStates, State, StateContext, StateToken } from '@ngxs/store'; +import { + Action, + createPropertySelectors, + createSelector, + provideStates, + State, + StateContext, + StateToken +} from '@ngxs/store'; import { EnvironmentProviders, Injectable } from '@angular/core'; -import { FinishGoogleSignInFlow, GoogleSignInFlow } from './actions'; +import { FinishGoogleSignInFlow, GoogleSignInFlow, SignOut } from './actions'; import { jwtDecode } from 'jwt-decode'; -import { throwError } from 'rxjs'; import { patch } from '@ngxs/store/operators'; import { Navigate } from '@ngxs/router-plugin'; - export * from './actions'; export type Principal = { @@ -34,6 +40,13 @@ type Context = StateContext; @Injectable() class UserState { + @Action(SignOut) + signOut(ctx: Context) { + ctx.setState(defaultState); + ctx.dispatch(new Navigate(['/'])); + location.reload(); + } + @Action(GoogleSignInFlow) googleSignInFlow(ctx: Context, { redirect, apiBase }: GoogleSignInFlow) { localStorage.setItem('auth-redirect', redirect); @@ -64,4 +77,7 @@ export function provideUserState(...providers: EnvironmentProviders[]) { return provideStates([UserState], ...providers); } +const slices = createPropertySelectors(USER); + export const isUserSignedIn = createSelector([USER], state => state.signedIn); +export const principal = slices.principal; diff --git a/src/styles.scss b/src/styles.scss index 179298e..00fde8b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,3 +1,4 @@ +@import "primeicons/primeicons.css"; @layer tailwind-base, primeng, tailwind-utilities; @layer tailwind-base {