Skip to content

Commit 3547a1b

Browse files
padmajabholpadmajabhol
committed
add logout and user component
1 parent 12c9828 commit 3547a1b

File tree

6 files changed

+168
-119
lines changed

6 files changed

+168
-119
lines changed

‎src/components/Authentication/Login/Login.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@
77
import React, { useState } from 'react';
88
import { Link, useHistory } from 'react-router-dom';
99
import { useMutation } from '@apollo/client';
10-
import useFormLogin from './useFormLogin';
11-
import validateLoginInfo from './validateLoginInfo.js';
10+
1211
import {
1312
FormContentRight,
1413
FormDiv,
@@ -61,7 +60,10 @@ const FormLogin = () => {
6160
setUsernameOrEmailErrorMessage(errorMapped.usernameOrEmail);
6261
setIsUsernameOrEmailError(true);
6362
}
64-
63+
if (!/\S+@\S+\.\S+/.test(usernameOrEmail)) {
64+
setUsernameOrEmailErrorMessage('Invalid email');
65+
setIsUsernameOrEmailError(true);
66+
}
6567
if (errorMapped.password) {
6668
setPasswordErrorMessage(errorMapped.password);
6769
setIsPasswordError(true);

‎src/components/Authentication/Signup/SignUp.js

+67-98
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@
66
/* eslint-disable jsx-a11y/label-has-associated-control */
77
/* eslint-disable react/function-component-definition */
88
/* eslint-disable jsx-a11y/anchor-is-valid */
9-
import React, { useState, useReducer } from 'react';
10-
import { Link, useHistory } from 'react-router-dom';
11-
import { gql, useMutation } from '@apollo/client';
12-
import useForm from './useForm';
13-
import validate from './validateInfo';
9+
import React, { useState } from 'react';
10+
import { useHistory } from 'react-router-dom';
11+
import { useMutation } from '@apollo/client';
1412
import {
1513
FormContentRight,
1614
FormDiv,
@@ -26,136 +24,107 @@ import { signup } from '../../../config/content';
2624
import REGISTER from '../../../graphql/mutation/register';
2725
import { toErrorMap } from '../../../utils/toErrorMap';
2826

29-
const ACTIONS = {
30-
EMAIL_ERROR: 'emailError',
31-
USERNAME_ERROR: 'usernameError',
32-
PASSWORD_ERROR: 'passwordError',
33-
RESET_FORM: 'resetForm',
34-
};
35-
36-
const initialState = {
37-
isUsernameError: false,
38-
isEmailError: false,
39-
isPasswordError: false,
40-
usernameErrorMessage: '',
41-
emailErrorMessage: '',
42-
passwordErrorMessage: '',
43-
};
44-
45-
const reducer = (state, action) => {
46-
switch (action.type) {
47-
case ACTIONS.EMAIL_ERROR:
48-
return {
49-
...state,
50-
isEmailError: true,
51-
emailErrorMessage: action.payload.errorMessage,
52-
};
53-
54-
case ACTIONS.USERNAME_ERROR:
55-
return {
56-
...state,
57-
isUsernameError: true,
58-
usernameErrorMessage: action.payload.errorMessage,
59-
};
60-
61-
case ACTIONS.PASSWORD_ERROR:
62-
return {
63-
...state,
64-
isPasswordError: true,
65-
passwordErrorMessage: action.payload.errorMessage,
66-
};
67-
68-
case ACTIONS.RESET_FORM:
69-
return {
70-
isUsernameError: false,
71-
isEmailError: false,
72-
isPasswordError: false,
73-
usernameErrorMessage: '',
74-
emailErrorMessage: '',
75-
passwordErrorMessage: '',
76-
};
77-
}
78-
};
79-
80-
const FormSignup = ({ submitForm }) => {
27+
const FormSignup = () => {
8128
const [register, { loading, error }] = useMutation(REGISTER);
82-
83-
const [state, dispatch] = useReducer(reducer, initialState);
84-
8529
const history = useHistory();
8630

87-
const handleSubmit = async (event) => {
88-
event.preventDefault();
31+
const [isFullNameError, setIsFullNameError] = useState(false);
32+
const [isUsernameError, setIsUsernameError] = useState(false);
33+
const [isEmailError, setIsEmailError] = useState(false);
34+
const [isPasswordError, setIsPasswordError] = useState(false);
35+
const [fullNameErrorMessage, setIsFullNameErrorMessage] = useState('');
36+
const [usernameErrorMessage, setUsernameErrorMessage] = useState('');
37+
const [emailErrorMessage, setEmailErrorMessage] = useState('');
38+
const [passwordErrorMessage, setPasswordErrorMessage] = useState('');
39+
40+
const resetErrorStateValues = () => {
41+
setIsFullNameError(false);
42+
setIsUsernameError(false);
43+
setIsEmailError(false);
44+
setIsPasswordError(false);
45+
setIsFullNameErrorMessage('');
46+
setUsernameErrorMessage('');
47+
setEmailErrorMessage('');
48+
setPasswordErrorMessage('');
49+
};
8950

90-
dispatch({ type: ACTIONS.RESET_FORM });
51+
const handleSubmit1 = async (event) => {
52+
event.preventDefault();
53+
resetErrorStateValues();
9154
const data = new FormData(event.currentTarget);
9255

56+
const fullName = data.get('fullName');
9357
const username = data.get('username');
9458
const email = data.get('email');
9559
const password = data.get('password');
9660

9761
const response = await register({
9862
variables: {
99-
userInfo: { username, email, password, fullName: 'fullNameRegister' },
63+
userInfo: { fullName, username, email, password },
10064
},
10165
});
10266

10367
if (response.data?.register.errors) {
10468
const errorMapped = toErrorMap(response.data.register.errors);
105-
69+
if (errorMapped.fullName) {
70+
setIsFullNameErrorMessage(errorMapped.fullName);
71+
setIsFullNameError(true);
72+
}
73+
if (errorMapped.username) {
74+
setUsernameErrorMessage(errorMapped.username);
75+
setIsUsernameError(true);
76+
}
10677
if (errorMapped.email) {
107-
dispatch({
108-
type: ACTIONS.EMAIL_ERROR,
109-
payload: { errorMessage: errorMapped.email },
110-
});
78+
setEmailErrorMessage(errorMapped.email);
79+
setIsEmailError(true);
80+
}
81+
if (!/\S+@\S+\.\S+/.test(email)) {
82+
setEmailErrorMessage('Invalid email');
83+
setIsEmailError(true);
11184
}
112-
11385
if (errorMapped.password) {
114-
dispatch({
115-
type: ACTIONS.PASSWORD_ERROR,
116-
payload: { errorMessage: errorMapped.password },
117-
});
86+
setPasswordErrorMessage(errorMapped.password);
87+
setIsPasswordError(true);
11888
}
119-
120-
if (errorMapped.username) {
121-
dispatch({
122-
type: ACTIONS.USERNAME_ERROR,
123-
payload: { errorMessage: errorMapped.username },
124-
});
89+
if (!password) {
90+
setPasswordErrorMessage('Password required');
91+
setIsPasswordError(true);
92+
}
93+
if (password.length < 6) {
94+
setPasswordErrorMessage('Password needs to be 6 characters or more');
95+
setIsPasswordError(true);
12596
}
126-
} else if (response.data?.register.user) {
127-
dispatch({ type: ACTIONS.RESET_FORM });
128-
history.push('/login');
97+
} else if (response.data.register.user) {
98+
resetErrorStateValues();
99+
history.push('/journal');
129100
}
130101
};
131102

132103
return (
133104
<FormContentRight>
134-
<FormDiv onSubmit={handleSubmit}>
105+
<FormDiv onSubmit={handleSubmit1}>
135106
<FormH1>{signup.head}</FormH1>
107+
<FormInputs>
108+
<FormLabel htmlFor='fullName'>Enter Full Name</FormLabel>
109+
<FormInput id='fullName' label='Username' type='text' name='fullName' required />
110+
{isFullNameError && <FormInputsP>{fullNameErrorMessage}</FormInputsP>}
111+
</FormInputs>
136112
<FormInputs>
137113
<FormLabel htmlFor='username'>{signup.labelUsername}</FormLabel>
138-
<FormInput id='username' label='Username' name='username' required />
139-
{state.isUsernameError && <FormInputsP>{state.usernameErrorMessage}</FormInputsP>}
114+
<FormInput id='username' label='Username' type='text' name='username' required />
115+
{isUsernameError && <FormInputsP>{usernameErrorMessage}</FormInputsP>}
140116
</FormInputs>
141117
<FormInputs>
142118
<FormLabel htmlFor='email'>{signup.labelEmail}</FormLabel>
143-
<FormInput id='email' label='Email Address' autoComplete='email' name='email' required />
144-
{state.isEmailError && <FormInputsP>{state.emailErrorMessage}</FormInputsP>}
119+
<FormInput id='email' label='Email Address' type='email' name='email' required />
120+
{isEmailError && <FormInputsP>{emailErrorMessage}</FormInputsP>}
145121
</FormInputs>
146122
<FormInputs>
147123
<FormLabel htmlFor='password'>{signup.labelPassword}</FormLabel>
148-
<FormInput id='password' label='Password' name='password' type='password' required />
149-
{state.isPasswordError && <FormInputsP>{state.passwordErrorMessage}</FormInputsP>}
150-
</FormInputs>
151-
<FormInputs>
152-
<FormLabel htmlFor='password2'>{signup.labelPassword2}</FormLabel>
153-
<FormInput id='password2' type='password' name='password2' required />
154-
{state.isPasswordError && <FormInputsP>{state.passwordErrorMessage}</FormInputsP>}
124+
<FormInput id='password' label='Password' type='password' name='password' required />
125+
{isPasswordError || <FormInputsP>{passwordErrorMessage}</FormInputsP>}
155126
</FormInputs>
156-
<FormInputBtn signup type='submit'>
157-
{signup.button}
158-
</FormInputBtn>
127+
<FormInputBtn type='submit'>{signup.button}</FormInputBtn>
159128
<FormInputLogin>
160129
{signup.login}{' '}
161130
<a href='/login' style={{ color: 'orange' }}>

‎src/components/Authentication/User-Profile/Logout.js

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
1+
/* eslint-disable no-unused-vars */
2+
/* eslint-disable react/button-has-type */
13
import React from 'react';
24
import { useMutation } from '@apollo/client';
35
import LOGOUT from '../../../graphql/mutation/LOGOUT';
46

57
function Logout() {
6-
const [logout, { data, error }] = useMutation(CREATE_JOURNAL);
8+
const [logout, { data, error }] = useMutation(LOGOUT);
9+
10+
const handlelogout = async (event) => {
11+
logout({});
12+
};
713

8-
logoutUser
914
return (
1015
<>
1116
<div>Logout</div>
12-
<button onClick={}>Logout</button>
17+
<button onClick={handlelogout}>Logout</button>
1318
</>
1419
);
1520
}

‎src/components/Authentication/User-Profile/useprofile.js

+47-11
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,58 @@
1-
import React from 'react';
1+
/* eslint-disable react/button-has-type */
2+
/* eslint-disable jsx-a11y/anchor-is-valid */
3+
/* eslint-disable max-len */
4+
/* eslint-disable import/order */
5+
/* eslint-disable jsx-a11y/alt-text */
6+
/* eslint-disable react/self-closing-comp */
7+
/* eslint-disable no-unused-vars */
8+
import React, { useEffect, useState } from 'react';
29
import UserProfile from 'react-user-profile';
3-
import { useQuery } from '@apollo/client';
10+
import { useQuery, useMutation } from '@apollo/client';
411
import GET_USER from '../../../graphql/queries/GET_USER';
12+
import Logout from './Logout';
13+
import './userprofile.css';
14+
import { SectionLayout } from '../../marginals';
15+
import { Container } from 'react-bootstrap';
16+
import LOGOUT from '../../../graphql/mutation/LOGOUT';
17+
import { useHistory } from 'react-router';
518

619
function Profile() {
720
const { data } = useQuery(GET_USER);
21+
const [logout, { data1, error }] = useMutation(LOGOUT);
822

9-
console.log(data);
23+
const [user, setUser] = useState('');
24+
25+
const history = useHistory();
26+
27+
useEffect(() => {
28+
if (data) {
29+
setUser(data.getCurrentUser);
30+
}
31+
}, [setUser, data]);
32+
33+
const handlelogout = async (event) => {
34+
logout({});
35+
history.push('/signup');
36+
};
1037

11-
const photo =
12-
// eslint-disable-next-line max-len
13-
'https://api-cdn.spott.tv/rest/v004/image/images/e91f9cad-a70c-4f75-9db4-6508c37cd3c0?width=587&height=599';
14-
const userName = 'Harvey Specter';
15-
const location = 'New York, USA';
1638
return (
17-
<div style={{ width: '100%', marginTop: '5rem' }}>
18-
<UserProfile photo={photo} userName={userName} location={location} />
19-
</div>
39+
<SectionLayout>
40+
<Container>
41+
<h2 style={{ textAlign: 'center' }}>User Profile</h2>
42+
43+
<div className='card'>
44+
{/* <img src="/w3images/team2.jpg" alt="John" style="width:100%"> */}
45+
<h1>{user.fullName}</h1>
46+
<p>{user.username}</p>
47+
<p className='title'>{user.role}</p>
48+
<p>Email: {user.email}</p>
49+
50+
<p>
51+
<button onClick={handlelogout}>Logout</button>
52+
</p>
53+
</div>
54+
</Container>
55+
</SectionLayout>
2056
);
2157
}
2258

‎src/components/Authentication/User-Profile/userprofile.css

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.card {
2+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
3+
max-width: 500px;
4+
margin: auto;
5+
margin-top: 20px;
6+
text-align: center;
7+
font-family: arial;
8+
padding: 2rem;
9+
}
10+
11+
.title {
12+
color: grey;
13+
font-size: 18px;
14+
}
15+
16+
button {
17+
border: none;
18+
outline: 0;
19+
display: inline-block;
20+
padding: 8px;
21+
color: white;
22+
background-color: #000;
23+
text-align: center;
24+
cursor: pointer;
25+
width: 100%;
26+
font-size: 18px;
27+
}
28+
29+
a {
30+
text-decoration: none;
31+
/* font-size: 22px; */
32+
color: black;
33+
}
34+
35+
button:hover, a:hover {
36+
opacity: 0.7;
37+
}

‎src/graphql/mutation/register.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { gql } from '@apollo/client';
33
const REGISTER = gql`
44
mutation Register($userInfo: RegisterInput!) {
55
register(userInfo: $userInfo) {
6+
errors {
7+
field
8+
message
9+
}
610
user {
711
id
812
fullName
@@ -11,10 +15,6 @@ const REGISTER = gql`
1115
createdAt
1216
updatedAt
1317
}
14-
errors {
15-
field
16-
message
17-
}
1818
}
1919
}
2020
`;

0 commit comments

Comments
 (0)