Account.jsx 4.33 KB
Newer Older
1
2
3
4
5
// rfce
import React, { useState, useEffect } from 'react'
import "./Account.css"
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { useOktaAuth } from '@okta/okta-react';
6
import ConfirmRemoveAccountModal from "./confirmRemoveAccountModal/ConfirmRemoveAccountModal"
7
8
9
10
11

function Account() {
  const { authState, oktaAuth } = useOktaAuth();
  const [userInfo, setUserInfo] = useState(null);

12
13
14
  const [confirmAccountRemoveModalState, setConfirmAccountRemoveModalState] = useState(false)
  const toggleConfirmAccountRemoveModalState = () => setConfirmAccountRemoveModalState(!confirmAccountRemoveModalState)

15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
  useEffect(() => {
    if (!authState.isAuthenticated) {
      // When user isn't authenticated, forget any user info
      setUserInfo(null);
    } else {
      oktaAuth.getUser().then(info => {
        setUserInfo(info);
      });
    }
  }, [authState, oktaAuth]); // Update if authState changes

  return (
    <div className="page-content-container">
      <div className="content-header">
        <h2 className="welcome-text">Account information</h2>
      </div>
      <div className="accountpage-content">

        <div className="personal-information-container">
          <div className="container-header">
            <FontAwesomeIcon icon="user-circle" className="user-icon"></FontAwesomeIcon>
            <h5>Personal information</h5>
            <button>
              <FontAwesomeIcon icon="pen" className="pen-icon"></FontAwesomeIcon>
              Edit
            </button>
          </div>
          <div className="content">
            <ul>
              <li>
45
                <b>Name:</b>
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
              </li>
              <li>
                {userInfo ? userInfo.name : "Fetching firstname"}
              </li>
              <li>
                <b>Email</b>
              </li>
              <li>
                {userInfo ? 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>
118
            <button onClick={toggleConfirmAccountRemoveModalState}>
119
120
121
122
123
              Delete
            </button>
          </div>
        </div>
      </div>
124
125
126
      <div className={`modal ${confirmAccountRemoveModalState ? "active" : "inactive"}`}>
        <ConfirmRemoveAccountModal removeModal={() => setConfirmAccountRemoveModalState(false)} />
      </div>
127
128
129
130
131
    </div>
  )
}

export default Account