From 9ba296c465076a1576e404ddf40f04d8c707d8fa Mon Sep 17 00:00:00 2001 From: Yuting Wang Date: Sat, 27 Apr 2024 20:59:43 -0500 Subject: [PATCH 1/4] wrote api calls login registration --- src/Components/LogIn.tsx | 69 ++++++++++++++++++++++++++++++++++++++- src/Components/SignUp.tsx | 53 +++++++++++++++++++++++++++++- 2 files changed, 120 insertions(+), 2 deletions(-) diff --git a/src/Components/LogIn.tsx b/src/Components/LogIn.tsx index b3379a952..412545fec 100644 --- a/src/Components/LogIn.tsx +++ b/src/Components/LogIn.tsx @@ -1,4 +1,5 @@ import HumaaansWireframe from '../Images/Humaaans Wireframe.png'; +import React, { useState } from 'react'; import '../Styles/login.modules.css'; interface Props { @@ -6,6 +7,44 @@ interface Props { } 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) => { + 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(''); + } 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 (
-
+ {/*


@@ -49,6 +88,34 @@ function LogIn({backToHomeHandler}: Props) { Remember me
+
*/} + +
+
+
+ setEmail(e.target.value)} + required + />
+ +
+ setPassword(e.target.value)} + required + />
+ + +
+ {errorMessage &&
{errorMessage}
} + {successMessage &&
{successMessage}
}
Don't have an account? Sign up here diff --git a/src/Components/SignUp.tsx b/src/Components/SignUp.tsx index 79b59a6ff..55755b0b9 100644 --- a/src/Components/SignUp.tsx +++ b/src/Components/SignUp.tsx @@ -1,11 +1,46 @@ 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) => { + 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!'); + } else { + // 注册失败 + const errorMessage = await response.text(); + setMessage(`Registration failed: ${errorMessage}`); + } + } catch (error) { + // 请求发送失败 + setMessage('Failed to connect to the server.'); + } + }; + return (
-
+ {/*
@@ -41,6 +76,7 @@ function SignUp({backToLoginHandler}: Props) {
+


@@ -50,7 +86,22 @@ function SignUp({backToLoginHandler}: Props) {
+
*/} + + + + +
+
+
+ setEmail(e.target.value)} />
+
+ setPassword(e.target.value)} />
+ + +
+ {message &&
{message}
}
From 23ba1456470cd23f3b860df9f9601f05615ecdf4 Mon Sep 17 00:00:00 2001 From: Yuting Wang Date: Sun, 5 May 2024 13:18:48 -0500 Subject: [PATCH 2/4] login register --- package-lock.json | 26 +++++++++++++------------- package.json | 2 +- src/Components/LogIn.tsx | 2 +- src/Components/SignUp.tsx | 1 + 4 files changed, 16 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index e2a29b41d..f911dc305 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,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", "react-scripts": "5.0.1", "reactflow": "^11.10.4", "typescript": "^4.9.5", @@ -3608,9 +3608,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.15.1", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz", - "integrity": "sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==", + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz", + "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==", "engines": { "node": ">=14.0.0" } @@ -15303,11 +15303,11 @@ } }, "node_modules/react-router": { - "version": "6.22.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.1.tgz", - "integrity": "sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==", + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz", + "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==", "dependencies": { - "@remix-run/router": "1.15.1" + "@remix-run/router": "1.16.0" }, "engines": { "node": ">=14.0.0" @@ -15317,12 +15317,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.22.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.1.tgz", - "integrity": "sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==", + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz", + "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==", "dependencies": { - "@remix-run/router": "1.15.1", - "react-router": "6.22.1" + "@remix-run/router": "1.16.0", + "react-router": "6.23.0" }, "engines": { "node": ">=14.0.0" diff --git a/package.json b/package.json index 2c00f9266..5b0bdadce 100644 --- a/package.json +++ b/package.json @@ -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", "react-scripts": "5.0.1", "reactflow": "^11.10.4", "typescript": "^4.9.5", diff --git a/src/Components/LogIn.tsx b/src/Components/LogIn.tsx index 412545fec..b474846e9 100644 --- a/src/Components/LogIn.tsx +++ b/src/Components/LogIn.tsx @@ -29,9 +29,9 @@ function LogIn({backToHomeHandler}: Props) { 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) { diff --git a/src/Components/SignUp.tsx b/src/Components/SignUp.tsx index 55755b0b9..82664c8e5 100644 --- a/src/Components/SignUp.tsx +++ b/src/Components/SignUp.tsx @@ -30,6 +30,7 @@ function SignUp({backToLoginHandler}: Props) { if (response.ok) { // 注册成功 setMessage('Registration successful!'); + window.location.href = '/login'; } else { // 注册失败 const errorMessage = await response.text(); From 324f03cd3b55505f1da78ee6b4612cb7a9c240c7 Mon Sep 17 00:00:00 2001 From: Yuting Wang Date: Sun, 5 May 2024 13:23:46 -0500 Subject: [PATCH 3/4] erase Chinese --- src/Components/SignUp.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/Components/SignUp.tsx b/src/Components/SignUp.tsx index 82664c8e5..7133ab20e 100644 --- a/src/Components/SignUp.tsx +++ b/src/Components/SignUp.tsx @@ -28,16 +28,14 @@ function SignUp({backToLoginHandler}: Props) { }); 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.'); } }; From 0b19dc3f929ef863e905036d03b81d173b3415eb Mon Sep 17 00:00:00 2001 From: Yuting Wang Date: Sun, 5 May 2024 14:36:38 -0500 Subject: [PATCH 4/4] remove comments --- src/Components/LogIn.tsx | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/Components/LogIn.tsx b/src/Components/LogIn.tsx index b474846e9..36d5c2663 100644 --- a/src/Components/LogIn.tsx +++ b/src/Components/LogIn.tsx @@ -76,19 +76,6 @@ function LogIn({backToHomeHandler}: Props) { If you are already a member you can login with your email address and password.
- {/*
-
-
-
- -
-
- - - Remember me
- -
-
*/}