-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Reformat with prettier and fix signup page mandatory fields
- Loading branch information
1 parent
2831bd9
commit 9afc75c
Showing
14 changed files
with
11,525 additions
and
16,127 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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,19 +1,18 @@ | ||
| import React from 'react'; | ||
| import Header from './Header'; | ||
| import '../static/styles/styles.scss' | ||
| import HamburgerMenu from './Hamburger'; | ||
| import React from "react"; | ||
| import Header from "./Header"; | ||
| import "../static/styles/styles.scss"; | ||
| import HamburgerMenu from "./Hamburger"; | ||
| function NotFound() { | ||
|
|
||
| return ( | ||
| <div className={`container`}> | ||
| <Header /> | ||
| <HamburgerMenu home="Home" /> | ||
| <div className='instruction'> | ||
| <h1>404 Not Found</h1> | ||
| <p>The page you are looking for does not exist.</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| return ( | ||
| <div className={`container`}> | ||
| <Header /> | ||
| <HamburgerMenu home="Home" /> | ||
| <div className="instruction"> | ||
| <h1>404 Not Found</h1> | ||
| <p>The page you are looking for does not exist.</p> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default NotFound; | ||
| export default NotFound; |
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,82 +1,105 @@ | ||
| import React, { useState, useEffect, useRef } from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
| import { collection } from 'firebase/firestore'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { auth, db } from '../firebase'; | ||
| import { query, where, getDocs } from 'firebase/firestore'; | ||
| import { sendPasswordResetEmail } from 'firebase/auth'; | ||
| import Header from './Header'; | ||
| import '../static/styles/styles.scss' | ||
| import HamburgerMenu from './Hamburger'; | ||
| import LoadingSpinner from './LoadingSpinner'; | ||
| import React, { useState, useEffect, useRef } from "react"; | ||
| import { Link } from "react-router-dom"; | ||
| import { collection } from "firebase/firestore"; | ||
| import { useNavigate } from "react-router-dom"; | ||
| import { auth, db } from "../firebase"; | ||
| import { query, where, getDocs } from "firebase/firestore"; | ||
| import { sendPasswordResetEmail } from "firebase/auth"; | ||
| import Header from "./Header"; | ||
| import "../static/styles/styles.scss"; | ||
| import HamburgerMenu from "./Hamburger"; | ||
| import LoadingSpinner from "./LoadingSpinner"; | ||
| function Forgot() { | ||
| const navigate = useNavigate(); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [isSent, setIsSent] = useState(false); | ||
| const [email, setEmail] = useState(''); | ||
| const emailRef = useRef(); | ||
| const handleSubmit = async (event) => { | ||
| event.preventDefault(); | ||
| setIsLoading(true); | ||
| try { | ||
| const usernameQuery = query(collection(db, process.env.REACT_APP_FIREBASE_COLLECTION_NAME), where(process.env.REACT_APP_USERNAME_KEY, '==', email)); | ||
| const emailQuery = query(collection(db, process.env.REACT_APP_FIREBASE_COLLECTION_NAME), where(process.env.REACT_APP_EMAIL_KEY, '==', email)); | ||
| const [, emailDoc] = await Promise.all([getDocs(usernameQuery), getDocs(emailQuery)]); | ||
| if (emailDoc.size === 0) { | ||
| alert('Email doesnt exist'); | ||
| return; | ||
| } | ||
| const navigate = useNavigate(); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [isSent, setIsSent] = useState(false); | ||
| const [email, setEmail] = useState(""); | ||
| const emailRef = useRef(); | ||
| const handleSubmit = async (event) => { | ||
| event.preventDefault(); | ||
| setIsLoading(true); | ||
| try { | ||
| const usernameQuery = query( | ||
| collection(db, process.env.REACT_APP_FIREBASE_COLLECTION_NAME), | ||
| where(process.env.REACT_APP_USERNAME_KEY, "==", email) | ||
| ); | ||
| const emailQuery = query( | ||
| collection(db, process.env.REACT_APP_FIREBASE_COLLECTION_NAME), | ||
| where(process.env.REACT_APP_EMAIL_KEY, "==", email) | ||
| ); | ||
| const [, emailDoc] = await Promise.all([ | ||
| getDocs(usernameQuery), | ||
| getDocs(emailQuery), | ||
| ]); | ||
| if (emailDoc.size === 0) { | ||
| alert("Email doesnt exist"); | ||
| return; | ||
| } | ||
|
|
||
| await sendPasswordResetEmail(auth, email); | ||
| setIsSent(true); | ||
| } catch (error) { | ||
| console.error(error); | ||
| } finally { | ||
| setIsLoading(false); | ||
| } | ||
| }; | ||
| await sendPasswordResetEmail(auth, email); | ||
| setIsSent(true); | ||
| } catch (error) { | ||
| console.error(error); | ||
| } finally { | ||
| setIsLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| const unsubscribe = auth.onAuthStateChanged((user) => { | ||
| if (user) { | ||
| navigate('/'); | ||
| } else { | ||
| return; | ||
| } | ||
| }); | ||
| useEffect(() => { | ||
| const unsubscribe = auth.onAuthStateChanged((user) => { | ||
| if (user) { | ||
| navigate("/"); | ||
| } else { | ||
| return; | ||
| } | ||
| }); | ||
|
|
||
| return () => unsubscribe(); | ||
| }, [navigate]); | ||
| return () => unsubscribe(); | ||
| }, [navigate]); | ||
|
|
||
| return ( | ||
| <div className={`container`}> | ||
| <Header toBeFocusedRef={emailRef} /> | ||
| <HamburgerMenu home="Home" /> | ||
| {isLoading ? <LoadingSpinner /> : ''} | ||
| {!isSent ? <div className="form-container"> | ||
| <form onSubmit={handleSubmit}> | ||
| <h2>Forgot Password</h2> | ||
| <label htmlFor="username-email">Email:</label> | ||
| <input type="text" id="username-email" ref={emailRef} name="username-email" onChange={(event) => setEmail(event.target.value)} required placeholder="Username or Email" /> | ||
| <button type="submit" className="button" onClick={handleSubmit}> | ||
| Submit | ||
| </button> | ||
| </form> | ||
| <div className="login-link-container"> | ||
| <Link to="/login" className="login-link"> | ||
| Back to Login | ||
| </Link> | ||
| </div> | ||
| </div> : <div className="stats"> | ||
| <div className="stat"> | ||
| <h1 style={{ marginTop: "15%" }}>Password reset link has been sent to your email.</h1> | ||
| <h1> | ||
| <Link to="/login">Login</Link> | ||
| </h1> | ||
| </div> | ||
| </div>} | ||
| return ( | ||
| <div className={`container`}> | ||
| <Header toBeFocusedRef={emailRef} /> | ||
| <HamburgerMenu home="Home" /> | ||
| {isLoading ? <LoadingSpinner /> : ""} | ||
| {!isSent ? ( | ||
| <div className="form-container"> | ||
| <form onSubmit={handleSubmit}> | ||
| <h2>Forgot Password</h2> | ||
| <label htmlFor="username-email">Email:</label> | ||
| <input | ||
| type="text" | ||
| id="username-email" | ||
| ref={emailRef} | ||
| name="username-email" | ||
| onChange={(event) => setEmail(event.target.value)} | ||
| required | ||
| placeholder="Username or Email" | ||
| /> | ||
| <button type="submit" className="button"> | ||
| Submit | ||
| </button> | ||
| </form> | ||
| <div className="login-link-container"> | ||
| <Link to="/login" className="login-link"> | ||
| Back to Login | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| ); | ||
| ) : ( | ||
| <div className="stats"> | ||
| <div className="stat"> | ||
| <h1 style={{ marginTop: "15%" }}> | ||
| Password reset link has been sent to your email. | ||
| </h1> | ||
| <h1> | ||
| <Link to="/login">Login</Link> | ||
| </h1> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Forgot; | ||
| export default Forgot; |
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,52 +1,79 @@ | ||
| import React, { useState, useEffect, useRef } from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
| import React, { useState, useEffect, useRef } from "react"; | ||
| import { Link } from "react-router-dom"; | ||
|
|
||
| const HamburgerMenu = ({ user, handleLogoutClick, ...props }) => { | ||
| const [isDropDownMenuOpen, setIsDropDownMenuOpen] = useState(false); | ||
| const dropdownRef = useRef(null); | ||
| const hamburgerMenuRef = useRef(null); | ||
| useEffect(() => { | ||
| const handleClickOutside = (event) => { | ||
| if (dropdownRef.current && !dropdownRef.current.contains(event.target) && !hamburgerMenuRef.current.contains(event.target)) { | ||
| setIsDropDownMenuOpen(false); | ||
| } | ||
| }; | ||
| const [isDropDownMenuOpen, setIsDropDownMenuOpen] = useState(false); | ||
| const dropdownRef = useRef(null); | ||
| const hamburgerMenuRef = useRef(null); | ||
| useEffect(() => { | ||
| const handleClickOutside = (event) => { | ||
| if ( | ||
| dropdownRef.current && | ||
| !dropdownRef.current.contains(event.target) && | ||
| !hamburgerMenuRef.current.contains(event.target) | ||
| ) { | ||
| setIsDropDownMenuOpen(false); | ||
| } | ||
| }; | ||
|
|
||
| window.addEventListener('click', handleClickOutside); | ||
| window.addEventListener("click", handleClickOutside); | ||
|
|
||
| return () => { | ||
| window.removeEventListener('click', handleClickOutside); | ||
| }; | ||
| }, [dropdownRef]); | ||
| return ( | ||
| <div className="hamburger-menu"> | ||
| <div className="hamburger-icon" onClick={(e) => { setIsDropDownMenuOpen(!isDropDownMenuOpen) }} ref={hamburgerMenuRef}> | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </div> | ||
| {isDropDownMenuOpen ? ( | ||
| <div className="dropdown-menu show" ref={dropdownRef}> | ||
| {user && props.profileData ? ( | ||
| <> | ||
| <Link to="/profile" state={{ profileData: props.profileData }} style={{ 'display': 'block' }}> | ||
| <img src={props.profileData.profilePhotoUrl} alt="profile-photo" className='dropdown-avatar' /> | ||
| {props.profileData.username} | ||
| </Link> | ||
| <Link href="#" to="/settings" >Account Settings</Link> | ||
| <Link href="#" onClick={handleLogoutClick}>Logout</Link> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| {Object.keys(props).map((key) => ( | ||
| props[key] && <Link key={key} to={`/${key}`}>{props[key]}</Link> | ||
| ))} | ||
| </> | ||
| )} | ||
| </div> | ||
| ) : null} | ||
| return () => { | ||
| window.removeEventListener("click", handleClickOutside); | ||
| }; | ||
| }, [dropdownRef]); | ||
| return ( | ||
| <div className="hamburger-menu"> | ||
| <div | ||
| className="hamburger-icon" | ||
| onClick={(e) => { | ||
| setIsDropDownMenuOpen(!isDropDownMenuOpen); | ||
| }} | ||
| ref={hamburgerMenuRef} | ||
| > | ||
| <span></span> | ||
| <span></span> | ||
| <span></span> | ||
| </div> | ||
| {isDropDownMenuOpen ? ( | ||
| <div className="dropdown-menu show" ref={dropdownRef}> | ||
| {user && props.profileData ? ( | ||
| <> | ||
| <Link | ||
| to="/profile" | ||
| state={{ profileData: props.profileData }} | ||
| style={{ display: "block" }} | ||
| > | ||
| <img | ||
| src={props.profileData.profilePhotoUrl} | ||
| alt="profile-photo" | ||
| className="dropdown-avatar" | ||
| /> | ||
| {props.profileData.username} | ||
| </Link> | ||
| <Link href="#" to="/settings"> | ||
| Account Settings | ||
| </Link> | ||
| <Link href="#" onClick={handleLogoutClick}> | ||
| Logout | ||
| </Link> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| {Object.keys(props).map( | ||
| (key) => | ||
| props[key] && ( | ||
| <Link key={key} to={`/${key}`}> | ||
| {props[key]} | ||
| </Link> | ||
| ) | ||
| )} | ||
| </> | ||
| )} | ||
| </div> | ||
| ); | ||
| ) : null} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default HamburgerMenu; | ||
| export default HamburgerMenu; |
Oops, something went wrong.