diff --git a/Workly/src/apps/iapply/pages/SignIn/SignIn.Modules.css b/Workly/src/apps/iapply/pages/SignIn/SignIn.Modules.css
index f29991633e19615370271a7fd92b5fa477bce24e..9d1a417158c5ef4799227d464c6f077ed26929e9 100644
--- a/Workly/src/apps/iapply/pages/SignIn/SignIn.Modules.css
+++ b/Workly/src/apps/iapply/pages/SignIn/SignIn.Modules.css
@@ -4,11 +4,9 @@
width: 100%;
height: auto;
margin-left: 17rem;
- background-color: red;
-
}
.form-container{
display: grid;
- background-color: blue;
+ background-color: rgb(255, 255, 255);
}
\ No newline at end of file
diff --git a/Workly/src/apps/iapply/pages/SignIn/components/UserForms.Modules.css b/Workly/src/apps/iapply/pages/SignIn/components/UserForms.Modules.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..557d24b4acb1f6a7bae5382911fe067aecab4855 100644
--- a/Workly/src/apps/iapply/pages/SignIn/components/UserForms.Modules.css
+++ b/Workly/src/apps/iapply/pages/SignIn/components/UserForms.Modules.css
@@ -0,0 +1,60 @@
+.form {
+ width: 20rem;
+ padding: 1rem;
+ background-color: #ffffff;
+ border-radius: 8px;
+ box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+
+ }
+
+ label {
+ display: block;
+ margin-top: 25px;
+ margin-bottom: 5px;
+ }
+
+ input {
+ width:95%;
+ padding: 8px;
+ margin-bottom: 15px;
+ margin-right: 5px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ float: left;
+ }
+
+input[type="checkbox"] {
+ width: 18px; /* Adjust the size of the checkbox */
+ height: 18px;
+ margin-right: 10px;
+ accent-color: #000000; /* Change checkbox color when checked (modern browsers) */
+}
+
+ button {
+ padding: 10px 20px;
+ width: 100%;
+ background-color: #000000;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
+ }
+
+ .toggle-form-link p {
+ text-align: center;
+ }
+
+ a {
+ color: #007bff;
+ text-decoration: none;
+ }
+
+ a:hover {
+ text-decoration:underline;
+ }
+
+.title{
+ text-size-adjust: 3;
+ font-size: 2rem;
+ }
\ No newline at end of file
diff --git a/Workly/src/apps/iapply/pages/SignIn/components/UserForms.tsx b/Workly/src/apps/iapply/pages/SignIn/components/UserForms.tsx
index 713686d5f4ef43e1a10b361355258c64eded3943..3128e3f6a2108c6e6d75712de812247b1438507e 100644
--- a/Workly/src/apps/iapply/pages/SignIn/components/UserForms.tsx
+++ b/Workly/src/apps/iapply/pages/SignIn/components/UserForms.tsx
@@ -1,13 +1,189 @@
+import { useState } from "react";
+import "./UserForms.Modules.css";
+const RegisterForm = () => {
+ const [isLogin, setIsLogin] = useState(false); // Track whether it's the login or registration form
+ const [formData, setFormData] = useState({
+ fullName: "", // Single field for full name
+ firstName: "",
+ lastName: "",
+ email: "",
+ password: "",
+ confirmPassword: "",
+ rememberMe: false, // Initial state for "Remember Me"
+ });
+ const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const { name, value, type, checked } = e.target;
+ if (type === "checkbox") {
+ setFormData({
+ ...formData,
+ [name]: checked, // Set checkbox state
+ });
+ } else {
+ setFormData({
+ ...formData,
+ [name]: value,
+ });
+ }
+ };
-const RegisterForm = () => {
+ const handleSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+
+ // Split full name into first and last name
+ const [firstName, ...lastNameParts] = formData.fullName.split(" ");
+ const lastName = lastNameParts.join(" "); // Join the remaining parts to handle multiple last names
+
+ // Update formData with extracted first and last names
+ const updatedFormData = {
+ ...formData,
+ firstName: firstName || "", // Default to empty if first name is not provided
+ lastName: lastName || "", // Default to empty if last name is not provided
+ };
+
+ console.log(updatedFormData);
+
+ // If rememberMe is true, you can save credentials to localStorage or cookies here
+ if (updatedFormData.rememberMe) {
+ localStorage.setItem("email", updatedFormData.email);
+ localStorage.setItem("password", updatedFormData.password); // Storing password is not recommended for security reasons
+ }
+
+ // Clear form fields by resetting formData state
+ setFormData({
+ fullName: "",
+ firstName: "",
+ lastName: "",
+ email: "",
+ password: "",
+ confirmPassword: "",
+ rememberMe: false,
+ });
+ };
return (
<>
- <form>
- <h1>WELCOME TO NEW <strong>OPPORTUNITIES</strong></h1>
+ <form onSubmit={handleSubmit} className={"form"}>
+ <div className={"title"}>
+ <p>
+ {!isLogin ? (
+ <>
+ WELCOME TO NEW <strong>OPPORTUNITIES</strong>
+ </>
+ ) : (
+ <>
+ LET'S GET BACK TO <strong>APPLYING</strong>
+ </>
+ )}
+ </p>
+ </div>
+ <p>{isLogin ? "Sign in to your account." : "Register to get started."}</p>
+
+ {/* Full Name Field */}
+ {!isLogin && (
+ <>
+ <label htmlFor="fullName" className={"label"}>
+ Full Name
+ </label>
+ <input
+ className={"input"}
+ type="text"
+ id="fullName"
+ name="fullName"
+ placeholder="Enter your full name"
+ value={formData.fullName}
+ onChange={handleChange}
+ required
+ />
+ </>
+ )}
+
+ {/* Email Field */}
+ <label htmlFor="email" className={"label"}>
+ Email
+ </label>
+ <input
+ className={"input"}
+ type="email"
+ id="email"
+ name="email"
+ placeholder="Enter your email"
+ value={formData.email}
+ onChange={handleChange}
+ required
+ />
+
+ {/* Password Field */}
+ <label htmlFor="password" className={"label"}>
+ Password
+ </label>
+ <input
+ className={"input"}
+ type="password"
+ id="password"
+ name="password"
+ placeholder="Enter your password"
+ value={formData.password}
+ onChange={handleChange}
+ required
+ />
+
+ {/* Confirm Password Field (only for register) */}
+ {!isLogin && (
+ <>
+ <label htmlFor="confirmPassword" className={"label"}>
+ Confirm Password
+ </label>
+ <input
+ className={"input"}
+ type="password"
+ id="confirmPassword"
+ name="confirmPassword"
+ placeholder="Confirm your password"
+ value={formData.confirmPassword}
+ onChange={handleChange}
+ required
+ />
+ </>
+ )}
+
+ {/* Submit Button */}
+ <button className={"submit-button"} type="submit">
+ {isLogin ? "Sign in" : "Register now"}
+ </button>
+
+ {/* Remember Me Checkbox */}
+ <div>
+ <label>
+ <input
+ type="checkbox"
+ name="rememberMe"
+ checked={formData.rememberMe}
+ onChange={handleChange}
+ />
+ Remember me
+ </label>
+ </div>
+ {/* Toggle between Register and Login */}
+ <div className="toggle-form-link">
+ {isLogin ? (
+ <p>
+ Not a member?{" "}
+ <a href="#!" onClick={() => setIsLogin(false)}>
+ Register here
+ </a>
+ </p>
+ ) : (
+ <p>
+ Already a member?{" "}
+ <a href="#!" onClick={() => setIsLogin(true)}>
+ Sign in here
+ </a>
+ </p>
+ )}
+ </div>
</form>
</>
);