chore: setup home page (#3)

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<number>((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) => {

src/app/pages/home/home.component.html

@@ -1 +1,8 @@
-<p>home works!</p>
+<div class="p-1">
+  <p-menubar [model]="menuItems">
+    <ng-template #end>
+      <p-menu #userMenu [popup]="true" [model]="userMenuItems"/>
+      <p-avatar class="cursor-pointer" (click)="userMenu.toggle($event)" [image]="principal()?.avatar" shape="circle"/>
+    </ng-template>
+  </p-menubar>
+</div>

src/app/pages/home/home.component.scss

@@ -0,0 +1,3 @@
+:host {
+  @apply grid grid-rows-[auto_1fr] w-full h-full;
+}

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()
+    },
+  ]
 }

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`
 }

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<UserStateModel>;
 @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;

src/styles.scss

@@ -1,3 +1,4 @@
+@import "primeicons/primeicons.css";
 @layer tailwind-base, primeng, tailwind-utilities;
 
 @layer tailwind-base {