Skip to content

Commit d04e9d9

Browse files
ram2091999ram2091999
authored
Move global registration styles to css modules (#17)
- Change Register.css to Register.module.css - Redirect to './login' after successful registration
1 parent bf0bb34 commit d04e9d9

File tree

9 files changed

+182
-102
lines changed

9 files changed

+182
-102
lines changed

‎__tests__/app/components/__snapshots__/EditPassword.test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ exports[`EditPassword Component Should render 1`] = `
1515
class="col mb-3"
1616
>
1717
<div
18-
class="input-group"
18+
class=""
1919
>
2020
<label
2121
class="labeltext"
@@ -50,7 +50,7 @@ exports[`EditPassword Component Should render 1`] = `
5050
class="col mb-3"
5151
>
5252
<div
53-
class="input-group"
53+
class=""
5454
>
5555
<label
5656
class="labeltext"
@@ -85,7 +85,7 @@ exports[`EditPassword Component Should render 1`] = `
8585
class="col mb-3"
8686
>
8787
<div
88-
class="input-group"
88+
class=""
8989
>
9090
<label
9191
class="labeltext"
@@ -190,7 +190,7 @@ exports[`EditPassword Component Should render 1`] = `
190190
className="col mb-3"
191191
>
192192
<div
193-
className="input-group"
193+
className=""
194194
>
195195
<label
196196
className="labeltext"
@@ -226,7 +226,7 @@ exports[`EditPassword Component Should render 1`] = `
226226
className="col mb-3"
227227
>
228228
<div
229-
className="input-group"
229+
className=""
230230
>
231231
<label
232232
className="labeltext"
@@ -262,7 +262,7 @@ exports[`EditPassword Component Should render 1`] = `
262262
className="col mb-3"
263263
>
264264
<div
265-
className="input-group"
265+
className=""
266266
>
267267
<label
268268
className="labeltext"

‎src/app/components/Authentication/Login.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { faSpinner } from '@fortawesome/free-solid-svg-icons';
22
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
33
import { Routes } from 'app/routes';
44
import * as styles from 'app/styles/Authentication.module.css';
5+
import * as registerStyles from 'app/styles/Register.module.css';
56
import { AuthType } from 'app/types/Authentication/';
67
import * as LoginInterfaces from 'app/types/Authentication/Login';
78
import classnames from 'classnames';
@@ -134,12 +135,17 @@ export class Login extends React.Component<LoginInterfaces.Props, LoginInterface
134135
<div className="form-row">
135136
<div
136137
className={
137-
errorMessage
138+
!errorMessage
138139
? classnames(
140+
'col text-center mt -0 mb-2 ',
141+
styles['register-error-inactive'],
142+
registerStyles.errorMessage,
143+
)
144+
: classnames(
139145
'col text-center mt -0 mb-2 errorMessage',
140146
styles['register-error-active'],
147+
registerStyles.errorMessage,
141148
)
142-
: ''
143149
}
144150
>
145151
{errorMessage}

‎src/app/components/Authentication/Register.tsx‎

Lines changed: 129 additions & 80 deletions
Large diffs are not rendered by default.

‎src/app/components/UserProfileModal/EditPassword.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export class EditPassword extends React.Component<EditPasswordInterfaces.Props,
3333
>
3434
<div className="form-row">
3535
<div className="col mb-3">
36-
<div className="input-group">
36+
<div className={classnames(styles1['input-group'])}>
3737
<label className="labeltext">Old Password</label>
3838
<div className={classnames('input-group-prepend', styles.inputGroup)}>
3939
<input
@@ -55,7 +55,7 @@ export class EditPassword extends React.Component<EditPasswordInterfaces.Props,
5555
</div>
5656
<div className="form-row">
5757
<div className="col mb-3">
58-
<div className="input-group">
58+
<div className={classnames(styles1['input-group'])}>
5959
<label className="labeltext">New Password</label>
6060
<div className={classnames('input-group-prepend', styles.inputGroup)}>
6161
<input
@@ -77,7 +77,7 @@ export class EditPassword extends React.Component<EditPasswordInterfaces.Props,
7777
</div>
7878
<div className="form-row">
7979
<div className="col mb-3">
80-
<div className="input-group">
80+
<div className={classnames(styles1['input-group'])}>
8181
<label className="labeltext">Confirm Password</label>
8282
<div className={classnames('input-group-prepend', styles.passwordInput)}>
8383
<input

‎src/app/components/UserProfileModal/EditProfile.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export class EditProfile extends React.Component<EditProfileInterfaces.Props, {}
3131
<form className={'editForm'} noValidate ref={editProfileRef} onSubmit={handleEditProfile}>
3232
<div className="form-row">
3333
<div className="col mb-3">
34-
<div className="input-group">
34+
<div className={classnames(styles1['input-group'])}>
3535
<label style={{ display: 'block' }} className="labeltext">
3636
Username
3737
</label>
@@ -58,7 +58,7 @@ export class EditProfile extends React.Component<EditProfileInterfaces.Props, {}
5858

5959
<div className="form-row">
6060
<div className="col mb-3">
61-
<div className="input-group">
61+
<div className={classnames(styles1['input-group'])}>
6262
<label className="labeltext">Name</label>
6363
<div className={styles.inputGroup}>
6464
<input
@@ -84,7 +84,7 @@ export class EditProfile extends React.Component<EditProfileInterfaces.Props, {}
8484

8585
<div className="form-row" id="react-flag">
8686
<div className="col sm={12} mb-3">
87-
<div className="input-group">
87+
<div className={classnames(styles1['input-group'])}>
8888
<label className="labeltext">Nationality</label>
8989
<div className={styles.inputGroup}>
9090
<ReactFlagsSelect
@@ -106,7 +106,7 @@ export class EditProfile extends React.Component<EditProfileInterfaces.Props, {}
106106

107107
<div className="form-row">
108108
<div className="col sm={12} mb-3">
109-
<div className="input-group">
109+
<div className={classnames(styles1['input-group'])}>
110110
<label className="labeltext">Avatar</label>
111111
<div className={classnames(styles['avatar-select-container'])}>
112112
<section className={classnames(styles['avatar-section'])}>
@@ -139,7 +139,7 @@ export class EditProfile extends React.Component<EditProfileInterfaces.Props, {}
139139
<div className="col text-center mb-2">
140140
<div className={styles.inputGroup}>
141141
{userDetails.errorMessage !== '' ? (
142-
<div className={classnames(styles1['login-error'], styles.UsernameError)}>
142+
<div className={classnames(styles1['login-error'], styles.usernameError)}>
143143
{userDetails.errorMessage}
144144
</div>
145145
) : null}

‎src/app/styles/Authentication.module.css‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
box-shadow: none;
1515
}
1616

17+
.captcha {
18+
margin: auto;
19+
}
20+
1721
.Authentication .customBtn:hover {
1822
color: #fff;
1923
}
@@ -107,6 +111,11 @@
107111
overflow-y: hidden !important;
108112
}
109113

114+
.avatar-select-form-row {
115+
width: 100%;
116+
margin: auto;
117+
}
118+
110119
.stage-form {
111120
width: 390px;
112121
}
@@ -155,6 +164,7 @@
155164
background-color: #fee5d4;
156165
padding: 9px;
157166
margin-top: -20px;
167+
margin-bottom: 10px;
158168
}
159169

160170
.register-error-inactive {
@@ -164,6 +174,10 @@
164174
background-color: #fee5d4;
165175
padding: 9px;
166176
display: block;
177+
width: 100%;
178+
margin: auto;
179+
margin-top: 10px;
180+
color: red;
167181
}
168182

169183
.login-label {
@@ -196,14 +210,19 @@
196210
}
197211
.customFlag {
198212
background: #fff;
199-
padding: 8px;
213+
padding: 8px !important;
200214
margin: 0 !important;
201215
height: 50px;
202216
width: 100%;
203217
margin-left: 10%;
204218
border: 1px solid black;
205219
border-radius: 3px !important;
206-
margin-bottom: 20px !important;
220+
}
221+
222+
.captcha {
223+
display: flex;
224+
justify-content: center;
225+
margin: 10px 0 20px 0;
207226
}
208227

209228
.login-input {
@@ -266,6 +285,10 @@
266285
width: 100%;
267286
}
268287

288+
.input-group {
289+
display: block !important;
290+
}
291+
269292
.loginButton:hover {
270293
background-color: #4630eb;
271294
}
@@ -344,7 +367,8 @@
344367
}
345368

346369
.register-button {
347-
margin: 10px;
370+
margin: auto;
371+
margin-top: 10px;
348372
width: 100%;
349373
height: 40px;
350374
background-color: #4630eb;

‎src/app/styles/Register.css‎ renamed to ‎src/app/styles/Register.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
margin-bottom: 20px !important;
1111
}
1212

13-
img {
13+
.img {
1414
vertical-align: top !important;
1515
}
1616

@@ -21,7 +21,7 @@ img {
2121
color: #dc3545;
2222
}
2323

24-
input[type='checkbox'] {
24+
.checkbox-input {
2525
height: 0;
2626
width: 0;
2727
visibility: hidden;

‎src/app/styles/UserProfileModal.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@
215215
margin-top: 5%;
216216
}
217217

218-
.UsernameError {
218+
.usernameError {
219219
width: 100%;
220220
font-size: 85%;
221221
color: #dc3545;

‎src/app/types/Authentication/Register.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export interface State {
4444
username: string;
4545
isStudent: boolean;
4646
password: string;
47+
isRegistered: boolean;
4748
repeatPassword: string;
4849
email: string;
4950
country: string;

0 commit comments

Comments
 (0)