Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Charles #16

Merged
merged 3 commits into from
Apr 10, 2024
Merged

Charles #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8c123fb
Merge pull request #5 from CPUT-DEVS/main
mmpotulo28 Apr 2, 2024
09c02aa
Merge pull request #11 from CPUT-DEVS/main
mmpotulo28 Apr 2, 2024
c170ef9
Added sign up form to auth.html
CharlesLedwaba Apr 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 27 additions & 1 deletion pages/auth/auth.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,34 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevPost-Quiz | Authentication</title>
<link rel="stylesheet" href="styleAuth.css">
</head>
<body>

<div class = "wrapper">
<h1>Sign Up</h1>
<form action = "#">
<label for="UserName" >UserName:</label>
<input type="text" id="UserName" name="UserName" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
Comment on lines +22 to +23
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code_refinement): No client-side password confirmation logic.

While the form includes a field for confirming the password, there's no visible client-side logic to verify that the two passwords match before submission. Implementing this could improve user experience by catching mismatches before submission.


</form>
<div class="terms">
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to these <a href = "#">Terms & Conditions </a> </label>

</div>
<button type="submit">Sign Up</button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): Button placement outside form may cause submission issues.

Consider moving the 'Sign Up' button inside the

tags to ensure proper form submission behavior.

<div class="login">
<p>Already have an account? <a href = "login.html">Login</a></p>
</div>
</div>
</body>
</html>
29 changes: 29 additions & 0 deletions pages/auth/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DevPost-Quiz | Authentication</title>
<link rel="stylesheet" href="styleAuth.css">
</head>
<body>
<div class = "wrapper">
<h1>Log in</h1>
<form action = "#">
<label for="UserName" >UserName:</label>
<input type="text" id="UserName" name="UserName" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<div class="recover">
<a href = "#">Forgot Password?</a>
</div>

</form>
<button type="submit">Sign Up </button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (typo): Incorrect button label in login form.

The button in the login form is labeled 'Sign Up' instead of 'Log in'. This should be corrected to avoid user confusion.

<div class="login">
<p>No account? <a href = "./auth.html">Sign Up</a></p>
</div>
</div>
</body>
</html>
87 changes: 87 additions & 0 deletions pages/auth/styleAuth.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (performance): Consider local font hosting for performance and reliability.

Using an external link for fonts can introduce dependencies on third-party servers. Hosting fonts locally might improve load times and reliability.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {

background: #dfe9ef;
}
.wrapper {
width: 230px;
padding: 2rem 1rem;
margin: 10px auto;
background: #ffffff;
border-radius: 10px;
text-align: center;
box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2rem;
color: #000000;
margin-bottom: 1rem;
}
form input {
width: 90%;
padding: 6px 8px ;
margin: 4px 0;
border-radius: 10px;
background: #ebebeb;
border: 1px solid #000000;
outline: none;
}
button {
font-size: 1rem;
width: 50%;
padding: 8px;
margin: 8px 0;
border-radius: 10px;
background: #000000;
color: #ffffff;
border: none;
cursor: pointer;
outline: none;
}
button:hover {
background: #000000;
color: #236cf3;
}
input:focus {
border: 1px solid #236cf3;
}
.terms {
margin-top: 0.2rem;
}
.terms input {
margin-left: 0.5rem;
vertical-align: middle;
cursor: pointer;
}
.terms label {
font-size: 0.9rem;
}
.terms a {
text-decoration: none;
color: #236cf3;
}
.login{
font-size: 0.8rem;
margin-top: 1rem;
color:#636363 ;
}
.login a {
text-decoration: none;
color: #236cf3;
}
.recover {
font-size: 0.8rem;
margin: 0.5rem;
color:#636363 ;
text-decoration: none;
}
.recover a {
text-decoration: none;
color: #636363;
}
Loading