Added OTP and Profile pages UI

website3.0/components/Header.js

@@ -9,9 +9,10 @@ import ToggleSwitch from "./ToggleSwitch";
 //Importing AuthButton component
 import AuthButton from "./AuthButton";
 
+
 //Importing FontAwesome for Icons
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faHeart } from "@fortawesome/free-solid-svg-icons";
+import { faHeart, faUserCircle, faUserLarge } from "@fortawesome/free-solid-svg-icons";
 
 const Header = () => {
   // State to manage mobile menu toggle

website3.0/components/Login-Signup.js

@@ -1,5 +1,9 @@
-import React from 'react';
+"use client";
+
+import React,{useState} from 'react';
 import "@stylesheets/login-signup.css";
+import OTP from '@pages/OTP';
+import Profile from '@pages/Profile';
 
 export const Login = ({ onClose, onSignupClick }) => {
   return (
@@ -24,6 +28,44 @@ export const Login = ({ onClose, onSignupClick }) => {
 };
 
 export const Signup = ({ onClose, onLoginClick }) => {
+  const [showOTP, setShowOTP] = useState(false);
+  const [showProfile, setShowProfile] = useState(false);
+  const [email, setEmail] = useState('');
+
+  const handleContinue = () => {
+    if (email) {
+      setShowOTP(true);
+      // Here you would typically trigger sending an OTP to the provided email
+    } else {
+      alert('Please enter your email');
+    }
+  };
+
+  const handleOTPSubmit = (otp) => {
+    // Here you would typically verify the OTP
+    console.log('OTP entered:', otp);
+    // For now, we'll just move to the Profile component
+    setShowProfile(true);
+  };
+
+  const handleProfileSubmit = (profileData) => {
+    // Handle profile submission
+    console.log('Profile data:', profileData);
+    onClose(); // Close the signup process
+  };
+
+  const handleBackToSignup = () => {
+    setShowOTP(false);
+  };
+
+  if (showProfile) {
+    return <Profile onSubmit={handleProfileSubmit} onClose={onClose} />;
+  }
+
+  if (showOTP) {
+    return <OTP onClose={onClose} onOTPSubmit={handleOTPSubmit} onBack={handleBackToSignup} />;
+  }
+
   return (
     <div className="signup-auth-container">
       <h1>Create Your HelpOps-Hub Account</h1>
@@ -37,11 +79,15 @@ export const Signup = ({ onClose, onLoginClick }) => {
         Sign up with Github
       </button>
       <p>Or</p><br/>
-      <input type="email" placeholder="Enter your email" /><br/>
+      <input 
+        type="email" 
+        placeholder="Enter your email" 
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      /><br/>
       <a href="#" onClick={onLoginClick}>Already have an account? Login</a><br/>
-      <button className="continue-btn">Continue</button>
+      <button className="continue-btn" onClick={handleContinue}>Continue</button>
       <button className="close-btn" onClick={onClose}>X</button>
     </div>
-    );
-  };
-
+  );
+};

website3.0/pages/OTP.js

@@ -0,0 +1,70 @@
+"use client";
+import React, { useState, useRef } from 'react';
+import "@stylesheets/otp.css";
+
+const OTP = ({ onClose, onOTPSubmit, onBack }) => {
+  // State to store the 6-digit OTP
+  const [otp, setOtp] = useState(['', '', '', '', '', '']);
+  const inputRefs = useRef([]);
+
+  // Handle input change for OTP fields
+  const handleChange = (element, index) => {
+    if (isNaN(element.value)) return false;
+
+    // Update the OTP state
+    setOtp([...otp.map((d, idx) => (idx === index ? element.value : d))]);
+
+    // Move focus to the next input field if value is entered
+    if (element.value !== '') {
+      if (index < 5 && inputRefs.current[index + 1]) {
+        inputRefs.current[index + 1].focus();
+      }
+    }
+  };
+
+  const handleKeyDown = (e, index) => {
+    // Move focus to the previous input field if backspace is pressed and the field is empty
+    if (e.key === 'Backspace' && index > 0 && otp[index] === '' && inputRefs.current[index - 1]) {
+      inputRefs.current[index - 1].focus();
+    }
+  };
+
+  // Handle OTP submission
+  const handleSubmit = () => {
+    onOTPSubmit(otp.join(''));(otp.join(''));
+  };
+
+  return (
+    <div className="otp-container">
+      {/* Back arrow */}
+      <button className="back-arrow" onClick={onBack}>
+        &#8592; {/* Left arrow Unicode character */}
+      </button>
+      <h5>To continue, enter the OTP sent to your registered email address.</h5>
+      <p>This helps us keep your account secure.</p>
+      {/* OTP input fields */}
+      <div className="otp-input">
+        {otp.map((data, index) => {
+          return (
+            <input
+              className="otp-field"
+              type="text"
+              name="otp"
+              maxLength="1"
+              key={index}
+              value={data}
+              onChange={e => handleChange(e.target, index)}
+              onKeyDown={e => handleKeyDown(e, index)}
+              onFocus={e => e.target.select()}
+              ref={el => inputRefs.current[index] = el}
+            />
+          );
+        })}
+      </div>
+      {/* Continue button */}
+      <button className="continue-btn" onClick={handleSubmit}>Continue</button>
+    </div>
+  );
+};
+
+export default OTP;

website3.0/pages/Profile.js

@@ -0,0 +1,60 @@
+"use client";
+import React, { useState } from 'react';
+import "@stylesheets/profile.css"
+
+const Profile = ({ onClose }) => {
+  // State for form fields
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+
+  // Handle form submission
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // TODO: Add account creation logic here
+    onClose();
+  };
+
+  return (
+    <div className="profile-container">
+      <h1>Profile</h1>
+      <img src="circle.png" alt="Profile-circle" />
+      <form onSubmit={handleSubmit}>
+        {/* Username input */}
+        <div className="form-group">
+          <input
+            type="text"
+            placeholder="Username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            required
+          />
+        </div>
+        {/* Password input */}
+        <div className="form-group">
+          <input
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </div>
+        {/* Confirm password input */}
+        <div className="form-group">
+          <input
+            type="password"
+            placeholder="Confirm Password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            required
+          />
+        </div>
+        {/* Submit button */}
+        <button type="submit" className="create-account-btn">Create Account</button>
+      </form>
+    </div>
+  );
+};
+
+export default Profile;

website3.0/stylesheets/login-signup.css

@@ -100,6 +100,7 @@
 
   .dark-mode .login-auth-container input {
     border-bottom: 1px solid #f5f5f5;
+    color: #f5f5f5;
   }
 
   .dark-mode .login-btn{
@@ -213,6 +214,7 @@
 
   .dark-mode .signup-auth-container input{
     border-bottom: 1px solid #f5f5f5;
+    color: #f5f5f5;
   }
 
   .dark-mode .signup-auth-container button {

website3.0/stylesheets/otp.css

@@ -0,0 +1,57 @@
+/* OTP Component Styles */
+.back-arrow {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.back-arrow:hover {
+  color: #666;
+}
+
+.otp-container {
+    position: relative;
+    background-color: #ff8c00;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    height: 500px;
+    width: 650px;
+  }
+
+  .otp-container h5{
+    margin-top: 60px;
+  }
+
+  .otp-input {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+    margin-top: 50px;
+    gap: 6px;
+  }
+
+  .otp-field {
+    width: 40px;
+    height: 45px;
+    margin: 0 5px;
+    text-align: center;
+    font-size: 18px;
+    border-radius: 8px;
+    background: rgba(0,0,0,0.4);
+    color: #f5f5f5;
+  }
+
+  .continue-btn {
+    background-color: rgb(64, 109, 177);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 16px;
+    cursor: pointer;
+    margin-top: 20px;
+  }

website3.0/stylesheets/profile.css

@@ -0,0 +1,49 @@
+/* Profile Component Styles */
+.profile-container {
+    background-color: #ffa500;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+    width: 650px;
+    height: 500px;
+  }
+
+  .profile-container h1 {
+    margin-bottom: 20px;
+    font-size: 24px;
+    font-weight: 600;
+  }
+
+  .profile-container img{
+    margin-top: 25px;
+    margin-left: 43%;
+    margin-bottom: 25px;
+  }
+
+  .form-group {
+    margin-bottom: 15px;
+  }
+
+  .form-group input {
+    width: 60%;
+    padding: 10px;
+    border: none;
+    background: none;
+    color: black;
+    margin-left: 70px;
+    border-bottom: 1px solid #1f1f1f;
+  }
+
+  .form-group input::placeholder{
+    color: #1f1f1f;
+  }
+
+  .create-account-btn {
+    background-color: rgb(64, 109, 177);
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 16px;
+    cursor: pointer;
+    margin-top: 20px;
+  }