Commit c9ac64c1 authored by Mathias Engelbrecht Pilegård's avatar Mathias Engelbrecht Pilegård
Browse files

refactoring

parent 473a37b4
import React, { useEffect, useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { useOktaAuth } from '@okta/okta-react';
import UpdateUserDataModal from '../../components/updateUserData/updateUserDataModal/UpdateUserDataModal';
const UpdateUserData = () => {
const { authState, oktaAuth } = useOktaAuth();
const [userInfo, setUserInfo] = useState(null);
const [name, setName] = useState('')
const [email, setEmail] = useState('');
const [updateUserDataModalState, setUpdateUserDataModalState] = useState(false)
const toggleUpdateUserDataModalState = () => setUpdateUserDataModalState(!updateUserDataModalState)
useEffect(() => {
if (!authState.isAuthenticated) {
// When user isn't authenticated, forget any user info
setUserInfo(null);
} else if (authState.isAuthenticated && updateUserDataModalState == false) {
oktaAuth.getUser().then(info => {
setUserInfo(info);
});
}
}, [authState, oktaAuth, updateUserDataModalState]); // Update if authState changes
useEffect(() => {
userInfo && (
setName(userInfo.name)
)
userInfo && (
setEmail(userInfo.email)
)
}, [userInfo])
return (
<div className="personal-information-container">
<div className="container-header">
<FontAwesomeIcon icon="user-circle" className="user-icon"></FontAwesomeIcon>
<h5>Personal information</h5>
<button onClick={toggleUpdateUserDataModalState}>
<FontAwesomeIcon icon="pen" className="pen-icon"></FontAwesomeIcon>
Edit
</button>
</div>
<div className="content">
<ul>
<li>
<b>Name:</b>
</li>
<li>
{userInfo ? name : "Fetching name"}
</li>
<li>
<b>Email</b>
</li>
<li>
{userInfo ? email : "Fetching email"}
</li>
</ul>
</div>
<div className={`modal ${updateUserDataModalState ? "active" : "inactive"}`}>
<UpdateUserDataModal removeModal={() => setUpdateUserDataModalState(false)} />
</div>
</div>
)
}
export default UpdateUserData
// rfce // rfce
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import "./Account.css" import "./Account.css"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { useOktaAuth } from '@okta/okta-react';
import ConfirmRemoveAccountModal from "./confirmRemoveAccountModal/ConfirmRemoveAccountModal"
import UpdateUserDataModal from './updateUserData/UpdateUserDataModal';
function Account() {
const { authState, oktaAuth } = useOktaAuth();
const [userInfo, setUserInfo] = useState(null);
const [name, setName] = useState('')
const [email, setEmail] = useState('');
const [updateUserDataModalState, setUpdateUserDataModalState] = useState(false)
const toggleUpdateUserDataModalState = () => setUpdateUserDataModalState(!updateUserDataModalState)
const [confirmAccountRemoveModalState, setConfirmAccountRemoveModalState] = useState(false)
const toggleConfirmAccountRemoveModalState = () => setConfirmAccountRemoveModalState(!confirmAccountRemoveModalState)
useEffect(() => {
if (!authState.isAuthenticated) {
// When user isn't authenticated, forget any user info
setUserInfo(null);
} else if (authState.isAuthenticated && updateUserDataModalState == false) {
oktaAuth.getUser().then(info => {
setUserInfo(info);
});
}
}, [authState, oktaAuth, updateUserDataModalState]); // Update if authState changes
useEffect(() => {
userInfo && (
setName(userInfo.name)
)
userInfo && (
setEmail(userInfo.email)
)
}, [userInfo])
import ConfirmRemoveAccountModal from "../../components/removeAccount/confirmRemoveAccountModal/ConfirmRemoveAccountModal"
import ChangePassword from '../../components/changePassword/ChangePassword';
import RemoveAccount from '../../components/removeAccount/RemoveAccount';
import UpdateUserData from '../../components/updateUserData/UpdateUserData';
function Account() {
return ( return (
<div className="page-content-container"> <div className="page-content-container">
<div className="content-header"> <div className="content-header">
...@@ -48,102 +15,10 @@ function Account() { ...@@ -48,102 +15,10 @@ function Account() {
</div> </div>
<div className="accountpage-content"> <div className="accountpage-content">
<div className="personal-information-container"> <ChangePassword />
<div className="container-header"> <RemoveAccount />
<FontAwesomeIcon icon="user-circle" className="user-icon"></FontAwesomeIcon> <UpdateUserData />
<h5>Personal information</h5>
<button onClick={toggleUpdateUserDataModalState}>
<FontAwesomeIcon icon="pen" className="pen-icon"></FontAwesomeIcon>
Edit
</button>
</div>
<div className="content">
<ul>
<li>
<b>Name:</b>
</li>
<li>
{userInfo ? name : "Fetching name"}
</li>
<li>
<b>Email</b>
</li>
<li>
{userInfo ? email : "Fetching email"}
</li>
</ul>
</div>
</div>
<div className="change-password-container">
<div className="container-header">
<FontAwesomeIcon icon="lock" className="lock-icon"></FontAwesomeIcon>
<h5>Change password</h5>
</div>
<div className="content">
<p>Password requirements:</p>
<ul>
<li>
At least 8 characters
</li>
<li>
No parts of username may be included
</li>
<li>
Your password may not be any of the last 4 passwords
</li>
</ul>
<form>
<div className="reset-password-form-container">
<div className="form-item">
<label>
Old password
</label>
<input type="password"></input>
</div>
<div className="form-item">
<label>
New password
</label>
<input type="password"></input>
</div>
<div className="form-item">
<label>
Confirm new password
</label>
<input type="password"></input>
</div>
<div className="form-item">
<button className="passwordResetSubmitButton" type="submit">
Submit&nbsp;
<FontAwesomeIcon icon="arrow-right"></FontAwesomeIcon>
</button>
</div>
</div>
</form>
</div>
</div>
<div className="deactivate-account-container">
<div className="container-header">
<FontAwesomeIcon icon="trash" className="trash-icon"></FontAwesomeIcon>
<h5>Delete account</h5>
</div>
<div className="content">
<p>
Your account and all your data will be permanently deleted
</p>
<button onClick={toggleConfirmAccountRemoveModalState}>
Delete
</button>
</div>
</div>
</div>
<div className={`modal ${confirmAccountRemoveModalState ? "active" : "inactive"}`}>
<ConfirmRemoveAccountModal removeModal={() => setConfirmAccountRemoveModalState(false)} />
</div>
<div className={`modal ${updateUserDataModalState ? "active" : "inactive"}`}>
<UpdateUserDataModal removeModal={() => setUpdateUserDataModalState(false)} />
</div> </div>
</div> </div>
) )
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment