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

F4 Finalna Verzija

Location:
imaps-frontend/src/pages/Signup
Files:
2 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}

  • imaps-frontend/src/pages/Signup/Signup.module.css

    r0c6b92a r79a0317  
    1 * {
    2   margin: 0;
    3   padding: 0;
    4   -webkit-box-sizing: border-box;
    5   box-sizing: border-box;
    6   font-family: sans-serif;
    7 }
    8 
    9 .illustration img {
    10   max-height: 500px;
    11   width: auto;
    12 }
    13 
    141.wrapper {
    15   display: -webkit-box;
    16   display: -ms-flexbox;
    172  display: flex;
    18   height: 100vh;
    19   -webkit-box-align: center;
    20   -ms-flex-align: center;
    21   align-items: center;
    22 }
    23 
    24 .wrapper p {
    25   font-size: 0.85rem;
    26   margin-top: 1rem;
     3  align-items: center; /* Vertically center content */
     4  justify-content: center; /* Horizontally center content */
     5  height: 100vh; /* Full viewport height */
     6  background-color: #ffffff; /* Light background */
     7  padding: 1rem;
     8  gap: 2rem; /* Space between form and image */
    279}
    2810
    2911.form {
    30   padding: 1.5rem;
    31   -ms-flex-preferred-size: 100vw;
    32   flex-basis: 100vw;
     12  padding: 2rem;
     13  background-color: white;
     14  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     15  border-radius: 10px;
     16  flex-basis: 100%;
     17  max-width: 400px; /* Restrict form width */
     18  text-align: center; /* Center text inside the form */
    3319}
    3420
    3521.form .heading {
    36   font-size: 1.5rem;
     22  font-size: 1.8rem;
    3723  font-weight: bold;
    38   text-align: center;
    39 }
    40 
    41 .or {
    42   margin: 1rem 0;
     24  color: #258de6;
     25  margin-bottom: 1rem;
    4326}
    4427
    4528.form label {
    4629  display: block;
    47   margin: 1.25rem 0 1rem 0;
     30  margin: 1.25rem 0 0.5rem 0;
     31  font-size: 0.9rem;
     32  font-weight: bold;
     33  color: #555;
    4834}
    4935
    … …  
    5137  height: 40px;
    5238  width: 100%;
    53   padding: 15px;
     39  padding: 10px 15px;
    5440  background-color: #f1f9ff;
    5541  border: 2px solid #bce0fd;
    5642  border-radius: 8px;
     43  font-size: 1rem;
     44}
     45
     46.form input:focus {
     47  outline: none;
     48  border-color: #258de6;
     49  background-color: #e6f4ff;
    5750}
    5851
    5952.form button {
    60   height: 40px;
     53  height: 45px;
    6154  width: 100%;
    6255  background-color: #258de6;
    … …  
    6558  letter-spacing: 1px;
    6659  border: none;
     60  margin-top: 1.5rem;
     61  font-weight: bold;
     62  border-radius: 8px;
     63  cursor: pointer;
     64  transition: all 0.2s ease;
     65}
     66
     67.form button:hover {
     68  filter: brightness(90%);
     69}
     70
     71.form button:active {
     72  transform: scale(0.96);
     73}
     74
     75.form p {
     76  text-align: center;
     77  margin-top: 1rem;
     78  font-size: 0.9rem;
     79}
     80
     81.form p a {
     82  color: #258de6;
     83  text-decoration: none;
     84  font-weight: bold;
     85}
     86
     87.form p a:hover {
     88  text-decoration: underline;
     89}
     90
     91.illustration {
     92  text-align: center; /* Center image container */
     93}
     94
     95.illustration img {
     96  max-width: 100%;
     97  height: auto;
     98  border-radius: 10px;
    6799  display: block;
    68   margin: 0 auto;
     100  margin: 0 auto; /* Center the image */
     101}
     102
     103@media (min-width: 768px) {
     104  .wrapper {
     105    flex-direction: row;
     106    gap: 4rem; /* Space between form and image */
     107  }
     108
     109  .form {
     110    flex-basis: 50%;
     111  }
     112
     113  .illustration {
     114    flex-basis: 50%;
     115  }
     116
     117  .illustration img {
     118    max-height: 600px;
     119    width: auto;
     120  }
     121}
     122
     123@media (max-width: 768px) {
     124  .wrapper {
     125    flex-direction: column;
     126    text-align: center; /* Center all content in column layout */
     127  }
     128
     129  .illustration {
     130    margin-bottom: 2rem; /* Space between image and form */
     131  }
     132}
     133
     134.errorMessage,
     135.successMessage {
     136  font-size: 0.9rem;
    69137  font-weight: bold;
    70   margin-top: 1.5rem;
     138  text-align: center;
     139  margin-top: 1rem;
     140  padding: 10px;
    71141  border-radius: 8px;
    72142}
    73143
    74 @media (min-width: 542px) {
    75   body {
    76     display: -webkit-box;
    77     display: -ms-flexbox;
    78     display: flex;
    79     -webkit-box-pack: center;
    80     -ms-flex-pack: center;
    81     justify-content: center;
    82   }
    83   .wrapper {
    84     display: -webkit-box;
    85     display: -ms-flexbox;
    86     display: flex;
    87     height: 100vh;
    88     -webkit-box-align: center;
    89     -ms-flex-align: center;
    90     align-items: center;
    91     -ms-flex-pack: distribute;
    92     justify-content: space-around;
    93     padding: 1.5rem;
    94     max-width: 1100px;
    95   }
    96   .form {
    97     -ms-flex-preferred-size: auto;
    98     flex-basis: auto;
    99   }
    100   .form input {
    101     width: 250px;
    102   }
    103   .illustration img {
    104     max-width: 80%;
    105     height: auto;
    106   }
     144.errorMessage {
     145  color: #e74c3c;
     146  background-color: #fbeaea;
     147  border: 1px solid #e74c3c;
    107148}
    108149
    109 @media (max-width: 680px) {
    110   .illustration {
    111     display: none;
    112   }
     150.successMessage {
     151  color: #2ecc71;
     152  background-color: #ebf9f1;
     153  border: 1px solid #2ecc71;
    113154}
    114 
    115 .signUp .illustration {
    116   order: 2;
    117   justify-self: flex-end;
    118   margin-left: 2rem;
    119 }
    120 
    121 button:hover {
    122   filter: brightness(95%);
    123 }
    124 
    125 button:active {
    126   transform: scale(0.98);
    127 }
    128 
    129 /* Error message style */
    130 .errorMessage {
    131   color: #e74c3c; /* Red color for error */
    132   background-color: #fbeaea;
    133   padding: 10px;
    134   border: 1px solid #e74c3c;
    135   border-radius: 5px;
    136   margin-top: 1rem;
    137   text-align: center;
    138   font-size: 0.9rem;
    139   font-weight: bold;
    140 }
    141 
    142 /* Success message style */
    143 .successMessage {
    144   color: #2ecc71; /* Green color for success */
    145   background-color: #ebf9f1;
    146   padding: 10px;
    147   border: 1px solid #2ecc71;
    148   border-radius: 5px;
    149   margin-top: 1rem;
    150   text-align: center;
    151   font-size: 0.9rem;
    152   font-weight: bold;
    153 }
Note: See TracChangeset for help on using the changeset viewer.