From dd84b2cfa566d5b98c0d51bc72674d6d162a5f4c Mon Sep 17 00:00:00 2001
From: joshrandall8478 <joshrandall8478@gmail.com>
Date: Tue, 18 Mar 2025 16:36:33 -0400
Subject: [PATCH] auth pages finished
---
src/login.tsx | 34 +++----
src/resetPassword.tsx | 37 ++++++--
src/signup.tsx | 62 ++++++-------
src/styles/auth.scss | 156 +++++++++++++++++++++++++++++++
src/styles/global.scss | 43 +++++++++
src/styles/login.scss | 147 ------------------------------
src/styles/resetPassword.scss | 87 ------------------
src/styles/signup.scss | 167 ----------------------------------
8 files changed, 274 insertions(+), 459 deletions(-)
create mode 100644 src/styles/auth.scss
delete mode 100644 src/styles/login.scss
delete mode 100644 src/styles/resetPassword.scss
delete mode 100644 src/styles/signup.scss
diff --git a/src/login.tsx b/src/login.tsx
index 2ad219f..03049d7 100644
--- a/src/login.tsx
+++ b/src/login.tsx
@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
-import "./styles/login.scss";
+import "./styles/auth.scss";
import validation from "./loginValidation";
import axios from "axios";
@@ -101,15 +101,15 @@ const Login: React.FC = () => {
};
return (
- <div className="login__body">
- <div className="login__form">
- <h2>Login</h2>
+ <div className="auth__body">
+ <div className="auth__form">
+ <h2 className="auth__title">Login</h2>
{successMessage && (
- <div className="login__success-message">{successMessage}</div> // Show success message
+ <div className="auth__success-message">{successMessage}</div> // Show success message
)}
<form onSubmit={handleSubmit}>
- <div className="login__container">
- <label htmlFor="usernameOrEmail" className="login__label">
+ <div className="auth__container">
+ <label htmlFor="usernameOrEmail">
<strong>User Id</strong>
</label>
<input
@@ -118,14 +118,14 @@ const Login: React.FC = () => {
value={usernameOrEmail} // Can be username OR email
onChange={handleUsernameOrEmailChange}
placeholder="Enter Username OR Email"
- className="login__form-control"
+ className="auth__form-control"
/>
{errors.usernameOrEmail && (
- <span className="login__text-danger">{errors.usernameOrEmail}</span>
+ <span className="auth__text-danger">{errors.usernameOrEmail}</span>
)}
</div>
- <div className="login__container">
- <label htmlFor="password" className="login__label">
+ <div className="auth__container">
+ <label htmlFor="password">
<strong>Password</strong>
</label>
<input
@@ -134,20 +134,20 @@ const Login: React.FC = () => {
value={password}
onChange={handlePasswordChange}
placeholder="Enter Password"
- className="login__form-control"
+ className="auth__form-control"
/>
{errors.password && (
- <span className="login__text-danger">{errors.password}</span>
+ <span className="auth__text-danger">{errors.password}</span>
)}
</div>
- <div className="login__buttons-container">
- <button type="submit" className="login__btn login__btn--success">
+ <div className="auth__buttons-container">
+ <button type="submit" className="button success">
Login
</button>
- <Link to="/reset-password" className="login__button">
+ <Link to="/reset-password" className="button danger">
Reset Password
</Link>
- <Link to="/signup" className="login__button">
+ <Link to="/signup" className="button primary">
Create Account
</Link>
</div>
diff --git a/src/resetPassword.tsx b/src/resetPassword.tsx
index 99a9014..264ab8c 100644
--- a/src/resetPassword.tsx
+++ b/src/resetPassword.tsx
@@ -1,6 +1,6 @@
import React, { useState } from "react";
import axios from "axios";
-import "./styles/resetPassword.scss";
+import "./styles/auth.scss";
import { Link, useNavigate } from "react-router-dom";
// let uploadServer = "http://localhost:3001";
@@ -54,12 +54,15 @@ const ResetPassword: React.FC = () => {
};
return (
- <div className="reset-password__body">
- <div className="reset-password__form">
+ <div className="auth__body">
+ <div className="auth__form">
<h2>Reset Password</h2>
- {message && <div className="reset-password__success">{message}</div>}
- {error && <div className="reset-password__error">{error}</div>}
+ {message && <div className="auth__success">{message}</div>}
+ {error && <div className="auth__error">{error}</div>}
<form onSubmit={handleSubmit}>
+
+ <div className="auth__container">
+
<label>
<strong>Email:</strong>
</label>
@@ -69,7 +72,11 @@ const ResetPassword: React.FC = () => {
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email"
required
+ className="auth__form-control"
/>
+ </div>
+
+<div className="auth__container">
<label>
<strong>New Password:</strong>
@@ -80,7 +87,11 @@ const ResetPassword: React.FC = () => {
onChange={(e) => setNewPassword(e.target.value)}
placeholder="Enter new password"
required
+ className="auth__form-control"
/>
+</div>
+
+<div className="auth__container">
<label>
<strong>Confirm Password:</strong>
@@ -91,15 +102,21 @@ const ResetPassword: React.FC = () => {
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="Confirm new password"
required
+ className="auth__form-control"
/>
+</div>
- <button type="submit">Reset Password</button>
- </form>
-
- <div className="reset__buttons-container">
+
+ <button type="submit" className="button danger">Reset Password</button>
+ <br /> <br />
<Link to="/login">
- <button className="reset__button">Go to Login</button>
+ <button className="button primary">Go to Login</button>
</Link>
+
+ </form>
+
+ <div>
+
</div>
</div>
</div>
diff --git a/src/signup.tsx b/src/signup.tsx
index e59ac9b..a2845be 100644
--- a/src/signup.tsx
+++ b/src/signup.tsx
@@ -1,6 +1,6 @@
import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
-import "./styles/signup.scss";
+import "./styles/auth.scss";
import validation from "./signupValidation";
import axios from "axios";
@@ -79,19 +79,19 @@ const Signup: React.FC = () => {
};
return (
- <div className="signup__body">
- <div className="signup__form">
+ <div className="auth__body">
+ <div className="auth__form">
<h2>Sign up</h2>
- <div className="signup__container">
+ <div className="auth__container">
{successMessage && (
- <div className="signup__success-message">{successMessage}</div>
+ <div className="auth__success-message">{successMessage}</div>
)}
{errorMessage && (
- <div className="signup__error-message">{errorMessage}</div>
+ <div className="auth__error-message">{errorMessage}</div>
)}
<form onSubmit={handleSubmit}>
- <div className="signup__form-group">
- <label htmlFor="name" className="signup__label">
+ <div className="auth__form-group">
+ <label htmlFor="name" className="auth__label">
<strong>Username</strong>
</label>
<input
@@ -100,15 +100,15 @@ const Signup: React.FC = () => {
value={username}
onChange={(e) => setName(e.target.value)}
placeholder="Enter Username"
- className="signup__form-control"
+ className="auth__form-control"
/>
{errors.username && (
- <span className="signup__text-danger">{errors.username}</span>
+ <span className="auth__text-danger">{errors.username}</span>
)}
</div>
- <div className="signup__form-group">
- <label htmlFor="email" className="signup__label">
+ <div className="auth__form-group">
+ <label htmlFor="email" className="auth__label">
<strong>Email</strong>
</label>
<input
@@ -117,15 +117,15 @@ const Signup: React.FC = () => {
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter Email"
- className="signup__form-control"
+ className="auth__form-control"
/>
{errors.email && (
- <span className="signup__text-danger">{errors.email}</span>
+ <span className="auth__text-danger">{errors.email}</span>
)}
</div>
- <div className="signup__form-group">
- <label htmlFor="password" className="signup__label">
+ <div className="auth__form-group">
+ <label htmlFor="password" className="auth__label">
<strong>Password</strong>
</label>
<input
@@ -134,15 +134,15 @@ const Signup: React.FC = () => {
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter Password"
- className="signup__form-control"
+ className="auth__form-control"
/>
{errors.password && (
- <span className="signup__text-danger">{errors.password}</span>
+ <span className="auth__text-danger">{errors.password}</span>
)}
</div>
- <div className="signup__form-group">
- <label htmlFor="confirmPassword" className="signup__label">
+ <div className="auth__form-group">
+ <label htmlFor="confirmPassword" className="auth__label">
<strong>Confirm Password</strong>
</label>
<input
@@ -151,37 +151,37 @@ const Signup: React.FC = () => {
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder="Confirm Password"
- className="signup__form-control"
+ className="auth__form-control"
/>
{errors.confirmPassword && (
- <span className="signup__text-danger">
+ <span className="auth__text-danger">
{errors.confirmPassword}
</span>
)}
</div>
{/* Terms and Conditions Checkbox */}
- <div className="signup__terms">
+ <div className="auth__terms">
<input
type="checkbox"
id="agreeToTerms"
checked={agreeToTerms}
onChange={() => setAgreeToTerms(!agreeToTerms)}
/>
- <label htmlFor="agreeToTerms" className="signup__terms-label">
- I agree to the <Link to="/terms">Terms and Conditions</Link>
+ <label htmlFor="agreeToTerms" className="auth__terms-label">
+ I agree to the <Link className="terms-text" to="/terms">Terms and Conditions</Link>
</label>
</div>
- <div className="signup__buttons-container">
- <button
+ <div className="auth__buttons-container">
+ <button
type="submit"
- className="signup__btn signup__btn--success"
+ className={`button ${!agreeToTerms ? "greyed" : "success"}`}
disabled={!agreeToTerms} // Disable the button if the checkbox is unchecked
- >
+ >
Sign up
- </button>
- <Link to="/login" className="signup__button">
+ </button>
+ <Link to="/login" className="button primary">
Log in
</Link>
</div>
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
new file mode 100644
index 0000000..e8d14b1
--- /dev/null
+++ b/src/styles/auth.scss
@@ -0,0 +1,156 @@
+@use 'global.scss' as *;
+
+.auth__body{
+ margin-top: 75px;
+ width: 90vw;
+ max-height: 90vh;
+ margin: 0px auto;
+ display: flex;
+ flex-direction: rows;
+ color: white;
+}
+
+.auth__container {
+ margin-bottom: 1rem;
+ width: 100%;
+ }
+.auth__form{
+ // display: flex;
+// flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+ // background-image: $backgroundImageUrl;
+ background-position: top;
+ background-repeat: no-repeat;
+// background-size: 300px;
+ // background-color: #e0f7e0;
+
+ padding: 20px;
+ max-height: 40vh;
+}
+
+
+.auth__form-control {
+ width: 90%;
+ padding: 12px;
+ margin-top: 8px;
+ margin-bottom: 15px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ font-size: 1rem;
+ color: #ddd;
+ background-color: #000;
+ }
+
+.auth__title{
+ font-size:3rem;
+ // color: $uploadColor;
+ margin-bottom: 20px;
+ // text-align: center;
+ }
+
+
+ .auth__text-danger {
+ color: #e74c3c;
+ font-size: 0.875rem;
+ }
+
+ .auth__btn {
+ // width: 100%;
+ padding: 12px;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 1rem;
+ color: white;
+ border: none;
+ transition: background-color 0.3s ease;
+ // margin-bottom: 1rem;
+ }
+
+ .auth__btn--success {
+ background-color: #28a745;
+ }
+
+ .auth__btn--success:hover {
+ background-color: #218838;
+ }
+
+ .auth__btn--home{
+ background-color: #235523;
+ }
+
+ .auth__btn--home:hover{
+ background-color: #4b954b;
+ }
+
+ .auth__buttons-container {
+ display: flex;
+ flex-direction: column;
+ // align-items: center;
+ // justify-content: center;
+ // width: 100%;
+ gap: 10px;
+ }
+
+ .auth__button {
+ // width: 95%;
+ display: inline-block;
+ margin-top: 1rem;
+ padding: 10px;
+ border: none;
+ background-color: #007bff;
+ color: white;
+ font-size: 1rem;
+ cursor: pointer;
+ border-radius: 5px;
+ text-align: center;
+ text-decoration: none;
+ }
+
+ .auth__button:hover {
+ background-color: #0056b3;
+ }
+
+ .auth__success-message {
+ font-size: 1rem;
+ color: #ddd;
+ // background-color: #eaf7ea;
+ border: 3px solid #28a745;
+ padding: 10px;
+ border-radius: 15px;
+ margin-bottom: 20px;
+ text-align: center;
+ }
+
+ .terms-text{
+ color: #ddd;
+ &:visited{
+ color: #ddd;
+ }
+
+ }
+
+
+ .auth__terms {
+ display: inline-flex;
+ align-items: center;
+ margin-bottom: 1rem;
+ width: 75%;
+ }
+
+ .auth__terms-label {
+ font-size: 14px;
+ margin: 0;
+ white-space: nowrap;
+ padding-left: 8px;
+ }
+
+ .auth__label {
+ font-size: 1rem;
+ color: #ddd;
+ }
+ button{
+ text-align: left;
+ }
+
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 56f5dfc..2e38add 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -48,6 +48,49 @@ body {
}
}
+.button.success{
+ // background: #28a745;
+ color: #fff;
+ border: 3px solid #28a745;
+ &:hover{
+ background: #28a745;
+ color: #fff;
+ border: 3px solid #28a745;
+ }
+}
+.button.danger{
+ // background: #e74c3c;
+ color: #fff;
+ border: 3px solid #e74c3c;
+ &:hover{
+ background: #e74c3c;
+ color: #fff;
+ border: 3px solid #e74c3c;
+ }
+}
+
+.button.primary{
+ // background: #007bff;
+ color: #fff;
+ border: 3px solid #007bff;
+ &:hover{
+ background: #007bff;
+ color: #fff;
+ border: 3px solid #007bff;
+ }
+}
+
+.button.warning{
+ // background: #ffc107;
+ color: #fff;
+ border: 3px solid #ffc107;
+ &:hover{
+ background: #ffc107;
+ color: #fff;
+ border: 3px solid #ffc107;
+ }
+}
+
.button.greyed{
cursor:default;
color: #4b4b4b;
diff --git a/src/styles/login.scss b/src/styles/login.scss
deleted file mode 100644
index 530d1be..0000000
--- a/src/styles/login.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-@use 'global.scss' as *;
-
-.login__body {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100vh;
- background: $background-color;
- margin: 0;
-}
-
-.login__form {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- border-radius: 10px;
- padding: 40px;
- background: white;
- box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
- width: 100%;
- max-width: 400px;
-}
-
-.login__form h2 {
- font-size: 1.8rem;
- color: #333;
- margin-bottom: 20px;
-}
-
-.login__container {
- margin-bottom: 1rem;
- width: 100%;
-}
-
-.login__label {
- font-size: 1rem;
- color: #333;
-}
-
-.login__form-control {
- width: 90%;
- padding: 12px;
- margin-top: 8px;
- margin-bottom: 15px;
- border: 1px solid #ccc;
- border-radius: 5px;
- font-size: 1rem;
-}
-
-.login__form-control:focus {
- outline: none;
- border-color: #28a745;
- box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
-}
-
-.login__text-danger {
- color: #e74c3c;
- font-size: 0.875rem;
-}
-
-.login__btn {
- width: 100%;
- padding: 12px;
- border-radius: 5px;
- cursor: pointer;
- font-size: 1rem;
- color: white;
- border: none;
- transition: background-color 0.3s ease;
- margin-bottom: 1rem;
-}
-
-.login__btn--success {
- background-color: #28a745;
-}
-
-.login__btn--success:hover {
- background-color: #218838;
-}
-
-.login__btn--home{
- background-color: #235523;
-}
-
-.login__btn--home:hover{
- background-color: #4b954b;
-}
-
-.login__buttons-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- width: 100%;
- gap: 10px;
-}
-
-.login__button {
- width: 95%;
- display: inline-block;
- margin-top: 1rem;
- padding: 10px;
- border: none;
- background-color: #007bff;
- color: white;
- font-size: 1rem;
- cursor: pointer;
- border-radius: 5px;
- text-align: center;
- text-decoration: none;
-}
-
-.login__button:hover {
- background-color: #0056b3;
-}
-
-.login__success-message {
- font-size: 1rem;
- color: #28a745;
- background-color: #eaf7ea;
- padding: 10px;
- border-radius: 5px;
- margin-bottom: 20px;
- text-align: center;
-}
-
-@media (max-width: 768px) {
- .login__form {
- padding: 20px;
- width: 90%;
- }
-
- .login__form h2 {
- font-size: 1.6rem;
- }
-
- .login__form-control {
- padding: 10px;
- font-size: 0.9rem;
- }
-
- .login__btn {
- padding: 10px;
- font-size: 0.9rem;
- }
-}
diff --git a/src/styles/resetPassword.scss b/src/styles/resetPassword.scss
deleted file mode 100644
index 229b34e..0000000
--- a/src/styles/resetPassword.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@use 'global.scss' as *;
-
-.reset-password__body {
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- min-height: 100vh;
- background-color: $background-color;
-}
-
-.reset-password__form {
- background: white;
- padding: 20px;
- border-radius: 10px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- width: 320px;
- text-align: left;
-}
-
-input {
- width: 90%;
- padding: 10px;
- margin: 8px 0;
- border: 1px solid #ccc;
- border-radius: 5px;
-}
-
-.login-buttons {
- background-color: #4caf50;
- color: white;
- border: none;
- font-size: 1rem;
- border-radius: 5px;
- cursor: pointer;
- transition: background-color 0.3s ease;
-}
-
-button:hover {
- background-color: #45a049;
-}
-
-.reset-password__success {
- font-size: 1rem;
- color: #28a745;
- background-color: #eaf7ea;
- padding: 10px;
- border-radius: 5px;
- margin-bottom: 20px;
- text-align: center;
-}
-
-.reset-password__error {
- color: #ff4d4f;
- background-color: #ffeaea;
- padding: 10px;
- margin-bottom: 15px;
- border: 1px solid #ff4d4f;
- border-radius: 4px;
- text-align: center;
- font-weight: bold;
-}
-
-.reset__buttons-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- width: 100%;
-}
-
-.reset__button {
- width: 97%;
- display: inline-block;
- margin-top: 1rem;
- padding: 10px;
- border: none;
- background-color: #007bff;
- color: white;
- font-size: 1rem;
- cursor: pointer;
- border-radius: 5px;
- text-align: center;
-}
-
-.reset__button:hover {
- background-color: #0056b3;
-}
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
deleted file mode 100644
index aa53a93..0000000
--- a/src/styles/signup.scss
+++ /dev/null
@@ -1,167 +0,0 @@
-@use 'global.scss' as *;
-
-// signup.scss
-
-.signup__body {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 100vh;
- background: $background-color;
- margin: 0;
-}
-
-.signup__form {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- border-radius: 10px;
- padding: 40px;
- background: white;
- box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
- width: 100%;
- max-width: 400px;
-}
-
-.signup__form h2 {
- font-size: 1.8rem;
- color: #333;
- margin-bottom: 20px;
-}
-
-.signup__container {
- margin-bottom: 1rem;
- width: 100%;
-}
-
-.signup__label {
- font-size: 1rem;
- color: #333;
-}
-
-.signup__form-control {
- width: 90%;
- padding: 12px;
- margin-top: 8px;
- margin-bottom: 15px;
- border: 1px solid #ccc;
- border-radius: 5px;
- font-size: 1rem;
-}
-
-.signup__form-control:focus {
- outline: none;
- border-color: #28a745;
- box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
-}
-
-.signup__text-danger {
- color: #e74c3c;
- font-size: 0.875rem;
-}
-
-.signup__btn {
- width: 100%;
- padding: 12px;
- border-radius: 5px;
- cursor: pointer;
- font-size: 1rem;
- color: white;
- border: none;
- transition: background-color 0.3s ease;
- margin-bottom: 1rem;
-}
-
-.signup__btn--success {
- background-color: #28a745;
-}
-
-.signup__btn--success:hover {
- background-color: #218838;
-}
-
-.signup__buttons-container {
- display: flex;
- flex-direction: column;
- justify-content: center;
- width: 100%;
-}
-
-.signup__button {
- display: inline-block;
- margin-top: 1rem;
- padding: 10px;
- border: none;
- background-color: #007bff;
- color: white;
- font-size: 1rem;
- cursor: pointer;
- border-radius: 5px;
- text-align: center;
- text-decoration: none;
-}
-
-.signup__button:hover {
- background-color: #0056b3;
-}
-
-.signup__success-message {
- font-size: 1rem;
- color: #28a745;
- background-color: #eaf7ea;
- padding: 10px;
- border-radius: 5px;
- margin-bottom: 20px;
- text-align: center;
-}
-
-@media (max-width: 768px) {
- .signup__form {
- padding: 20px;
- width: 90%;
- }
-
- .signup__form h2 {
- font-size: 1.6rem;
- }
-
- .signup__form-control {
- padding: 10px;
- font-size: 0.9rem;
- }
-
- .signup__btn {
- padding: 10px;
- font-size: 0.9rem;
- }
-}
-.signup__error-message {
- color: #ff4d4f;
- background-color: #ffeaea;
- padding: 10px;
- margin-bottom: 15px;
- border: 1px solid #ff4d4f;
- border-radius: 4px;
- text-align: center;
- font-weight: bold;
-}
-.signup__btn:disabled {
- background-color: #ccc;
- cursor: not-allowed;
- opacity: 0.7;
-}
-
-.signup__terms {
- display: inline-flex;
- align-items: center;
- margin-bottom: 1rem;
- width: 75%;
-}
-
-.signup__terms-label {
- font-size: 14px;
- margin: 0;
- white-space: nowrap;
- padding-left: 8px;
-}
--
GitLab