@@ -98,12 +140,14 @@ export function Layout(props: {
Open sidebar
+
{props.subtitle ? (
<>
OpenGPTs: {props.subtitle}
>
) : (
+
"OpenGPTs"
)}
@@ -111,6 +155,7 @@ export function Layout(props: {
Research Preview: this is unauthenticated and all data can be found.
Do not use with sensitive data
+
diff --git a/frontend/src/components/LoginSignUp.tsx b/frontend/src/components/LoginSignUp.tsx
new file mode 100644
index 00000000..023bca18
--- /dev/null
+++ b/frontend/src/components/LoginSignUp.tsx
@@ -0,0 +1,253 @@
+import React, { useState, useEffect } from "react";
+import "../App.css";
+import { useSpring, animated } from "react-spring";
+import { useNavigate } from 'react-router-dom'; // Import useHistory hook from React Router
+
+
+function LoginSignUp() {
+ const [registrationFormStatus, setRegistartionFormStatus] = useState(false);
+ const loginProps = useSpring({
+ left: registrationFormStatus ? -500 : 0, // Login form sliding positions
+ });
+ const registerProps = useSpring({
+ left: registrationFormStatus ? 0 : 500, // Register form sliding positions
+ });
+
+ const loginBtnProps = useSpring({
+ borderBottom: registrationFormStatus
+ ? "solid 0px transparent"
+ : "solid 2px #1059FF", //Animate bottom border of login button
+ });
+ const registerBtnProps = useSpring({
+ borderBottom: registrationFormStatus
+ ? "solid 2px #1059FF"
+ : "solid 0px transparent", //Animate bottom border of register button
+ });
+
+ function registerClicked() {
+ setRegistartionFormStatus(true);
+ }
+ function loginClicked() {
+ setRegistartionFormStatus(false);
+ }
+
+ return (
+
+
+
+
+ Login
+
+
+ Register
+
+
+
+
+ If You Don't have any account Please, Register
+
+
+
+ );
+}
+
+function LoginForm() {
+ const [username, setUsername] = useState("");
+ const [password_hash, setPassword] = useState("");
+ const navigate = useNavigate();
+ const [error, setError] = useState("");
+
+ const handleUsernameChange = (e) => {
+ setUsername(e.target.value);
+ };
+
+ const handlePasswordChange = (e) => {
+ setPassword(e.target.value);
+ };
+
+ useEffect(() => {
+ if (sessionStorage.getItem("authToken")) {
+ navigate("/home");
+ }
+ }, []);
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+
+ // Check if any field is empty
+ if (!username.trim() || !password_hash.trim()) {
+ setError("Please fill in all fields");
+ return;
+ }
+
+ try {
+ const response = await fetch("http://localhost:8100/users/login", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ username,
+ password_hash,
+ }),
+ });
+ const data = await response.json();
+ if (response.ok) {
+ // Login successful
+ console.log("Login successful:", data.token);
+ // If authentication is successful:
+ sessionStorage.setItem("authToken", data.token);
+ // Redirect user to /home
+ navigate('/home');
+ } else {
+ // Other error handling
+ setError(data.detail);
+ }
+ } catch (error) {
+ setError("An error occurred. Please try again later.");
+ }
+ };
+
+ return (
+
+ {error && {error}
}
+
+
+
+
+
+
+
+ );
+}
+
+ function RegisterForm() {
+ const navigate = useNavigate();
+ const [error, setError] = useState("");
+ const [formData, setFormData] = useState({
+ username: "",
+ password_hash: "",
+ email: "",
+ full_name: "",
+ address: ""
+ });
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData({
+ ...formData,
+ [name]: value
+ });
+ };
+
+ const handleSubmit1 = async (e) => {
+ e.preventDefault();
+
+ // Check if any field is empty
+ for (const key in formData) {
+ if (!formData[key]) {
+ setError(`Please fill in the ${key.replace('_', ' ')}`);
+ return;
+ }
+ }
+
+ try {
+ const response = await fetch('http://localhost:8100/users/register', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(formData)
+ });
+ if (response.ok) {
+ alert("Registration successful: Please Login");
+ // Redirect user to login page after successful registration
+ navigate("/login");
+ } else {
+ // Other error handling
+ setError("Registration failed");
+ }
+ } catch (error) {
+ console.error('Error registering user:', error.message);
+ // Handle error, show an error message to the user
+ }
+ };
+
+ return (
+
+ {error && {error}
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+
+
+
+export default LoginSignUp;
diff --git a/frontend/src/openai.jpeg b/frontend/src/openai.jpeg
new file mode 100644
index 00000000..b2e85312
Binary files /dev/null and b/frontend/src/openai.jpeg differ