Skip to content

wrote api calls login registration #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zhangsscc99 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

wrote api calls login registration #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9ba296c
wrote api calls login registration
zhangsscc99 Apr 28, 2024
23ba145
login register
zhangsscc99 May 5, 2024
324f03c
erase Chinese
zhangsscc99 May 5, 2024
0b19dc3
remove comments
zhangsscc99 May 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"react-flow": "^1.0.3",
"react-flow-renderer": "^10.3.17",
"react-router": "^6.22.1",
"react-router-dom": "^6.22.1",
"react-router-dom": "^6.23.0",
Copy link
Collaborator

@weikunwu weikunwu May 5, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Is the router upgrade required?

"react-scripts": "5.0.1",
"reactflow": "^11.10.4",
"typescript": "^4.9.5",
Expand Down
66 changes: 60 additions & 6 deletions src/Components/LogIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,50 @@
import HumaaansWireframe from '../Images/Humaaans Wireframe.png';
import React, { useState } from 'react';
import '../Styles/login.modules.css';

interface Props {
backToHomeHandler: () => void;
}

function LogIn({backToHomeHandler}: Props) {
const url = 'http://localhost:4000/login';


const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const [successMessage, setSuccessMessage] = useState('');

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();

try {
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ email, password })
});

if (response.ok) {
setSuccessMessage('Login successful');
setEmail('');
setPassword('');
window.location.href = '/profile';
} else if (response.status === 404) {
setErrorMessage('User not found');
} else if (response.status === 401) {
setErrorMessage('Invalid credentials');
} else {
setErrorMessage('Error connecting to server');
}
} catch (error) {
console.error('Error:', error);
setErrorMessage('Error connecting to server');
}
};

return (
<div style={{
margin: 0,
Expand Down Expand Up @@ -37,18 +76,33 @@ function LogIn({backToHomeHandler}: Props) {
If you are already a member you can login with your email address and password.
</div>


<div id="username-and-password">
<form>
<label htmlFor="username"> User name</label><br />
<input type="text" id="user-name" name="username" /><br />
<form onSubmit={handleSubmit}>
<label htmlFor="username"> Email address</label><br />
<input
type="email"
id="user-email"
name="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/><br />

<label htmlFor="password"> Password</label><br />
<input type="text" id="password" name="password" /><br />
<input
type="password"
id="password"
name="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/><br />

<input type="checkbox" id="rememberme" defaultChecked />
Remember me <br />
<button type="submit" id="login"> Log In </button>
</form>
{errorMessage && <div>{errorMessage}</div>}
{successMessage && <div>{successMessage}</div>}
</div>
<div>
Don't have an account? <a href="/SignUp">Sign up here</a>
Expand Down
52 changes: 51 additions & 1 deletion src/Components/SignUp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,45 @@
import HumaaansWireframe from '../Images/Humaaans Wireframe.png';
import '../Styles/SignUp.modules.css';
import React, { useState } from 'react';

interface Props {
backToLoginHandler: () => void;
}

function SignUp({backToLoginHandler}: Props) {

const url = 'http://localhost:4000/register';


const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [message, setMessage] = useState('');

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();

try {
const response = await fetch('http://localhost:4000/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password }),
});

if (response.ok) {
setMessage('Registration successful!');
window.location.href = '/login';
} else {
const errorMessage = await response.text();
setMessage(`Registration failed: ${errorMessage}`);
}
} catch (error) {

setMessage('Failed to connect to the server.');
}
};

return (
<div style={{
margin: 0,
Expand All @@ -30,7 +64,7 @@ function SignUp({backToLoginHandler}: Props) {
Become a member and enjoy pro learning
</div>

<div id="sign-up-form">
{/* <div id="sign-up-form">
<form>
<div id="sign-up-fields">
<div id="float-left">
Expand All @@ -41,6 +75,7 @@ function SignUp({backToLoginHandler}: Props) {
<label htmlFor="last-name" >Last name</label><br />
<input type="text" className="name" name="last-name"/>
</div>

</div>
<label htmlFor="emailaddress"> Email address</label><br />
<input type="text" id="emailaddress" name="email-address"/><br />
Expand All @@ -50,7 +85,22 @@ function SignUp({backToLoginHandler}: Props) {
<button type="submit" id="submitt"> Submit </button>

</form>
</div> */}




<div id="sign-up-form">
<form onSubmit={handleSubmit}>
<label htmlFor="emailaddress"> Email address</label><br />
<input type="text" id="emailaddress" name="email-address" value={email} onChange={(e) => setEmail(e.target.value)} /><br />
<label htmlFor="pass-word"> password</label><br />
<input type="password" id="pass-word" name="pass-word" value={password} onChange={(e) => setPassword(e.target.value)} /><br />

<button type="submit" id="submitt"> Submit </button>
</form>
</div>
{message && <div>{message}</div>}
</div>
</div>
</div>
Expand Down