working on signup implementation
This commit is contained in:
parent
63c02f62aa
commit
3902da1747
@ -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
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
86
client/components/sign_up/_sign_up.jsx
Normal file
86
client/components/sign_up/_sign_up.jsx
Normal 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>
|
||||
);
|
||||
};
|
3
client/utils/settings_context.js
Normal file
3
client/utils/settings_context.js
Normal file
@ -0,0 +1,3 @@
|
||||
import { createContext } from 'react';
|
||||
|
||||
export const SettingsContext = createContext({});
|
@ -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';
|
||||
|
@ -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()
|
||||
|
Loading…
Reference in New Issue
Block a user