source: components/RegisterScreen.jsx@ faff334

main
Last change on this file since faff334 was e007fcd, checked in by anastasovv <simon@…>, 2 years ago

Now you need to activate your account via email & also added mail sending after server crash

  • Property mode set to 100644
File size: 5.7 KB
Line 
1import React from 'react'
2
3import { useSelector, useDispatch } from 'react-redux'
4
5import { useRef } from 'react'
6
7import { setStyle } from '../redux/reducers/styleSlice';
8
9import axios from 'axios';
10
11const RegisterScreen = () => {
12 const ref = useRef(null);
13
14 const dispatch = useDispatch();
15
16 const styleState = useSelector(state => state.style);
17
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
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
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
71 function keyUp(e) {
72 if (e.key === 'Enter') {
73 register();
74 }
75 }
76
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',
98 email: styleState.style.registerScreenInfo.email,
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,
122 text: 'Successfully registered! Please check your email and activate your account.',
123 status: 'success',
124 },
125 inlineAlertText: '',
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>
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"/>
145 <span>Username:</span>
146 <input type="text" onChange={(e) => {onChangeUsername(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.username} placeholder="johndoe"/>
147 <span>Display Name:</span>
148 <input type="text" onChange={(e) => {onChangeDisplayName(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.displayName} placeholder="John Doe"/>
149 <span>Password:</span>
150 <input type="password" onChange={(e) => {onChangePassword(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.registerScreenInfo.password} placeholder="***************"/>
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
161export default RegisterScreen
Note: See TracBrowser for help on using the repository browser.