diff --git a/client/index.html b/client/index.html index 76013f7..ea8c96a 100644 --- a/client/index.html +++ b/client/index.html @@ -11,6 +11,10 @@ Drawn2Shoe +
diff --git a/client/src/pages/Signup/Signup.css b/client/src/pages/Signup/Signup.css new file mode 100644 index 0000000..c31e69f --- /dev/null +++ b/client/src/pages/Signup/Signup.css @@ -0,0 +1,85 @@ +.signup-card { + border-radius: 15px; + overflow: hidden; + background: linear-gradient(135deg, #f8f9fa, #e9ecef); + } + + .signup-card .card-header { + padding: 1.5rem; + background: linear-gradient(45deg, #007bff, #0056b3); + border-bottom: none; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + } + + .signup-card .card-body { + padding: 2rem; + background: white; + border-bottom-left-radius: 15px; + border-bottom-right-radius: 15px; + } + + .signup-card .form-control { + margin-bottom: 1rem; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .signup-card .form-control-lg { + font-size: 1.1rem; + padding: 0.75rem 1.25rem; + } + + .signup-card .form-check { + margin-bottom: 1rem; + } + + .signup-card .form-check-label { + font-weight: 600; + color: #051627; + } + + .signup-card .btn { + border: none; + border-radius: 10px; + padding: 12px; + box-shadow: 0 4px 6px rgba(1, 1, 1, 0.3); + } + + .btn { + background-color: limegreen; /* Green color for Register button */ + } + + .signup-card .btn:hover { + background-color: #0056b3; /* Darker color for Register button on hover */ + } + + .signup-card .form-group label { + font-weight: bold; + color: #495057; + font-size: 1.2rem; /* Example: Larger font size for labels */ + } + + .signup-card h3 { + font-size: 2rem; /* Example: Larger font size for headers */ + margin-bottom: 1.5rem; /* Example: Increased bottom margin */ + } + + .signup-card .text-center p { + margin: 0; + } + + .signup-card .text-center p a { + text-decoration: none; + background-color: rgb(74, 181, 74); /* Green background for the Login button */ + color: white; /* White text color for the Login button */ + padding: 10px 15px; /* Add some padding */ + border-radius: 5px; /* Rounded corners */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Slight shadow */ + } + + .signup-card .text-center p a:hover { + background-color: #004d00; /* Darker green for the Login button on hover */ + text-decoration: none; /* No underline on hover */ + } + \ No newline at end of file diff --git a/client/src/pages/Signup/signup.jsx b/client/src/pages/Signup/signup.jsx index cc72470..cfe0e4c 100644 --- a/client/src/pages/Signup/signup.jsx +++ b/client/src/pages/Signup/signup.jsx @@ -3,293 +3,211 @@ import { Link } from "react-router-dom"; import toast from "react-hot-toast"; import axios from "axios"; import { Navigate } from "react-router-dom"; +import "./Signup.css"; // Import the custom CSS file for additional styles const Signup = () => { - const [name, setName] = useState(""); - const [email, setEmail] = useState(""); - const [passwd, setPasswd] = useState(""); - const [ppic, setPpic] = useState(""); - const [street, setStreet] = useState(""); - const [city, setCity] = useState(""); - const [state, setState] = useState(""); - const [pincode, setPincode] = useState(0); - const [registered, setRegistered] = useState(false); - const registerf = async (e) => { - e.preventDefault(); - if ( - !( - name.length > 0 && - email.length > 0 && - passwd.length > 0 && - street.length > 0 && - city.length > 0 && - state.length > 0 && - pincode > 0 - ) - ) { - toast.error("All fields are necessary"); - return; - } - try { - const { data } = await axios.post( - "http://localhost:3000/api/users/signup", - { - name, - email, - ppic, - passwd, - street, - city, - state, - pincode, - }, - { - headers: { - "Content-Type": "application/json", - }, - withCredentials: true, - } - ); - toast(data.message); - setRegistered(true); - } catch (error) { - toast.error(error.response.data.message); - console.error(error); + const [name, setName] = useState(""); + const [email, setEmail] = useState(""); + const [passwd, setPasswd] = useState(""); + const [ppic, setPpic] = useState(""); + const [street, setStreet] = useState(""); + const [city, setCity] = useState(""); + const [state, setState] = useState(""); + const [pincode, setPincode] = useState(""); + const [rememberMe, setRememberMe] = useState(false); + const [registered, setRegistered] = useState(false); + + const registerf = async (e) => { + e.preventDefault(); + if ( + !( + name.length > 0 && + email.length > 0 && + passwd.length > 0 && + street.length > 0 && + city.length > 0 && + state.length > 0 && + pincode.length > 0 + ) + ) { + toast.error("All fields are necessary"); + return; + } + try { + const { data } = await axios.post( + "http://localhost:3000/api/users/signup", + { + name, + email, + ppic, + passwd, + street, + city, + state, + pincode, + }, + { + headers: { + "Content-Type": "application/json", + }, + withCredentials: true, } - }; - if (registered) { - return ; + ); + toast(data.message); + setRegistered(true); + } catch (error) { + toast.error(error.response.data.message); + console.error(error); } - return ( - <> -
-
-
-

- REGISTER HERE!!! -

+ }; -
-
- { - setName(e.target.value); - }} - /> -
- - - - -
-
-
- { - setEmail(e.target.value); - }} - /> -
- - - - -
-
-
- { - setPasswd(e.target.value); - }} - required - /> -
- - - -
-
-
- { - setPpic(e.target.value); - }} - /> -
- - - -
-
-
- { - setStreet(e.target.value); - }} - required - /> -
- - - -
-
-
- { - setCity(e.target.value); - }} - /> -
- - - -
-
-
- { - setState(e.target.value); - }} - /> -
- - - -
-
-
- { - setPincode(e.target.value); - }} - /> -
- - - -
-
+ if (registered) { + return ; + } -
- - -
-
- -
-
-
-

- HAVE A ACCOUNT ?! -

- - Login - -
- -
+ return ( +
+
+
+
+
+

Register

+
+
+
+
+ + setName(e.target.value)} + required + /> +
+
+ + setEmail(e.target.value)} + required + /> +
+
+ + setPasswd(e.target.value)} + required + /> +
+
+ + setPpic(e.target.value)} + /> +
+
+
+ + setStreet(e.target.value)} + required + /> +
+
+ + setCity(e.target.value)} + required + /> +
+
+
+
+ + setState(e.target.value)} + required + /> +
+
+ + setPincode(e.target.value)} + required + /> +
+
+
+ setRememberMe(!rememberMe)} + /> +
+ +
+
+
+

+ Already a member?{" "} + + Login + +

+
- - ); +
+
+
+
+ ); }; -export default Signup; +export default Signup; \ No newline at end of file