Ignore:
Timestamp:
01/21/25 03:08:24 (3 days ago)
Author:
stefan toskovski <stefantoska84@…>
Branches:
main
Parents:
0c6b92a
Message:

F4 Finalna Verzija

File:
1 edited

Legend:

Unmodified
Added
Removed

  • imaps-frontend/src/pages/Signup/Signup.jsx

    r0c6b92a r79a0317  
    44import styles from "./Signup.module.css";
    55import Logo from "../../components/Logo/Logo";
     6import netconfig from "../../scripts/net/netconfig.js";
    67
    78export default function Signup() {
    … …  
    910  const [email, setEmail] = useState("");
    1011  const [password, setPassword] = useState("");
     12  const [confirmPassword, setConfirmPassword] = useState("");
    1113  const [message, setMessage] = useState("");
    12   const [messageType, setMessageType] = useState(""); // New state to manage message type
     14  const [messageType, setMessageType] = useState("");
    1315  const navigate = useNavigate();
    1416
    1517  const handleSubmit = async (e) => {
    1618    e.preventDefault();
     19
     20    if (password !== confirmPassword) {
     21      setMessageType("error");
     22      setMessage("Passwords do not match.");
     23      return;
     24    }
    1725
    1826    const payload = {
    … …  
    2331
    2432    try {
    25       const response = await fetch("http://localhost:8080/api/auth/register", {
     33      const response = await fetch(netconfig.auth.register, {
    2634        method: "POST",
    2735        headers: {
    … …  
    3543        setMessage("User registered successfully!");
    3644
    37         // Wait 3 seconds and then redirect to login page
    3845        setTimeout(() => {
    3946          navigate("/login");
    40         }, 3000);
     47        }, 1000);
    4148      } else if (response.status === 409) {
    4249        setMessageType("error");
    … …  
    5461
    5562  return (
    56     <div className={styles.wrapper}>
    57       <Logo></Logo>
    58       <div className={styles.illustration}>
    59         <img src={illustration} alt="illustration" />
     63      <div className={styles.wrapper}>
     64        <Logo></Logo>
     65        <div className={styles.illustration}>
     66          <img src={illustration} alt="illustration" />
     67        </div>
     68        <div className={styles.form}>
     69          <div className={styles.heading}>CREATE AN ACCOUNT</div>
     70          <form onSubmit={handleSubmit}>
     71            <div>
     72              <label htmlFor="name">Username</label>
     73              <input
     74                  type="text"
     75                  id="name"
     76                  value={name}
     77                  onChange={(e) => setName(e.target.value)}
     78                  placeholder="Enter your username"
     79                  required
     80              />
     81            </div>
     82            <div>
     83              <label htmlFor="email">E-Mail</label>
     84              <input
     85                  type="email"
     86                  id="email"
     87                  value={email}
     88                  onChange={(e) => setEmail(e.target.value)}
     89                  placeholder="Enter your email"
     90                  required
     91              />
     92            </div>
     93            <div>
     94              <label htmlFor="password">Password</label>
     95              <input
     96                  type="password"
     97                  id="password"
     98                  value={password}
     99                  onChange={(e) => setPassword(e.target.value)}
     100                  placeholder="Enter your password"
     101                  required
     102              />
     103            </div>
     104            <div>
     105              <label htmlFor="confirmPassword">Confirm Password</label>
     106              <input
     107                  type="password"
     108                  id="confirmPassword"
     109                  value={confirmPassword}
     110                  onChange={(e) => setConfirmPassword(e.target.value)}
     111                  placeholder="Confirm your password"
     112                  required
     113              />
     114            </div>
     115            <button type="submit">Submit</button>
     116            {message && (
     117                <p className={messageType === "success" ? styles.successMessage : styles.errorMessage}>
     118                  {message}
     119                </p>
     120            )}
     121          </form>
     122          <p>
     123            Have an account? <Link to="/Login"> Login </Link>
     124          </p>
     125        </div>
    60126      </div>
    61       <div className={styles.form}>
    62         <div className={styles.heading}>CREATE AN ACCOUNT</div>
    63         <form onSubmit={handleSubmit}>
    64           <div>
    65             <label htmlFor="name">Username</label>
    66             <input
    67               type="text"
    68               id="name"
    69               value={name}
    70               onChange={(e) => setName(e.target.value)}
    71               placeholder="Enter your username"
    72               required
    73             />
    74           </div>
    75           <div>
    76             <label htmlFor="email">E-Mail</label>
    77             <input
    78               type="email"
    79               id="email"
    80               value={email}
    81               onChange={(e) => setEmail(e.target.value)}
    82               placeholder="Enter your email"
    83               required
    84             />
    85           </div>
    86           <div>
    87             <label htmlFor="password">Password</label>
    88             <input
    89               type="password"
    90               id="password"
    91               value={password}
    92               onChange={(e) => setPassword(e.target.value)}
    93               placeholder="Enter your password"
    94               required
    95             />
    96           </div>
    97           <button type="submit">Submit</button>
    98 
    99           {/* Display message with appropriate styling */}
    100           {message && (
    101             <p className={messageType === "success" ? styles.successMessage : styles.errorMessage}>
    102               {message}
    103             </p>
    104           )}
    105           <h2 align="center" className={styles.or}>
    106             OR
    107           </h2>
    108         </form>
    109         <p>
    110           Have an account? <Link to="/Login"> Login </Link>
    111         </p>
    112       </div>
    113     </div>
    114127  );
    115128}
Note: See TracChangeset for help on using the changeset viewer.