Skip to content

Commit

Permalink
[registration] feat: Register form (#40)
Browse files Browse the repository at this point in the history
  • Loading branch information
helloitsdave authored May 8, 2024
1 parent 896499a commit 2c15325
Show file tree
Hide file tree
Showing 11 changed files with 502 additions and 104 deletions.
2 changes: 1 addition & 1 deletion backend/src/routes/userRoutes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ router.get('/api/users', authenticateToken, async (req, res) => {
}
});

router.post('/api/users', authenticateToken, async (req, res) => {
router.post('/api/users', async (req, res) => {
const { email, password, username } = req.body;

if (!email || !password || !username) {
Expand Down
105 changes: 93 additions & 12 deletions frontend/src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -22,26 +22,45 @@ body {
}

.action-header {
width: 40%;
width: 30%;
}
}

.login-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap;
}

.login-page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
border: 2px solid white;
border-radius: 20px;
}

.login-register {
display: flex;
flex-direction: column;
margin-bottom: 10px;
align-items: center;
text-align: center;
width: 260px;
height: 280px;
padding: 20px;
}

.login-page form {
.login-page-form form{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
border: 2px solid white;
border-radius: 20px;
width: 260px;
height: 260px;
padding: 10px;
}

.login-page button{
Expand All @@ -51,14 +70,15 @@ body {
padding: 10px;
font-size: 16px;
color: white;
max-width: 200px;
min-width: 100px;
}

.login-page button:hover {
.login-page button {
background-color: #3f8df9;
cursor: pointer;
}


.notes-grid {
display: flex;
flex-wrap: wrap;
Expand Down Expand Up @@ -117,7 +137,6 @@ h2 {
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 20px;
width: 100%;
}

Expand Down Expand Up @@ -158,7 +177,39 @@ textarea {
.app-logo {
width: 200px;
height: 200px;
margin-bottom: 20px;
}
.registration-link-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0px 20px 20px 20px;
padding: 10px;
width: 300px;
border-radius: 10px;
height: 200px;
background-color: azure;
border-radius: 20px;
}

.registration-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto;
}

.nav-link {
text-align: center;
border: 0px solid white;
background-color: #3f8df9;
border-radius: 5px;
padding: 10px;
color: white;
text-decoration: none;
margin: 10px;

}

.note-form button {
Expand Down Expand Up @@ -189,8 +240,6 @@ textarea {
cursor: pointer;
}



.edit-buttons {
display: flex;
justify-content: space-evenly;
Expand Down Expand Up @@ -232,5 +281,37 @@ textarea {
color: grey;
font-size: 14px;
}

.registration-page {
display: flex;
flex-direction: column;
}

.registration-page-header {
text-align: center;
}

.registration-form {
display: flex;
flex-direction: column;
gap: 20px;
}

.registration-form button {
border-radius: 5px;
background-color: #3f8df9;
border: none;
padding: 10px;
font-size: 16px;
color: white;
}

.registration-form-header {
text-align: center;

}

.registration-form-error {
color: red;
text-align: center;
}
58 changes: 50 additions & 8 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
import "./App.css";
import { useState } from "react";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
import {
BrowserRouter as Router,
Routes,
Route,
Navigate,
} from "react-router-dom";
import NoteApp from "./NoteApp";
import Header from "./components/Header";
import Login from "./components/Login";
import RegistrationForm from "./components/RegistrationForm";
import RegistrationLink from "./components/RegistrationLink";

function App() {

const [ loggedIn, setLoggedIn ] = useState(false);
const [loggedIn, setLoggedIn] = useState(false);
const [isRegistered, setRegistered] = useState(false);

const handleLogin = () => {
setLoggedIn(true);
Expand All @@ -18,14 +25,49 @@ function App() {
localStorage.removeItem("token");
};

const handleRegistered = () => {
setRegistered(true);
};

return (
<Router>
<Header />
<Routes>
<Route path="/" element={loggedIn ? <Navigate to="/notes" /> : <Login onLogin={handleLogin} />} />
<Route path="/notes" element={loggedIn ? <NoteApp onLogout={handleLogout}/> : <Navigate to="/" replace />} />
</Routes>
</Router>
<Routes>
<Route
path="/register"
element={
isRegistered ? (
<Navigate to="/" />
) : (
<RegistrationForm onRegister={handleRegistered} />
)
}
/>
<Route
path="/"
element={
loggedIn ? (
<Navigate to="/notes" />
) : (
<div className="login-container">
<RegistrationLink onRegister={isRegistered}/>
<Login onLogin={handleLogin} />
</div>
)
}
/>
<Route
path="/notes"
element={
loggedIn ? (
<NoteApp onLogout={handleLogout} />
) : (
<Navigate to="/" replace />
)
}
/>
</Routes>
</Router>
);
}

Expand Down
17 changes: 17 additions & 0 deletions frontend/src/api/apiService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -66,3 +66,20 @@ export const login = async (username: string, password: string) => {
);
return response;
};

export const createUser = async ( user:
{ username: string,
email: string,
password: string }
) => {
const response = await api.post(
'users',
user,
{
headers: {
"Content-Type": "application/json",
},
}
);
return response;
}
54 changes: 28 additions & 26 deletions frontend/src/components/Login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const Login: React.FC<LoginProps> = ({ onLogin }) => {
const [errorText, setErrorText] = useState("");
const [isDataLoading, setIsDataLoading] = useState(false);


const handleSubmit = async (e: React.FormEvent) => {
setErrorText("");
setIsDataLoading(true);
Expand All @@ -27,42 +26,45 @@ const Login: React.FC<LoginProps> = ({ onLogin }) => {
onLogin();
} catch (error) {
const errors = error as Error | AxiosError;
// Check if the error is an AxiosError
// Check if the error is an AxiosError
if (errors instanceof AxiosError) {
const axiosError = errors as AxiosError;
if (axiosError.response?.status === 401) {
setErrorText("Invalid username or password");
} else {
setErrorText("An error occurred. Please retry");
}
}
setIsDataLoading(false);
}
setIsDataLoading(false);
}
};
};

return (
<div className="login-page">
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
data-testid="username"
required
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
data-testid="password"
required
/>
<button type="submit">Login</button>
{ isDataLoading && <Spinner /> }
{errorText !== "" && <span>{errorText}</span>}
</form>
<div className="login-page-form">
<form onSubmit={handleSubmit}>
<h3>Existing users</h3>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
data-testid="username"
required
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
data-testid="password"
required
/>
<button type="submit">Login</button>
{isDataLoading && <Spinner />}
{errorText !== "" && <span>{errorText}</span>}
</form>
</div>
</div>
);
};
Expand Down
Loading

2 comments on commit 2c15325

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Coverage for this commit

98.00%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   authenticateToken.ts100%100%100%
   hash.ts100%100%100%
   index.ts50%50%83.33%31–33
   prisma.ts100%100%100%
src/__mocks__
   prisma.ts100%100%100%
src/routes
   loginRoutes.ts100%100%100%
   noteRoutes.ts100%100%100%
   userRoutes.ts100%100%100%

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Coverage for this commit

98.72%

Coverage Report
FileBranchesFuncsLinesUncovered Lines
src
   App.tsx87.50%75%95.95%29–30, 39–40
   NoteApp.tsx94.44%100%96.99%70–74
src/api
   apiService.ts100%100%100%
src/components
   Header.tsx100%100%100%
   Login.tsx80%100%98.61%32, 32–33
   Note.tsx100%100%100%
   NoteForm.tsx100%100%100%
   NoteFormModal.tsx100%100%100%
   NoteGrid.tsx100%100%100%
   RegistrationForm.tsx83.33%100%99.10%47, 47–48
   RegistrationLink.tsx100%100%100%
   Spinner.tsx100%100%100%

Please sign in to comment.