working on signup implementation

.env.example

@@ -4,3 +4,6 @@ NODE_ENV=development
 # in production this will be the full url
 # but in dev it is the name of the database
 DATABASE_URL=neststarterappdevelopement
+
+# recommend using randomkeygen.com to generate a key
+ENCRYPTION_KEY=yourencryptionkey

client/app.jsx

@@ -1,10 +1,25 @@
-import { BrowserRouter } from 'react-router-dom';
+import { useReducer } from 'react';
+import { HashRouter } from 'react-router-dom';
 import { Router } from './components/router';
+import { SettingsContext } from './utils/settings_context';
+
+const settingsReducer = (state, action) => {
+  switch (action.type) {
+    case 'update': {
+      return { ...state, ...action.payload };
+    }
+  }
+  return state;
+};
 
 export const App = () => {
+  const [settings, dispatch] = useReducer(settingsReducer, window.SETTINGS);
+
   return (
-    <BrowserRouter>
+    <SettingsContext.Provider value={[settings, dispatch]}>
+      <HashRouter>
         <Router />
-    </BrowserRouter>
+      </HashRouter>
+    </SettingsContext.Provider>
   );
 };

client/components/router.jsx

@@ -1,10 +1,21 @@
-import { Routes, Route } from 'react-router-dom';
+import { useContext } from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
 import { Home } from './home/_home';
+import { SettingsContext } from '../utils/settings_context';
+import { SignIn } from './sign_in/_sign_in';
+import { SignUp } from './sign_up/_sign_up';
 
 export const Router = () => {
+  const [settings] = useContext(SettingsContext);
+  const { JWT } = settings;
   return (
     <Routes>
-      <Route path="/" element={<Home />} />
+      <Route
+        path="/"
+        element={JWT ? <Home /> : <Navigate replace to="signin" />} // no JWT means not logged in
+      />
+      <Route path="signin" element={<SignIn />} />
+      <Route path="signup" element={<SignUp />} />
     </Routes>
   );
 };

client/components/sign_in/_sign_in.jsx

@@ -1,3 +1,37 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router';
+
 export const SignIn = () => {
-  return <div>I am the sign in page</div>;
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const navigate = useNavigate();
+
+  const goToSignUp = () => {
+    navigate('/signup');
+  };
+
+  return (
+    <div>
+      <div>Email</div>
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <div>Password</div>
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <div>
+        <button type="button">Sign in</button>
+      </div>
+      <div>
+        <button type="button" onClick={goToSignUp}>
+          Sign up
+        </button>
+      </div>
+    </div>
+  );
 };

client/components/sign_up/_sign_up.jsx

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+
+export const SignUp = () => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [emailConfirmation, setEmailConfirmation] = useState('');
+  const [password, setPassword] = useState('');
+  const [passwordConfiramation, setPasswordConfirmation] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const signUp = async () => {
+    if (email === '') {
+      setErrorMessage('Email cannot be blank');
+      return;
+    }
+    if (email !== emailConfirmation) {
+      setErrorMessage('Email does not match.');
+      return;
+    }
+    if (password === '') {
+      setErrorMessage('Password cannot be blank');
+      return;
+    }
+    if (password !== passwordConfiramation) {
+      setErrorMessage('Password does not match');
+      return;
+    }
+    if (name === '') {
+      setErrorMessage('Name cannot be blank.');
+      return;
+    }
+    try {
+      await fetch('/users', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          name,
+          email,
+          password,
+        }),
+      });
+    } catch (e) {
+      console.log(e.message);
+    }
+  };
+
+  return (
+    <div>
+      <div>Name</div>
+      <input
+        type="text"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+      <div>Email</div>
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <div>Confirm Email</div>
+      <input
+        type="email"
+        value={emailConfirmation}
+        onChange={(e) => setEmailConfirmation(e.target.value)}
+      />
+      <div>Password</div>
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <div>Confirm Password</div>
+      <input
+        type="password"
+        value={passwordConfiramation}
+        onChange={(e) => setPasswordConfirmation(e.target.value)}
+      />
+      <div>
+        <button type="button" onClick={signUp}>Sign up</button>
+      </div>
+    </div>
+  );
+};

client/utils/settings_context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const SettingsContext = createContext({});

server/controllers/users.controller.ts

@@ -6,7 +6,7 @@ import {
   Post,
   Res,
 } from '@nestjs/common';
-import bcrypt from 'bcrypt';
+import * as bcrypt from 'bcrypt';
 import { Response } from 'express';
 import * as jwt from 'jsonwebtoken';
 import { CreateUserDto } from 'server/dto/create_user.dto';

server/providers/services/users.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@nestjs/common';
 import { InjectRepository } from '@nestjs/typeorm';
 import { Repository } from 'typeorm';
-import bcrypt from 'bcrypt';
+import * as bcrypt from 'bcrypt';
 import { User } from '../../entities/user.entity';
 
 @Injectable()