import React from "react";
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
import {firebase} from '../firebase'
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
import ModalPopup from "../components/ModalPopup";
import '../styles/Profile.css'
/**
* Renders the user signup/login page if they are not authenticated, otherwise renders the user's profile
* @module Profile
*/
export default function Profile(){
const [email, setEmail] = React.useState("")
const [password, setPassword] = React.useState("")
const [loginState, toggleLoginState] = React.useState(true)
const [confirmPassword, setConfirmedPassword] = React.useState("")
const [showForgotPasswordModal, toggleModal] = React.useState(false);
const [showGeneralModal, toggleGeneralModal] = React.useState(false);
const [generalModalText, setModalText] = React.useState("")
const [generalModalHeader, setModalHeader] = React.useState("")
const [auth] = React.useState(getAuth(firebase));
/**
* Checks whether a password is secure: in this case, whether it is at least 8 characters long and contains at least one uppercase letter, lowercase letter and number
* @function checkForStrongPassword
* @param {string} password Password to check
* @returns boolean value of whether or not password is secure
*/
function checkForStrongPassword(password){
return password.length >= 8 && /[A-Z]/.test(password) && /[a-z]/.test(password) && /[0-9]/.test(password)
}
/**
* Checks whether a string is in a valid email format: s1@s2.s3, where s1, s2 and s3 are strings.
* @function checkForValidEmail
* @param {string} email Email string to check
* @returns boolean value of whether string is a valid email address
*/
function checkForValidEmail(email){
return email.split("@").length==2 && email.split("a")[1].split(".").length==2
}
/**
* Handles user authentication: attempts to login with Firebase if client is in login state, otherwise tries to sign them up if password is secure.
* @function handleAuthentication
*/
function handleAuthentication(){
if(loginState) {
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
generateModal("Sign In Failed", errorMessage+"\n Error Code: "+errorCode)
})
}
else {
if(password !== confirmPassword)
generateModal("Passwords Don't Match!", "Please ensure \"Password\" and \"Confirm password\" fields are the same.")
else {
if(checkForStrongPassword(password)) {
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
generateModal("Sign In Failed", errorMessage+"\n Error Code: "+errorCode)
})
}
else
generateModal("Password Not Secure!", "Please ensure your password is at least eight characters long and contains at least one uppercase letter, one lowercase letter, and one number.")
}
}
}
/**
* Shows a pop up modal with a given header and body text
* @function generateModal
* @param {string} header Header text
* @param {string} body Body text
*/
function generateModal(header, body){
toggleGeneralModal(true)
setModalHeader(header)
setModalText(body)
}
return (
<div className="Profile-header">
<div className='Login-box'>
<ModalPopup showModal={showForgotPasswordModal} toggleModal={()=>{toggleModal(!showForgotPasswordModal)}}
header={"Forgot Password?"}
body={<div>
<p>Enter the email address you made your account with and press submit to receive a password reset email.</p>
<Form>
<FormGroup>
<Input type="email" placeholder="example@email.com" value={email} onChange={(e) => {
setEmail(e.target.value)
}}/>
</FormGroup>
</Form>
</div>
}
footer={<div>
<Button color="primary" onClick={()=>{
if(checkForValidEmail(email)){
generateModal("Check Your Inbox", "If we have your email on file, we'll send a password reset email shortly.")
} else{
generateModal("Invalid Email", "Please make sure the inputted email is valid.")
}
}}>Submit</Button>{' '}
<Button color="secondary" onClick={()=>{toggleModal(!showForgotPasswordModal)}}>Cancel</Button>
</div>
}/>
<ModalPopup showModal={showGeneralModal} toggleModal={()=>{toggleGeneralModal(!showGeneralModal)}}
header={generalModalHeader}
body={<div>
<p>{generalModalText}</p>
</div>
}
footer={<div>
<Button color="primary" onClick={()=>{toggleGeneralModal(!showGeneralModal)}}>OK</Button>
</div>
}/>
<h1>Log In to New Beginnings</h1>
<p style={{textAlign:'center'}}>Don't have an account? <button className="link" onClick={() =>{
toggleLoginState(!loginState) }}>Click here</button> to sign up</p>
<Form>
<FormGroup>
<Label for="email" size="lg">Email</Label>
<Input type="email" name="email" id="email" placeholder="email@example.com" bsSize="lg" onChange={(e) => {
setEmail(e.target.value)
}}/>
</FormGroup>
<FormGroup>
<Label for="password" size="lg">Password</Label>
<Input type="password" name="password" id="password" placeholder="enter password" bsSize="lg" onChange={(e) => {
setPassword(e.target.value)
}} />
{
!loginState?
<div>
<Label for="Confirm Password" size="lg">Confirm Password</Label>
<Input type="password" name="Confirm Password" id="confirm" placeholder="re-enter password" bsSize="lg" onChange={(e) => {
setConfirmedPassword(e.target.value)
}} />
</div>:<></>
}
<p style={{fontSize: 15}}>
Forgot password? <button className="link" type="button" onClick={()=>{
toggleModal(true)
}}>Click here.</button>
</p>
</FormGroup>
<Button size="lg" className="center" onClick={()=>{
handleAuthentication(auth,loginState,email,password,confirmPassword)
}}>Submit</Button>
</Form>
</div>
</div>
)
}