Login.jsx 5.79 KB
Newer Older
1
import React, { useState, useEffect, useRef } from 'react';
2
import { useOktaAuth } from '@okta/okta-react';
Mathias Engelbrecht Pilegård's avatar
Mathias Engelbrecht Pilegård committed
3
import "./Login.css"
4
5
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { NavLink } from 'react-router-dom';
Mathias Engelbrecht Pilegård's avatar
Mathias Engelbrecht Pilegård committed
6
import config from "../../config"
7
8

const SignUp = () => {
9
10
11
  const { oktaAuth } = useOktaAuth();
  const [sessionToken, setSessionToken] = useState()

12
13
14
15
16
17
18
  const signUpFormRef = useRef(null);
  const [signUpFormVisibilityState, showSignUpForm] = useState(false)
  const toggleSignInFormVisible = () => showSignUpForm(!signUpFormVisibilityState)

  const [firstname, setfirstname] = useState('')
  const [lastname, setlastname] = useState('')
  const [username, setUsername] = useState('');
19
20
  const [password, setPassword] = useState('');

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43


  useEffect(() => {
    const pageClickEvent = (e) => {
      console.log("Click")
      if (signUpFormRef.current !== null && !signUpFormRef.current.contains(e.target)) {
        console.log("Form visible: " + signUpFormVisibilityState)
        toggleSignInFormVisible()
      }
    };

    // If the item is active (ie open) then listen for clicks
    if (signUpFormVisibilityState) {
      console.log("Add eventlistener")
      window.addEventListener('click', pageClickEvent);
    }

    return () => {
      console.log("Remove eventlistener")
      window.removeEventListener('click', pageClickEvent);
    }

  }, [signUpFormVisibilityState]);
44
45

  const userInputData = JSON.stringify({
46
47
48
    firstname: `${firstname}`,
    lastname: `${lastname}`,
    Email: `${username}`,
49
50
51
52
53
54
55
    password: `${password}`
  })

  const requestOptions = {
    method: 'POST',
    body: userInputData
  };
56

57
  const handleSignUpFormSubmit = (e) => {
58
    e.preventDefault();
59
60
61
62
63
64
65
66
67

    fetch(config.serviceAPI.createNewUserURL, requestOptions)
      .then((res) => {
        if (!res.ok) {
          window.alert("Error")
          Promise.reject("")
          return
        }
        if (res.ok) {
68
          handleSignInFormSubmit(e)
69
70
71
72
        }
      })
  }

73
74
75
76
77
78
79
80
81
82
83
84
  const handleSignInFormSubmit = (e) => {
    e.preventDefault();

    oktaAuth.signInWithCredentials({ username, password })
      .then(res => {
        const sessionToken = res.sessionToken;
        setSessionToken(sessionToken);
        // sessionToken is a one-use token, so make sure this is only called once
        oktaAuth.signInWithRedirect({ sessionToken, originalUri: '/home' });
      })
      .catch(err => console.log('Found an error', err));
  };
85

86
87
  const handlefirstnameChange = (e) => {
    setfirstname(e.target.value)
88
89
  }

90
91
  const handlelastnameChange = (e) => {
    setlastname(e.target.value)
92
93
  }

94
95
96
97
  const handleUsernameChange = (e) => {
    setUsername(e.target.value);
  };

98
99
  const handlePasswordChange = (e) => {
    setPassword(e.target.value)
100
101
  }

102
103
104
105
106
  if (sessionToken) {
    // Hide form while sessionToken is converted into id/access tokens
    return null;
  }

107
108
  return (
    <div className="pageContainer">
109
      {/* The Modal */}
110
      <div className={`modal ${signUpFormVisibilityState ? "active" : "inactive"}`}>
111
112

        {/* Modal content */}
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
        <div ref={signUpFormRef} className="modal-content">
          <div className="signUpForm">
            <h2>Sign Up</h2>
            <form onSubmit={handleSignUpFormSubmit}>
              <label>
                First name:
                <input
                  id="firstname" type="text"
                  value={firstname}
                  onChange={handlefirstnameChange} />
              </label>
              <label>
                Last Name:
                <input
                  id="lastname" type="text"
                  value={lastname}
                  onChange={handlelastnameChange} />
              </label>
              <label>
                Email:
                <input
                  id="email" type="text"
                  value={username}
                  onChange={handleUsernameChange} />
              </label>
              <label>
                Password:
                <input
                  id="password" type="password"
                  value={password}
                  onChange={handlePasswordChange} />
              </label>
              <label className="password-requirements">
                Requirements: At least 8 characters, no parts of your username
              </label>
              <button className="formSubmitButton" type="submit">
                Sign Up&nbsp;&nbsp;
                <FontAwesomeIcon icon="user-plus"></FontAwesomeIcon>
              </button>
            </form>
          </div>
154
155
156
        </div>

      </div>
157
158
159
160
      <div className="spacer">
        <div className="text-container">
          <h1>Get started with PipIt</h1>
          <h5>Track bugs and usabilty issues</h5>
161
162
163
          <button className="signUpForm-show-button" onClick={toggleSignInFormVisible}>
            Sign up
          </button>
164
165
        </div>
      </div>
166
167
168
169

      <div className="signInForm">
        <h2>Sign in to PipIt</h2>
        <form onSubmit={handleSignInFormSubmit}>
170
171
172
          <label>
            Email:
            <input
173
174
175
              id="username" type="text"
              value={signUpFormVisibilityState ? null : username}
              onChange={handleUsernameChange} />
176
177
178
179
          </label>
          <label>
            Password:
            <input
180
              id="password" type="password"
181
              value={signUpFormVisibilityState ? null : password}
182
183
              onChange={handlePasswordChange} />
          </label>
184
          <button className="formSubmitButton" type="submit">
185
186
            Sign in&nbsp;&nbsp;
            <FontAwesomeIcon icon="sign-in-alt"></FontAwesomeIcon>
187
188
          </button>
        </form>
189
190
191
        <div className="signInPrompt">
          <span>Dont have an account yet?&nbsp;
            <a onClick={toggleSignInFormVisible}>Sign up</a>
192
193
194
195
196
197
198
199
          </span>
        </div>
      </div>
    </div>
  )
}

export default SignUp