working on signup implementation

This commit is contained in:
Joseph Ditton 2021-11-20 19:34:10 -07:00
parent 63c02f62aa
commit 3902da1747
8 changed files with 162 additions and 10 deletions

View File

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

View File

@ -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>
<Router />
</BrowserRouter>
<SettingsContext.Provider value={[settings, dispatch]}>
<HashRouter>
<Router />
</HashRouter>
</SettingsContext.Provider>
);
};

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

@ -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>
);
};

View File

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

View File

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

View File

@ -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()