[87614a5] | 1 | import React from 'react'
|
---|
| 2 |
|
---|
| 3 | import { useSelector, useDispatch } from 'react-redux'
|
---|
| 4 |
|
---|
[64dc53b] | 5 | import { useRef } from 'react'
|
---|
| 6 |
|
---|
[87614a5] | 7 | import { setStyle } from '../redux/reducers/styleSlice';
|
---|
| 8 |
|
---|
| 9 | import axios from 'axios';
|
---|
| 10 |
|
---|
| 11 | const RegisterScreen = () => {
|
---|
[64dc53b] | 12 | const ref = useRef(null);
|
---|
| 13 |
|
---|
[87614a5] | 14 | const dispatch = useDispatch();
|
---|
| 15 |
|
---|
| 16 | const styleState = useSelector(state => state.style);
|
---|
| 17 |
|
---|
[64dc53b] | 18 | setTimeout(() => {
|
---|
| 19 | if (styleState.style.displayRegisterScreen && styleState.style.registerScreenInfo.setFocus) {
|
---|
| 20 | ref.current.focus();
|
---|
| 21 | dispatch(setStyle({
|
---|
| 22 | ...styleState.style,
|
---|
| 23 | registerScreenInfo: {
|
---|
| 24 | ...styleState.style.registerScreenInfo,
|
---|
| 25 | setFocus: false
|
---|
| 26 | }
|
---|
| 27 | }))
|
---|
| 28 | }
|
---|
| 29 | }, 10);
|
---|
| 30 |
|
---|
[e007fcd] | 31 | function onChangeEmail(e) {
|
---|
| 32 | dispatch(setStyle({
|
---|
| 33 | ...styleState.style,
|
---|
| 34 | registerScreenInfo: {
|
---|
| 35 | ...styleState.style.registerScreenInfo,
|
---|
| 36 | email: e.target.value,
|
---|
| 37 | }
|
---|
| 38 | }))
|
---|
| 39 | }
|
---|
| 40 |
|
---|
[87614a5] | 41 | function onChangeUsername(e) {
|
---|
| 42 | dispatch(setStyle({
|
---|
| 43 | ...styleState.style,
|
---|
| 44 | registerScreenInfo: {
|
---|
| 45 | ...styleState.style.registerScreenInfo,
|
---|
| 46 | username: e.target.value,
|
---|
| 47 | }
|
---|
| 48 | }))
|
---|
| 49 | }
|
---|
| 50 |
|
---|
| 51 | function onChangeDisplayName(e) {
|
---|
| 52 | dispatch(setStyle({
|
---|
| 53 | ...styleState.style,
|
---|
| 54 | registerScreenInfo: {
|
---|
| 55 | ...styleState.style.registerScreenInfo,
|
---|
| 56 | displayName: e.target.value,
|
---|
| 57 | }
|
---|
| 58 | }))
|
---|
| 59 | }
|
---|
| 60 |
|
---|
| 61 | function onChangePassword(e) {
|
---|
| 62 | dispatch(setStyle({
|
---|
| 63 | ...styleState.style,
|
---|
| 64 | registerScreenInfo: {
|
---|
| 65 | ...styleState.style.registerScreenInfo,
|
---|
| 66 | password: e.target.value,
|
---|
| 67 | }
|
---|
| 68 | }))
|
---|
| 69 | }
|
---|
| 70 |
|
---|
[64dc53b] | 71 | function keyUp(e) {
|
---|
| 72 | if (e.key === 'Enter') {
|
---|
| 73 | register();
|
---|
| 74 | }
|
---|
| 75 | }
|
---|
| 76 |
|
---|
[87614a5] | 77 | function closeForm() {
|
---|
| 78 | dispatch(setStyle({
|
---|
| 79 | ...styleState.style,
|
---|
| 80 | displayRegisterScreen: false,
|
---|
| 81 | registerScreenInfo: {
|
---|
| 82 | username: '',
|
---|
| 83 | displayName: '',
|
---|
| 84 | password: '',
|
---|
| 85 | },
|
---|
| 86 | inlineAlertText: '',
|
---|
| 87 | }));
|
---|
| 88 | }
|
---|
| 89 |
|
---|
| 90 | function register() {
|
---|
| 91 | dispatch(setStyle({
|
---|
| 92 | ...styleState.style,
|
---|
| 93 | displayLoadingScreen: true,
|
---|
| 94 | }))
|
---|
| 95 |
|
---|
| 96 | axios.post('/api/postgre', {
|
---|
| 97 | action: 'register',
|
---|
[e007fcd] | 98 | email: styleState.style.registerScreenInfo.email,
|
---|
[87614a5] | 99 | username: styleState.style.registerScreenInfo.username,
|
---|
| 100 | displayName: styleState.style.registerScreenInfo.displayName,
|
---|
| 101 | password: styleState.style.registerScreenInfo.password,
|
---|
| 102 | })
|
---|
| 103 | .then(res => {
|
---|
| 104 | if (res.data?.success) {
|
---|
| 105 | dispatch(setStyle({
|
---|
| 106 | ...styleState.style,
|
---|
| 107 | displayRegisterScreen: false,
|
---|
| 108 | }));
|
---|
| 109 |
|
---|
| 110 | dispatch(setStyle({
|
---|
| 111 | ...styleState.style,
|
---|
| 112 | displayLoadingScreen: false,
|
---|
| 113 | displayRegisterScreen: false,
|
---|
| 114 | displayLoginScreen: true,
|
---|
| 115 | registerScreenInfo: {
|
---|
| 116 | username: '',
|
---|
| 117 | displayName: '',
|
---|
| 118 | password: '',
|
---|
| 119 | },
|
---|
| 120 | notification: {
|
---|
| 121 | show: true,
|
---|
[e007fcd] | 122 | text: 'Successfully registered! Please check your email and activate your account.',
|
---|
[87614a5] | 123 | status: 'success',
|
---|
| 124 | },
|
---|
[64dc53b] | 125 | inlineAlertText: '',
|
---|
[87614a5] | 126 | }));
|
---|
| 127 | }
|
---|
| 128 | else {
|
---|
| 129 | dispatch(setStyle({
|
---|
| 130 | ...styleState.style,
|
---|
| 131 | displayRegisterScreen: true,
|
---|
| 132 | inlineAlertText: res.data?.message,
|
---|
| 133 | }));
|
---|
| 134 | }
|
---|
| 135 | })
|
---|
| 136 | }
|
---|
| 137 |
|
---|
| 138 | return (
|
---|
| 139 | <div className="fullscreen fs-centered registerScreen" style={{display: styleState.style.displayRegisterScreen ? 'block' : 'none'}}>
|
---|
| 140 | <div className="fs-inputs-container">
|
---|
| 141 | {styleState.style.inlineAlertText.length > 0 && <span className="inlineAlert">{styleState.style.inlineAlertText}</span>}
|
---|
| 142 | <div>
|
---|
[e007fcd] | 143 | <span>Email:</span>
|
---|
| 144 | <input ref={ref} type="text" onChange={(e) => {onChangeEmail(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.email} placeholder="john.doe@gmail.com"/>
|
---|
[87614a5] | 145 | <span>Username:</span>
|
---|
[e007fcd] | 146 | <input type="text" onChange={(e) => {onChangeUsername(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.username} placeholder="johndoe"/>
|
---|
[87614a5] | 147 | <span>Display Name:</span>
|
---|
[e007fcd] | 148 | <input type="text" onChange={(e) => {onChangeDisplayName(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.displayName} placeholder="John Doe"/>
|
---|
[87614a5] | 149 | <span>Password:</span>
|
---|
[e007fcd] | 150 | <input type="password" onChange={(e) => {onChangePassword(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.password} placeholder="***************"/>
|
---|
[87614a5] | 151 | <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
|
---|
| 152 | <button className="primaryButton" onClick={() => closeForm()}>Close Form</button>
|
---|
| 153 | <button className="secondaryButton" onClick={() => register()}>Register</button>
|
---|
| 154 | </div>
|
---|
| 155 | </div>
|
---|
| 156 | </div>
|
---|
| 157 | </div>
|
---|
| 158 | )
|
---|
| 159 | }
|
---|
| 160 |
|
---|
| 161 | export default RegisterScreen |
---|