defined auth route on api, attempting to connect to front end

client/src/components/pages/Login.tsx

@@ -1,14 +1,30 @@
-import { Button, Page } from "../ui";
+import { useState } from "react";
+import { IUserAuth } from "../../schemas";
+import { Button, Page, Panel } from "../ui";
 
 export default function Login() {
+    const [input, setInput] = useState<IUserAuth>({
+        email: '',
+        password: ''
+    })
+
+    const handleLogin = async () => {
+        if (!input.email || !input.password) return;
+    }
+
     return (
         <Page>
             <h1>Hello! Nice to see you again.</h1>
 
-            {/* login form */}
+            <Panel extraStyles="form-panel">
+                <label htmlFor="login-email">Email</label>
+                <input type="text" id="login-email" onChange={(e) => setInput({...input, email: e.target.value})}></input>
+                <label htmlFor="login-password">Password</label>
+                <input type="text" id="login-password" onChange={(e) => setInput({...input, password: e.target.value})}></input>
+                <Button onClick={() => {}}>Log In</Button>
+            </Panel>
 
-            <Button onClick={() => {}}>Log In</Button>
-            <p>Not registered yet? You can do that here.</p>
+            <aside>Not registered yet? You can do that <a href="/register">here.</a></aside>
         </Page>
     )
 }

client/src/schemas/index.ts

@@ -0,0 +1 @@
+/Users/mikayladobson/Developer/PORTFOLIO/recipe-manager/server/schemas/index.ts

client/src/util/apiUtils.ts

@@ -1,5 +1,21 @@
+import { IUser } from "../schemas";
 const API = import.meta.env.APISTRING || "http://localhost:8080/";
 
+// auth handlers
+export const attemptLogin = async (email: string, password: string) => {
+    const result = await fetch(API + 'auth/login/', { method: "POST" })
+        .then(response => response.json());
+    
+    return result;
+}
+
+export const attemptRegister = async (data: IUser) => {
+    const result = await fetch(API + 'auth/register/', { method: "POST" })
+        .then(response => response.json());
+    
+    return result;
+}
+
 // on recipe route
 export const getRecipeByID = async (id: string | number) => {
     const result = await fetch(API + 'recipe/' + id).then(response => response.json());

client/src/util/types.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from "react";
+import * as schemas from "../schemas";
 
 interface PortalBase {
     children?: ReactNode
@@ -11,45 +12,4 @@ interface ButtonParams extends PortalBase {
 
 export type PageComponent = FC<PortalBase>
 export type PanelComponent = FC<PortalBase>
-export type ButtonComponent = FC<ButtonParams>
-
-export interface IUser {
-    id: number
-    firstname: string
-    lastname: string
-    handle: string
-    email: string
-    password: string
-    active: boolean
-}
-
-export interface IRecipe {
-    id: number
-    name: string
-    description?: string
-    preptime: string
-    removed: boolean
-    authoruserid: IUser["id"]
-}
-
-export interface IIngredient {
-    id: number
-    name: string
-    description?: string
-}
-
-export interface ICollection {
-    id: number
-    name: string
-    active: string
-    ismaincollection: boolean
-    ownerid: IUser["id"]
-}
-
-export interface IGroceryList {
-    id: number
-    name: string
-    recipes?: IRecipe["id"][]
-    active: boolean
-    ownerid: IUser["id"]
-}
+export type ButtonComponent = FC<ButtonParams>

server/loaders/express.ts

@@ -5,7 +5,7 @@ import cors from 'cors';
 import session from 'express-session';
 import pgSessionStore from '../db/sessionStore';
 
-export const expressLoader = (app: Express) => {
+export const expressLoader = async (app: Express) => {
     app.use(cors());
     app.use(bodyParser.json());
     app.use(bodyParser.urlencoded({ extended: true }));

server/loaders/index.ts

@@ -2,11 +2,11 @@ import { Express } from 'express';
 import { expressLoader } from './express';
 import { swaggerLoader } from './swagger';
 import { routes } from '../routes';
+import { passportLoader } from './passport';
 
 export const loaders = async (app: Express) => {
     const expressApp = await expressLoader(app);
-    // const passportApp = await passportLoader(expressApp);
-
+    const passportApp = await passportLoader(expressApp);
     await swaggerLoader(expressApp);
-    await routes(expressApp);
+    await routes(expressApp, passportApp);
 }

server/loaders/passport.ts

@@ -5,7 +5,7 @@ import AuthService from "../auth";
 import { IUserAuth } from "../schemas";
 const AuthInstance = new AuthService();
 
-export const passportApp = (app: Express) => {
+export const passportLoader = async (app: Express) => {
     app.use(passport.initialize());
     app.use(passport.session());
 

server/loaders/swagger.ts

@@ -6,6 +6,6 @@ import path from 'path';
 
 const swaggerDocument = yaml.load(fs.readFileSync(path.resolve(__dirname, '../swagger.yaml'), 'utf-8'));
 
-export const swaggerLoader = (app: Express) => {
+export const swaggerLoader = async (app: Express) => {
     app.use('/api-docs', swaggerUI.serve, swaggerUI.setup(swaggerDocument!));
 }

server/routes/auth.ts

@@ -0,0 +1,31 @@
+import { Express, Router } from "express"
+import { PassportStatic } from "passport";
+import { IUser, IUserAuth } from "../schemas";
+import AuthService from "../auth";
+const AuthInstance = new AuthService();
+
+const router = Router();
+
+export const authRoute = (app: Express, passport: PassportStatic) => {
+    app.use('/auth', router);
+
+    router.post('/login', passport.authenticate('local'), async (req, res, next) => {
+        try {
+            const data: IUserAuth = req.body;
+            const response = await AuthInstance.login(data);
+            res.status(200).send(response);
+        } catch(e) {
+            next(e);
+        }
+    })
+
+    router.post('/register', async (req, res, next) => {
+        try {
+            const data: IUser = req.body;
+            const response = await AuthInstance.register(data);
+            res.status(200).send(response);
+        } catch(e) {
+            next(e);
+        }
+    })
+}

server/routes/index.ts

@@ -1,13 +1,16 @@
 import { Express } from "express"
+import { PassportStatic } from "passport";
 import { userRoute } from "./users";
 import { recipeRoute } from "./recipe";
 import { collectionRoute } from "./collection";
 import { ingredientRoute } from "./ingredient";
 import { groceryListRoute } from "./groceryList";
+import { authRoute } from "./auth";
 
-export const routes = (app: Express, passport?: any) => {
+export const routes = async (app: Express, passport: PassportStatic) => {
     console.log('routes called');
 
+    authRoute(app, passport);
     userRoute(app);
     recipeRoute(app);
     collectionRoute(app);