-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #31 from erland-syafiq/metadata
Fixed login page
- Loading branch information
Showing
2 changed files
with
113 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| "use client" | ||
|
|
||
|
|
||
| import { isValidEmail } from '../utils/validation'; | ||
|
|
||
| import React, { useState } from 'react'; | ||
|
|
||
| export default function LoginForm() { | ||
| const [formData, setFormData] = useState({ email: '', password: '' }); | ||
| const [rememberMe, setRememberMe] = useState(false); | ||
| const [errors, setErrors] = useState([]); | ||
|
|
||
| const handleInputChange = (e) => { | ||
| const { name, value } = e.target; | ||
| setFormData({ ...formData, [name]: value }); | ||
| }; | ||
|
|
||
| const handleSubmit = (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| if (!validateForm()) return; | ||
|
|
||
| try { | ||
| // Attempt login | ||
| } | ||
| catch(e) { | ||
| console.error("There was an error submitting the form!", e); | ||
| } | ||
|
|
||
| }; | ||
|
|
||
| function validateForm() { | ||
| const newErrors = {}; | ||
|
|
||
| if (!formData.advisorEmail) newErrors.email = "Email is required"; | ||
| if (!isValidEmail(formData.advisorEmail)) newErrors.email = "Email is invalid"; | ||
| if (!formData.password) newErrors.password = "Password is required"; | ||
|
|
||
| setErrors(newErrors); | ||
| return Object.keys(newErrors).length === 0; | ||
| } | ||
|
|
||
| return ( | ||
| <form id="account" method="post" onSubmit={handleSubmit}> | ||
| <h4>Log In for staff</h4> | ||
| <hr /> | ||
| <div className="form-floating"> | ||
| <label>Email</label> | ||
| <input | ||
| type="email" | ||
| name="email" | ||
| className="form-control" | ||
| autoComplete="username" | ||
| aria-required="true" | ||
| value={formData.email} | ||
| onChange={handleInputChange} | ||
| placeholder="Email" | ||
| /> | ||
| <span className="text-danger">{errors.email}</span> | ||
| </div> | ||
| <div className="form-floating"> | ||
| <label>Password</label> | ||
| <input | ||
| type="password" | ||
| name="password" | ||
| className="form-control" | ||
| autoComplete="current-password" | ||
| aria-required="true" | ||
| value={formData.password} | ||
| onChange={handleInputChange} | ||
| placeholder="Password" | ||
| /> | ||
| <span className="text-danger">{errors.password}</span> | ||
| </div> | ||
| <div className="form-group custom-control custom-checkbox"> | ||
| <input | ||
| type="checkbox" | ||
| className="custom-control-input" | ||
| id="rememberMe" | ||
| checked={rememberMe} | ||
| onChange={(e) => setRememberMe(e.target.checked)} | ||
| /> | ||
| <label className="custom-control-label" htmlFor="rememberMe"> | ||
| Remember me? | ||
| </label> | ||
| </div> | ||
| <div> | ||
| <button id="login-submit" type="submit" className="w-100 btn btn-lg btn-primary"> | ||
| Log in | ||
| </button> | ||
| </div> | ||
| <div> | ||
| <p> | ||
| <a id="forgot-password" href="/forgot-password"> | ||
| Forgot your password? | ||
| </a>{' '} | ||
| |{' '} | ||
| <a href="/staff-register"> | ||
| Register as a new user | ||
| </a>{' '} | ||
| |{' '} | ||
| <a id="resend-confirmation" href="/resend-email-confirmation"> | ||
| Resend email confirmation | ||
| </a> | ||
| </p> | ||
| </div> | ||
| </form> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,119 +1,21 @@ | ||
| "use client" | ||
|
|
||
| import React, { useState } from 'react'; | ||
| import React from "react"; | ||
| import './LoginPage.css'; | ||
| import { isValidEmail } from '../utils/validation'; | ||
| import LoginForm from "./LoginForm"; | ||
|
|
||
| export const metadata = { | ||
| title: "Staff login", | ||
| description: "Login page for staff.", | ||
| noindex: true | ||
| } | ||
|
|
||
| export default function Login () { | ||
| const [formData, setFormData] = useState({ email: '', password: '' }); | ||
| const [rememberMe, setRememberMe] = useState(false); | ||
| const [errors, setErrors] = useState([]); | ||
|
|
||
| const handleInputChange = (e) => { | ||
| const { name, value } = e.target; | ||
| setFormData({ ...formData, [name]: value }); | ||
| }; | ||
|
|
||
| const handleSubmit = (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| if (!validateForm()) return; | ||
|
|
||
| try { | ||
| // Attempt login | ||
| } | ||
| catch(e) { | ||
| console.error("There was an error submitting the form!", e); | ||
| } | ||
|
|
||
| }; | ||
|
|
||
| function validateForm() { | ||
| const newErrors = {}; | ||
|
|
||
| if (!formData.advisorEmail) newErrors.email = "Email is required"; | ||
| if (!isValidEmail(formData.advisorEmail)) newErrors.email = "Email is invalid"; | ||
| if (!formData.password) newErrors.password = "Password is required"; | ||
|
|
||
| setErrors(newErrors); | ||
| return Object.keys(newErrors).length === 0; | ||
| } | ||
| export default function LoginPage () { | ||
|
|
||
| return ( | ||
| <section className="container login d-flex justify-content-center align-items-center"> | ||
| <div className="row"> | ||
| <div className="loginBox"> | ||
| <h1>Staff Sign In</h1> | ||
| <form id="account" method="post" onSubmit={handleSubmit}> | ||
| <h4>Log In for staff</h4> | ||
| <hr /> | ||
| <div className="form-floating"> | ||
| <label>Email</label> | ||
| <input | ||
| type="email" | ||
| name="email" | ||
| className="form-control" | ||
| autoComplete="username" | ||
| aria-required="true" | ||
| value={formData.email} | ||
| onChange={handleInputChange} | ||
| placeholder="Email" | ||
| /> | ||
| <span className="text-danger">{errors.email}</span> | ||
| </div> | ||
| <div className="form-floating"> | ||
| <label>Password</label> | ||
| <input | ||
| type="password" | ||
| name="password" | ||
| className="form-control" | ||
| autoComplete="current-password" | ||
| aria-required="true" | ||
| value={formData.password} | ||
| onChange={handleInputChange} | ||
| placeholder="Password" | ||
| /> | ||
| <span className="text-danger">{errors.password}</span> | ||
| </div> | ||
| <div className="form-group custom-control custom-checkbox"> | ||
| <input | ||
| type="checkbox" | ||
| className="custom-control-input" | ||
| id="rememberMe" | ||
| checked={rememberMe} | ||
| onChange={(e) => setRememberMe(e.target.checked)} | ||
| /> | ||
| <label className="custom-control-label" htmlFor="rememberMe"> | ||
| Remember me? | ||
| </label> | ||
| </div> | ||
| <div> | ||
| <button id="login-submit" type="submit" className="w-100 btn btn-lg btn-primary"> | ||
| Log in | ||
| </button> | ||
| </div> | ||
| <div> | ||
| <p> | ||
| <a id="forgot-password" href="/forgot-password"> | ||
| Forgot your password? | ||
| </a>{' '} | ||
| |{' '} | ||
| <a href="/staff-register"> | ||
| Register as a new user | ||
| </a>{' '} | ||
| |{' '} | ||
| <a id="resend-confirmation" href="/resend-email-confirmation"> | ||
| Resend email confirmation | ||
| </a> | ||
| </p> | ||
| </div> | ||
| </form> | ||
| <LoginForm /> | ||
| <h5>For any issues, contact [email protected]</h5> | ||
| </div> | ||
| </div> | ||
|
|
||