From a292a0b3e8654a0479cee6465f62d918106e8893 Mon Sep 17 00:00:00 2001 From: Puskar Adhikari Date: Tue, 10 Aug 2021 17:30:15 +0545 Subject: [PATCH 1/8] icon switch acording to input value --- src/actions/userAction.js | 498 +++++++++++++---------- src/assets/images/email.svg | 3 + src/assets/images/phone-call-outline.svg | 5 + src/components/input/Input.jsx | 25 +- src/components/input/Input.scss | 14 +- src/components/signInSignUp/SignUp.jsx | 26 +- 6 files changed, 333 insertions(+), 238 deletions(-) create mode 100644 src/assets/images/email.svg create mode 100644 src/assets/images/phone-call-outline.svg diff --git a/src/actions/userAction.js b/src/actions/userAction.js index eb10da583..6d927f376 100644 --- a/src/actions/userAction.js +++ b/src/actions/userAction.js @@ -3,58 +3,14 @@ import Amplify, { Auth } from 'aws-amplify' import { getApi, postApi } from '../utils/apiFunc' import FormData from 'form-data' -import { - ACCESS_TOKEN_FAIL, - ACCESS_TOKEN_REQUEST, - ACCESS_TOKEN_SUCCESS, - USER_DETAILS_FAIL, - USER_DETAILS_REQUEST, - USER_DETAILS_SUCCESS, - USER_LOGIN_FAIL, - USER_LOGIN_REQUEST, - USER_LOGIN_SUCCESS, - USER_LOGOUT, - USER_CONFIRM_CODE_REQUEST, - USER_CONFIRM_CODE_SUCCESS, - USER_CONFIRM_CODE_FAIL, - USER_RESEND_CODE_REQUEST, - USER_RESEND_CODE_SUCCESS, - USER_RESEND_CODE_FAIL, - USER_ATTR_CONFIRM_CODE_REQUEST, - USER_ATTR_CONFIRM_CODE_SUCCESS, - USER_ATTR_CONFIRM_CODE_FAIL, - USER_ATTR_RESEND_CODE_REQUEST, - USER_ATTR_RESEND_CODE_SUCCESS, - USER_ATTR_RESEND_CODE_FAIL, - USER_FORGOT_PWD_CONFIRM_CODE_REQUEST, - USER_FORGOT_PWD_CODE_SUCCESS, - USER_FORGOT_PWD_CODE_FAIL, - USER_FORGOT_PWD_CODE_RESET, - USER_FORGOT_PWD_RESEND_CODE_REQUEST, - USER_PASSWORD_CHANGE_REQUEST, - USER_PASSWORD_CHANGE_SUCCESS, - USER_PASSWORD_CHANGE_FAIL, - USER_REGISTER_FAIL, - USER_REGISTER_REQUEST, - USER_REGISTER_SUCCESS, - USER_UPDATE_REQUEST, - USER_UPDATE_SUCCESS, - USER_UPDATE_FAIL, - USER_LIST_FAIL, - USER_LIST_SUCCESS, - USER_LIST_REQUEST, - USER_DETAILS_RESET, - USER_SEARCH_REQUEST, - USER_SEARCH_SUCCESS, - USER_SEARCH_FAIL -} from '../constants/userConstants' +import * as User from '../constants/userConstants' if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { Amplify.configure({ Auth: { - // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID - // identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', - // REQUIRED - Amazon Cognito Region + // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID + // identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab', + // REQUIRED - Amazon Cognito Region region: process.env.REACT_APP_COGNITO_REGION, // OPTIONAL - Amazon Cognito Federated Identity Pool Region // Required only if it's different from Amazon Cognito Region @@ -89,7 +45,13 @@ if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { // OPTIONAL - Hosted UI configuration oauth: { domain: process.env.REACT_APP_COGNITO_DOMAIN_NAME, // domain_name - scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'], + scope: [ + 'phone', + 'email', + 'profile', + 'openid', + 'aws.cognito.signin.user.admin' + ], redirectSignIn: process.env.FRONTEND_URL, redirectSignOut: process.env.FRONTEND_URL, responseType: 'token' // or 'token', note that REFRESH token will only be generated when the responseType is code @@ -100,11 +62,15 @@ if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { export const register = (name, password) => async (dispatch) => { try { - dispatch({ type: USER_REGISTER_REQUEST }) - dispatch({ type: USER_LOGIN_REQUEST }) + dispatch({ type: User.USER_REGISTER_REQUEST }) + dispatch({ type: User.USER_LOGIN_REQUEST }) let userdata if (process.env.REACT_APP_AUTH_METHOD !== 'cognito') { - const { data } = await postApi(dispatch, `${process.env.REACT_APP_API_BASE_URL}/api/users`, { name, password }) + const { data } = await postApi( + dispatch, + `${process.env.REACT_APP_API_BASE_URL}/api/users`, + { name, password } + ) userdata = data } else { await Auth.signUp({ @@ -115,18 +81,27 @@ export const register = (name, password) => async (dispatch) => { } }) const response = await Auth.signIn(name, password) - userdata = { token: response?.signInUserSession?.idToken?.jwtToken, id: response?.attributes?.sub || '' } - const { data } = await postApi(dispatch, `${process.env.REACT_APP_API_BASE_URL}/api/users`, { id: userdata.id }) - .catch(err => console.log(err)) + userdata = { + token: response?.signInUserSession?.idToken?.jwtToken, + id: response?.attributes?.sub || '' + } + const { data } = await postApi( + dispatch, + `${process.env.REACT_APP_API_BASE_URL}/api/users`, + { id: userdata.id } + ).catch((err) => console.log(err)) } window.localStorage.setItem('userInfo', JSON.stringify(userdata)) - dispatch({ type: USER_REGISTER_SUCCESS, payload: userdata }) - dispatch({ type: USER_LOGIN_SUCCESS, payload: userdata }) + dispatch({ type: User.USER_REGISTER_SUCCESS, payload: userdata }) + dispatch({ type: User.USER_LOGIN_SUCCESS, payload: userdata }) await routingCommunityNews(dispatch, false) } catch (error) { dispatch({ - type: USER_REGISTER_FAIL, - payload: error.response && error.response.data.error ? error.response.data.error : error.message + type: User.USER_REGISTER_FAIL, + payload: + error.response && error.response.data.error + ? error.response.data.error + : error.message }) } } @@ -134,7 +109,7 @@ export const register = (name, password) => async (dispatch) => { export const login = (name, password) => async (dispatch) => { let data = {} try { - dispatch({ type: USER_LOGIN_REQUEST }) + dispatch({ type: User.USER_LOGIN_REQUEST }) if (process.env.REACT_APP_AUTH_METHOD !== 'cognito') { const { data: tokendata } = await postApi( dispatch, @@ -149,63 +124,80 @@ export const login = (name, password) => async (dispatch) => { id: response?.attributes?.sub || '' } window.localStorage.setItem('userInfo', JSON.stringify(data)) - await postApi(dispatch, `${process.env.REACT_APP_API_BASE_URL}/api/users`, { id: data.id }, { - headers: { - Authorization: 'Bearer ' + data.token + await postApi( + dispatch, + `${process.env.REACT_APP_API_BASE_URL}/api/users`, + { id: data.id }, + { + headers: { + Authorization: 'Bearer ' + data.token + } } - }) + ) - await axios.put(`${process.env.REACT_APP_API_BASE_URL}/api/users/profile`, { - firstName: response.attributes.given_name, - lastName: response.attributes.family_name, - birthday: response.attributes.birthdate, - phone: response.attributes.phone_number, - email: response.attributes.email - }, - { - headers: { - Authorization: 'Bearer ' + data.token + await axios.put( + `${process.env.REACT_APP_API_BASE_URL}/api/users/profile`, + { + firstName: response.attributes.given_name, + lastName: response.attributes.family_name, + birthday: response.attributes.birthdate, + phone: response.attributes.phone_number, + email: response.attributes.email + }, + { + headers: { + Authorization: 'Bearer ' + data.token + } } - }) + ) } window.localStorage.setItem('userInfo', JSON.stringify(data)) - dispatch({ type: USER_LOGIN_SUCCESS, payload: data }) + dispatch({ type: User.USER_LOGIN_SUCCESS, payload: data }) await routingCommunityNews(dispatch, true) } catch (error) { dispatch({ - type: USER_LOGIN_FAIL, - payload: error.response && error.response.data.error - ? error.response.data.error - : error.message + type: User.USER_LOGIN_FAIL, + payload: + error.response && error.response.data.error + ? error.response.data.error + : error.message }) } } export const getUserDetails = (id) => async (dispatch) => { try { - dispatch({ type: USER_DETAILS_REQUEST }) - const { data } = await getApi(dispatch, `${process.env.REACT_APP_API_BASE_URL}/api/users/profile/${id}`) - dispatch({ type: USER_DETAILS_SUCCESS, payload: data }) + dispatch({ type: User.USER_DETAILS_REQUEST }) + const { data } = await getApi( + dispatch, + `${process.env.REACT_APP_API_BASE_URL}/api/users/profile/${id}` + ) + dispatch({ type: User.USER_DETAILS_SUCCESS, payload: data }) } catch (error) { - const message = error.response && error.response.data.error ? error.response.data.error : error.message - dispatch({ type: USER_DETAILS_FAIL, payload: message }) + const message = + error.response && error.response.data.error + ? error.response.data.error + : error.message + dispatch({ type: User.USER_DETAILS_FAIL, payload: message }) } } export const checkAndUpdateToken = () => async (dispatch) => { - dispatch({ type: ACCESS_TOKEN_REQUEST }) - getApi(dispatch, `${process.env.REACT_APP_API_BASE_URL}/api/users/token`).then((data) => { - if (data) { - if (data?.response?.status === 201) { - dispatch({ type: ACCESS_TOKEN_SUCCESS, payload: true }) - return true + dispatch({ type: User.ACCESS_TOKEN_REQUEST }) + getApi(dispatch, `${process.env.REACT_APP_API_BASE_URL}/api/users/token`) + .then((data) => { + if (data) { + if (data?.response?.status === 201) { + dispatch({ type: User.ACCESS_TOKEN_SUCCESS, payload: true }) + return true + } + } else { + return tokenFailure(dispatch, 'Unauthorized') } - } else { + }) + .catch((data) => { return tokenFailure(dispatch, 'Unauthorized') - } - }).catch((data) => { - return tokenFailure(dispatch, 'Unauthorized') - /* const message = data.response && data.response.data.name ? data.response.data.name : data.message + /* const message = data.response && data.response.data.name ? data.response.data.name : data.message if (message === 'TokenExpired') { if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { Auth.currentSession().then((res) => { @@ -214,8 +206,8 @@ export const checkAndUpdateToken = () => async (dispatch) => { if (userInfo.token == '') return tokenFailure(dispatch, message) else { window.localStorage.setItem('userInfo', JSON.stringify(userInfo)) - dispatch({ type: USER_LOGIN_SUCCESS, payload: userInfo }) - dispatch({ type: ACCESS_TOKEN_SUCCESS, payload: true }) + dispatch({ type: User.USER_LOGIN_SUCCESS, payload: userInfo }) + dispatch({ type: User.ACCESS_TOKEN_SUCCESS, payload: true }) return true } }).catch(data => tokenFailure(dispatch, 'Unauthorized')) @@ -226,8 +218,8 @@ export const checkAndUpdateToken = () => async (dispatch) => { if (userInfo.token == '') return tokenFailure(dispatch, message) else { window.localStorage.setItem('userInfo', JSON.stringify(userInfo)) - dispatch({ type: USER_LOGIN_SUCCESS, payload: userInfo }) - dispatch({ type: ACCESS_TOKEN_SUCCESS, payload: true }) + dispatch({ type: User.USER_LOGIN_SUCCESS, payload: userInfo }) + dispatch({ type: User.ACCESS_TOKEN_SUCCESS, payload: true }) return true } }).catch(data => tokenFailure(dispatch, 'Unauthorized')) @@ -235,21 +227,24 @@ export const checkAndUpdateToken = () => async (dispatch) => { } else { return tokenFailure(dispatch, 'Unauthorized') } */ - }) + }) } const tokenFailure = (dispatch, message) => { - dispatch({ type: USER_DETAILS_FAIL, payload: message }) + dispatch({ type: User.USER_DETAILS_FAIL, payload: message }) window.localStorage.clear() - dispatch({ type: USER_LOGOUT }) + dispatch({ type: User.USER_LOGOUT }) window.location.href = '/login' return false } export const getMyDetails = () => async (dispatch) => { try { - dispatch({ type: USER_DETAILS_REQUEST }) - const { data } = await getApi(dispatch, `${process.env.REACT_APP_API_BASE_URL}/api/users/profile`) + dispatch({ type: User.USER_DETAILS_REQUEST }) + const { data } = await getApi( + dispatch, + `${process.env.REACT_APP_API_BASE_URL}/api/users/profile` + ) const userdata = { firstName: data.firstName, lastName: data.lastName, @@ -262,21 +257,28 @@ export const getMyDetails = () => async (dispatch) => { role: data.role } if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { - const { attributes } = await Auth.currentAuthenticatedUser({ bypassCache: true }) + const { attributes } = await Auth.currentAuthenticatedUser({ + bypassCache: true + }) userdata.phoneVerified = attributes.phone_number_verified userdata.emailVerified = attributes.email_verified } - dispatch({ type: USER_DETAILS_SUCCESS, payload: userdata }) + dispatch({ type: User.USER_DETAILS_SUCCESS, payload: userdata }) } catch (error) { - const message = error.response && error.response.data.error ? error.response.data.error : error.message - dispatch({ type: USER_DETAILS_FAIL, payload: message }) + const message = + error.response && error.response.data.error + ? error.response.data.error + : error.message + dispatch({ type: User.USER_DETAILS_FAIL, payload: message }) } } export const updateUser = (user, history) => async (dispatch, getState) => { try { - dispatch({ type: USER_UPDATE_REQUEST }) - const { userLogin: { userInfo } } = getState() + dispatch({ type: User.USER_UPDATE_REQUEST }) + const { + userLogin: { userInfo } + } = getState() const userProfileFormData = new FormData() userProfileFormData.append('firstName', user.firstName) userProfileFormData.append('lastName', user.lastName) @@ -296,7 +298,11 @@ export const updateUser = (user, history) => async (dispatch, getState) => { bypassCache: true }) } - const { data } = await axios.put(`${process.env.REACT_APP_API_BASE_URL}/api/users/profile`, userProfileFormData, config) + const { data } = await axios.put( + `${process.env.REACT_APP_API_BASE_URL}/api/users/profile`, + userProfileFormData, + config + ) if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { const toBeUpdated = { email: user.email, @@ -307,210 +313,254 @@ export const updateUser = (user, history) => async (dispatch, getState) => { if (user.birthday) toBeUpdated.birthdate = user.birthday await Auth.updateUserAttributes(currentUser, toBeUpdated) } - dispatch({ type: USER_DETAILS_SUCCESS, payload: { user: data } }) + dispatch({ type: User.USER_DETAILS_SUCCESS, payload: { user: data } }) history.push('/myProfile') } catch (error) { - const message = error.response && error.response.data.error ? error.response.data.error : error.message + const message = + error.response && error.response.data.error + ? error.response.data.error + : error.message if (message === 'Not authorized, token failed') { dispatch(logout()) } - dispatch({ type: USER_UPDATE_FAIL, payload: message }) + dispatch({ type: User.USER_UPDATE_FAIL, payload: message }) } } export const listUsers = () => async (dispatch) => { try { - dispatch({ type: USER_LIST_REQUEST }) - const { data } = await getApi(dispatch, `${process.env.REACT_APP_API_BASE_URL}/api/users`) - dispatch({ type: USER_LIST_SUCCESS, payload: data }) + dispatch({ type: User.USER_LIST_REQUEST }) + const { data } = await getApi( + dispatch, + `${process.env.REACT_APP_API_BASE_URL}/api/users` + ) + dispatch({ type: User.USER_LIST_SUCCESS, payload: data }) } catch (error) { - const message = error.response && error.response.data.error ? error.response.data.error : error.message + const message = + error.response && error.response.data.error + ? error.response.data.error + : error.message if (message === 'Not authorized, token failed') { dispatch(logout()) } - dispatch({ type: USER_LIST_FAIL, payload: message }) + dispatch({ type: User.USER_LIST_FAIL, payload: message }) } } export const searchUsers = (search) => async (dispatch) => { try { - dispatch({ type: USER_SEARCH_REQUEST }) - const { data } = await getApi(dispatch, `${process.env.REACT_APP_API_BASE_URL}/api/users/search?name=${search}`) - dispatch({ type: USER_SEARCH_SUCCESS, payload: data }) + dispatch({ type: User.USER_SEARCH_REQUEST }) + const { data } = await getApi( + dispatch, + `${process.env.REACT_APP_API_BASE_URL}/api/users/search?name=${search}` + ) + dispatch({ type: User.USER_SEARCH_SUCCESS, payload: data }) } catch (error) { dispatch({ - type: USER_SEARCH_FAIL, - payload: error.response && error.response.data.error - ? error.response.data.error - : error.message + type: User.USER_SEARCH_FAIL, + payload: + error.response && error.response.data.error + ? error.response.data.error + : error.message }) } } export const logout = () => (dispatch) => { - Auth.signOut().then(() => { - window.localStorage.clear() - dispatch({ type: USER_LOGOUT }) - document.location.href = '/login' - }).catch(err => console.log(err)) + Auth.signOut() + .then(() => { + window.localStorage.clear() + dispatch({ type: User.USER_LOGOUT }) + document.location.href = '/login' + }) + .catch((err) => console.log(err)) } export const confirmPin = (username, code) => async (dispatch) => { try { - dispatch({ type: USER_CONFIRM_CODE_REQUEST }) + dispatch({ type: User.USER_CONFIRM_CODE_REQUEST }) if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { const { data } = await Auth.confirmSignUp(username, code) - dispatch({ type: USER_CONFIRM_CODE_SUCCESS, payload: data }) + dispatch({ type: User.USER_CONFIRM_CODE_SUCCESS, payload: data }) } else { document.location.href = '/' } } catch (error) { dispatch({ - type: USER_CONFIRM_CODE_FAIL, - payload: error.response && error.response.data.error - ? error.response.data.error - : error.message + type: User.USER_CONFIRM_CODE_FAIL, + payload: + error.response && error.response.data.error + ? error.response.data.error + : error.message }) } } export const resendCodeAction = (username) => async (dispatch) => { try { - dispatch({ type: USER_RESEND_CODE_REQUEST }) + dispatch({ type: User.USER_RESEND_CODE_REQUEST }) if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { const data = await Auth.resendSignUp(username) - dispatch({ type: USER_RESEND_CODE_SUCCESS }) + dispatch({ type: User.USER_RESEND_CODE_SUCCESS }) } else { document.location.href = '/' } } catch (error) { dispatch({ - type: USER_RESEND_CODE_FAIL, - payload: error.response && error.response.data.error - ? error.response.data.error - : error.message + type: User.USER_RESEND_CODE_FAIL, + payload: + error.response && error.response.data.error + ? error.response.data.error + : error.message }) } } export const verifyCurrentUserAttribute = (attr) => async (dispatch) => { try { - dispatch({ type: USER_ATTR_RESEND_CODE_REQUEST }) - dispatch({ type: USER_ATTR_CONFIRM_CODE_REQUEST }) + dispatch({ type: User.USER_ATTR_RESEND_CODE_REQUEST }) + dispatch({ type: User.USER_ATTR_CONFIRM_CODE_REQUEST }) if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { const data = await Auth.verifyCurrentUserAttribute(attr) - dispatch({ type: USER_ATTR_RESEND_CODE_SUCCESS }) + dispatch({ type: User.USER_ATTR_RESEND_CODE_SUCCESS }) } else { document.location.href = '/' } } catch (error) { dispatch({ - type: USER_ATTR_RESEND_CODE_FAIL, - payload: error.response && error.response.data.error - ? error.response.data.error - : error.message + type: User.USER_ATTR_RESEND_CODE_FAIL, + payload: + error.response && error.response.data.error + ? error.response.data.error + : error.message }) } } -export const verifyCurrentUserAttributeSubmit = (attr, code) => async (dispatch, getState) => { - try { - dispatch({ type: USER_ATTR_CONFIRM_CODE_REQUEST }) - dispatch({ type: USER_ATTR_RESEND_CODE_REQUEST }) - const { userDetails: { user } } = getState() - if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { - await Auth.verifyCurrentUserAttributeSubmit(attr, code) - const userdata = user - const { attributes } = await Auth.currentAuthenticatedUser({ - bypassCache: true +export const verifyCurrentUserAttributeSubmit = + (attr, code) => async (dispatch, getState) => { + try { + dispatch({ type: User.USER_ATTR_CONFIRM_CODE_REQUEST }) + dispatch({ type: User.USER_ATTR_RESEND_CODE_REQUEST }) + const { + userDetails: { user } + } = getState() + if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { + await Auth.verifyCurrentUserAttributeSubmit(attr, code) + const userdata = user + const { attributes } = await Auth.currentAuthenticatedUser({ + bypassCache: true + }) + userdata.phoneVerified = attributes.phone_number_verified + userdata.emailVerified = attributes.email_verified + dispatch({ type: User.USER_DETAILS_SUCCESS, payload: userdata }) + dispatch({ type: User.USER_ATTR_CONFIRM_CODE_SUCCESS }) + } else { + document.location.href = '/myProfile' + } + } catch (error) { + dispatch({ + type: User.USER_ATTR_CONFIRM_CODE_FAIL, + payload: + error.response && error.response.data.error + ? error.response.data.error + : error.message }) - userdata.phoneVerified = attributes.phone_number_verified - userdata.emailVerified = attributes.email_verified - dispatch({ type: USER_DETAILS_SUCCESS, payload: userdata }) - dispatch({ type: USER_ATTR_CONFIRM_CODE_SUCCESS }) - } else { - document.location.href = '/myProfile' } - } catch (error) { - dispatch({ - type: USER_ATTR_CONFIRM_CODE_FAIL, - payload: error.response && error.response.data.error - ? error.response.data.error - : error.message - }) } -} export const forgotPassword = (username) => async (dispatch) => { try { - dispatch({ type: USER_FORGOT_PWD_RESEND_CODE_REQUEST }) + dispatch({ type: User.USER_FORGOT_PWD_RESEND_CODE_REQUEST }) if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { const data = await Auth.forgotPassword(username) - dispatch({ type: USER_FORGOT_PWD_CODE_SUCCESS, payload: `Code has been sent to your ${data.CodeDeliveryDetails.AttributeName.split('_').join(' ')}.` }) + dispatch({ + type: User.USER_FORGOT_PWD_CODE_SUCCESS, + payload: `Code has been sent to your ${data.CodeDeliveryDetails.AttributeName.split( + '_' + ).join(' ')}.` + }) return data } else { document.location.href = '/' } } catch (error) { dispatch({ - type: USER_FORGOT_PWD_CODE_FAIL, - payload: error.response && error.response.data.error - ? error.response.data.error - : error.message + type: User.USER_FORGOT_PWD_CODE_FAIL, + payload: + error.response && error.response.data.error + ? error.response.data.error + : error.message }) } } -export const forgotPasswordSubmit = (username, code, confirmPassword, history) => async (dispatch) => { - try { - dispatch({ type: USER_FORGOT_PWD_CONFIRM_CODE_REQUEST }) - if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { - await Auth.forgotPasswordSubmit(username, code, confirmPassword) - dispatch({ type: USER_FORGOT_PWD_CODE_SUCCESS, payload: 'Password has been changed successfully.' }) - dispatch({ type: USER_FORGOT_PWD_CODE_RESET }) - history.push('/login') - } else { - document.location.href = '/' +export const forgotPasswordSubmit = + (username, code, confirmPassword, history) => async (dispatch) => { + try { + dispatch({ type: User.USER_FORGOT_PWD_CONFIRM_CODE_REQUEST }) + if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { + await Auth.forgotPasswordSubmit(username, code, confirmPassword) + dispatch({ + type: User.USER_FORGOT_PWD_CODE_SUCCESS, + payload: 'Password has been changed successfully.' + }) + dispatch({ type: User.USER_FORGOT_PWD_CODE_RESET }) + history.push('/login') + } else { + document.location.href = '/' + } + } catch (error) { + dispatch({ + type: User.USER_FORGOT_PWD_CODE_FAIL, + payload: + error?.response && error.response.data.error + ? error.response.data.error + : error.message + }) } - } catch (error) { - dispatch({ - type: USER_FORGOT_PWD_CODE_FAIL, - payload: error?.response && error.response.data.error - ? error.response.data.error - : error.message - }) } -} -export const changePassword = (oldPassword, newPassword) => async (dispatch) => { - let resdata - try { - dispatch({ type: USER_PASSWORD_CHANGE_REQUEST }) - if (process.env.REACT_APP_AUTH_METHOD !== 'cognito') { - const { data } = await postApi(dispatch, - `${process.env.REACT_APP_API_BASE_URL}/api/users/changePassword`, - { oldPassword, newPassword } - ) - resdata = data - } else { - const user = await Auth.currentAuthenticatedUser() - resdata = await Auth.changePassword(user, oldPassword, newPassword) - } +export const changePassword = + (oldPassword, newPassword) => async (dispatch) => { + let resdata + try { + dispatch({ type: User.USER_PASSWORD_CHANGE_REQUEST }) + if (process.env.REACT_APP_AUTH_METHOD !== 'cognito') { + const { data } = await postApi( + dispatch, + `${process.env.REACT_APP_API_BASE_URL}/api/users/changePassword`, + { oldPassword, newPassword } + ) + resdata = data + } else { + const user = await Auth.currentAuthenticatedUser() + resdata = await Auth.changePassword(user, oldPassword, newPassword) + } - dispatch({ type: USER_PASSWORD_CHANGE_SUCCESS }) - } catch (error) { - dispatch({ - type: USER_PASSWORD_CHANGE_FAIL, - payload: error.response && error.response.data.message - ? (error.response.data.__type === 'NotAuthorizedException' ? 'Incorrect old password.' : error.response.data.message) - : error.message - }) + dispatch({ type: User.USER_PASSWORD_CHANGE_SUCCESS }) + } catch (error) { + dispatch({ + type: User.USER_PASSWORD_CHANGE_FAIL, + payload: + error.response && error.response.data.message + ? error.response.data.__type === 'NotAuthorizedException' + ? 'Incorrect old password.' + : error.response.data.message + : error.message + }) + } } -} export const routingCommunityNews = async (dispatch, route = false) => { - const communityData = await getApi(dispatch, `${process.env.REACT_APP_API_BASE_URL}/api/communities/user`) - window.localStorage.setItem('currentCommunity', JSON.stringify(communityData.data.communities[0])) + const communityData = await getApi( + dispatch, + `${process.env.REACT_APP_API_BASE_URL}/api/communities/user` + ) + window.localStorage.setItem( + 'currentCommunity', + JSON.stringify(communityData.data.communities[0]) + ) if (route) { document.location.href = `/community-page-news/${communityData.data.communities[0].slug}` } diff --git a/src/assets/images/email.svg b/src/assets/images/email.svg new file mode 100644 index 000000000..b228cb1bf --- /dev/null +++ b/src/assets/images/email.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/phone-call-outline.svg b/src/assets/images/phone-call-outline.svg new file mode 100644 index 000000000..881ce1e10 --- /dev/null +++ b/src/assets/images/phone-call-outline.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/input/Input.jsx b/src/components/input/Input.jsx index 91ef18733..67a8268b4 100644 --- a/src/components/input/Input.jsx +++ b/src/components/input/Input.jsx @@ -16,7 +16,8 @@ const Input = React.forwardRef( showPassword, children, noIcon, - disabled + disabled, + onChange }, ref ) => { @@ -25,7 +26,11 @@ const Input = React.forwardRef( return ( <>
-
+
{showLabel && (

{placeholder} @@ -33,7 +38,11 @@ const Input = React.forwardRef( )}

{!noIcon && ( -
+
{children}
)} @@ -46,7 +55,10 @@ const Input = React.forwardRef( id={id} ref={ref} type={type} - onChange={(e) => setShowLabel(e.target.value)} + onChange={(e) => { + setShowLabel(e.target.value) + onChange(e) + }} disabled={disabled} autoComplete='off' /> @@ -63,14 +75,15 @@ const Input = React.forwardRef( )}
- {errors?.[`${name}`] && + {errors?.[`${name}`] && (

{message}} /> -

} +

+ )}
) diff --git a/src/components/input/Input.scss b/src/components/input/Input.scss index 7029b6534..2b3f4d657 100644 --- a/src/components/input/Input.scss +++ b/src/components/input/Input.scss @@ -59,6 +59,10 @@ width: 24px; margin-right: 0.5em; + path { + fill: var(--primary-color); + } + img { width: 100%; height: 100%; @@ -107,21 +111,21 @@ text-transform: inherit; } - input[type="number"] { + input[type='number'] { -moz-appearance: textfield; } - input[type="number"]::-webkit-outer-spin-button, - input[type="number"]::-webkit-inner-spin-button { + input[type='number']::-webkit-outer-spin-button, + input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } - input[type="date"] { + input[type='date'] { color: var(--primary-grey); } - input[type="date"]::-webkit-calendar-picker-indicator { + input[type='date']::-webkit-calendar-picker-indicator { display: none; } diff --git a/src/components/signInSignUp/SignUp.jsx b/src/components/signInSignUp/SignUp.jsx index c020abaa5..81d346ab1 100644 --- a/src/components/signInSignUp/SignUp.jsx +++ b/src/components/signInSignUp/SignUp.jsx @@ -13,6 +13,8 @@ import OAuthBtn from '../oAuthBtn/OAuthBtn' import Input from '../input/Input' import { ReactComponent as UserAvatar } from '../../assets/images/user-green-outline.svg' import { ReactComponent as Lock } from '../../assets/images/lock-outline.svg' +import { ReactComponent as Email } from '../../assets/images/email.svg' +import { ReactComponent as Phone } from '../../assets/images/phone-call-outline.svg' import './SignInSignUp.scss' const SignIn = () => { @@ -31,6 +33,8 @@ const SignIn = () => { const dispatch = useDispatch() const [showPassword, setShowPassword] = useState(false) + const [inputVal, setInputVal] = useState('') + const [checkType, setCheckType] = useState('') const togglePasswordVisibility = () => { setShowPassword(!showPassword) @@ -48,7 +52,14 @@ const SignIn = () => { const onSubmit = ({ username, password }) => { return dispatch(register(username, password)) } - + useEffect(() => { + const rexEmail = /^\S+@\S+$/ + rexEmail.test(inputVal) + ? setCheckType('email') + : /^\d+$/.test(inputVal) + ? setCheckType('number') + : setCheckType('username') + }, [inputVal]) return (

{welcomeBack}

@@ -67,8 +78,15 @@ const SignIn = () => { } })} errors={errors} + onChange={(e) => setInputVal(e.target.value)} > - + {checkType === 'email' ? ( + + ) : checkType === 'number' ? ( + + ) : ( + + )} {
Date: Wed, 11 Aug 2021 11:44:00 +0545 Subject: [PATCH 2/8] sign up input type --- package.json | 1 + src/components/input/Input.jsx | 2 +- src/components/input/Input.scss | 13 +++-- src/components/signInSignUp/PhoneNumber.jsx | 13 +++++ src/components/signInSignUp/SignInSignUp.scss | 49 ++++++++++++++++--- src/components/signInSignUp/SignUp.jsx | 36 ++++++++++++-- 6 files changed, 98 insertions(+), 16 deletions(-) create mode 100644 src/components/signInSignUp/PhoneNumber.jsx diff --git a/package.json b/package.json index 164f5be6d..0962f8907 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react-dropzone": "^11.3.2", "react-hook-form": "^6.15.4", "react-modal": "^3.14.3", + "react-phone-number-input": "^3.1.25", "react-player": "^2.9.0", "react-query": "^3.17.1", "react-redux": "^7.2.3", diff --git a/src/components/input/Input.jsx b/src/components/input/Input.jsx index 67a8268b4..d45ba0bfa 100644 --- a/src/components/input/Input.jsx +++ b/src/components/input/Input.jsx @@ -17,7 +17,7 @@ const Input = React.forwardRef( children, noIcon, disabled, - onChange + onChange = () => {} }, ref ) => { diff --git a/src/components/input/Input.scss b/src/components/input/Input.scss index 2b3f4d657..11ed4f17d 100644 --- a/src/components/input/Input.scss +++ b/src/components/input/Input.scss @@ -51,14 +51,21 @@ width: 100%; .icon { - align-items: center; display: flex; - flex-direction: column; + align-items: center; + justify-content: flex-start; + flex-direction: row-reverse; height: 24px; padding: 3px 0; - width: 24px; margin-right: 0.5em; + span { + font-family: inherit; + font-size: 1.05em; + background-color: transparent; + color: var(--primary-grey); + } + path { fill: var(--primary-color); } diff --git a/src/components/signInSignUp/PhoneNumber.jsx b/src/components/signInSignUp/PhoneNumber.jsx new file mode 100644 index 000000000..93b966689 --- /dev/null +++ b/src/components/signInSignUp/PhoneNumber.jsx @@ -0,0 +1,13 @@ +import PhoneInput from 'react-phone-number-input' + +const PhoneNumber = ({ value, setValue }) => { + return ( + + ) +} +export default PhoneNumber diff --git a/src/components/signInSignUp/SignInSignUp.scss b/src/components/signInSignUp/SignInSignUp.scss index 49e319fdf..dced0b452 100644 --- a/src/components/signInSignUp/SignInSignUp.scss +++ b/src/components/signInSignUp/SignInSignUp.scss @@ -5,7 +5,7 @@ height: inherit; //@media only screen and (max-width: 1440px) { - width: 100%; + width: 100%; //} /*@media only screen and (max-width: 375px) { @@ -22,7 +22,7 @@ min-height: 40px; white-space: nowrap; color: var(--primary-white); - font-family: "IBM Plex Sans-SemiBold", Helvetica, sans-serif; + font-family: 'IBM Plex Sans-SemiBold', Helvetica, sans-serif; font-size: 35px; font-style: normal; font-weight: 600; @@ -129,7 +129,7 @@ @media only screen and (min-width: 1024px) { flex-direction: row; } - + @media only screen and (max-width: 1023px) and (min-width: 767px) { flex-direction: column; align-items: flex-start; @@ -226,7 +226,7 @@ @media only screen and (min-width: 1024px) { flex-direction: row; } - + @media only screen and (max-width: 1023px) and (min-width: 767px) { flex-direction: column; } @@ -243,7 +243,7 @@ } .span { - font-family: "IBM Plex Sans-Regular", Helvetica, sans-serif; + font-family: 'IBM Plex Sans-Regular', Helvetica, sans-serif; font-size: 16px; &-1 { @@ -262,7 +262,7 @@ .white16px { color: var(--primary-white); - font-family: "IBM Plex Sans-SemiBold", Helvetica, sans-serif; + font-family: 'IBM Plex Sans-SemiBold', Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: 600; @@ -270,7 +270,7 @@ .green16px { color: var(--primary-color); - font-family: "IBM Plex Sans-SemiBold", Helvetica, sans-serif; + font-family: 'IBM Plex Sans-SemiBold', Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: 600; @@ -278,7 +278,7 @@ .transparent16px { color: transparent; - font-family: "IBM Plex Sans-Regular", Helvetica, sans-serif; + font-family: 'IBM Plex Sans-Regular', Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; @@ -294,3 +294,36 @@ margin-top: 1em; } } +.PhoneInput { + display: flex; + align-items: center; +} +.PhoneInputInput { + display: none; +} +.PhoneInputCountry { + position: relative; + align-self: stretch; + display: flex; + align-items: center; + margin-right: 0.35em; +} +.PhoneInputCountrySelect { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 1; + border: 0; + opacity: 0; + cursor: pointer; +} +.PhoneInputCountryIcon { + width: calc(1em * 1.5); + height: 1em; +} +// .PhoneInputCountryIcon--border { +// background-color: rgba(0, 0, 0, 0.1); +// box-shadow: 0 0 0 1px rgb(0 0 0 / 50%), inset 0 0 0 1px rgb(0 0 0 / 50%); +// } diff --git a/src/components/signInSignUp/SignUp.jsx b/src/components/signInSignUp/SignUp.jsx index 81d346ab1..768f606cc 100644 --- a/src/components/signInSignUp/SignUp.jsx +++ b/src/components/signInSignUp/SignUp.jsx @@ -7,6 +7,7 @@ import { register } from '../../actions/userAction' import { USER_LOGIN_SUCCESS } from '../../constants/userConstants' import { SignInSignUpData } from './SignInSignUpData' +import PhoneNumber from './PhoneNumber' import Button from '../button/Button' import Checkbox from '../checkbox/Checkbox' import OAuthBtn from '../oAuthBtn/OAuthBtn' @@ -35,6 +36,7 @@ const SignIn = () => { const [showPassword, setShowPassword] = useState(false) const [inputVal, setInputVal] = useState('') const [checkType, setCheckType] = useState('') + const [value, setValue] = useState('') const togglePasswordVisibility = () => { setShowPassword(!showPassword) @@ -50,23 +52,37 @@ const SignIn = () => { }, [history, userInfo]) const onSubmit = ({ username, password }) => { - return dispatch(register(username, password)) + const phone = checkType === 'number' && value ? value + username : null + const email = checkType === 'email' ? username : null + username = + checkType === 'username' + ? username + : Math.random().toString(36).substring(3, 6) + new Date().getTime() + return dispatch(register(username, phone, email, password)) } useEffect(() => { - const rexEmail = /^\S+@\S+$/ + const rexEmail = + /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ rexEmail.test(inputVal) ? setCheckType('email') : /^\d+$/.test(inputVal) ? setCheckType('number') : setCheckType('username') }, [inputVal]) + + const inputPlaceholder = + checkType === 'email' + ? 'Email' + : checkType === 'number' + ? 'Phone Number' + : 'Username' return (

{welcomeBack}

{error &&
{error}
} { errors={errors} onChange={(e) => setInputVal(e.target.value)} > + {checkType === 'number' && value ? {value} : ''} {checkType === 'email' ? ( ) : checkType === 'number' ? ( - + ) : ( )} @@ -142,3 +159,14 @@ const SignIn = () => { } export default SignIn + +// const PhoneNumber = ({ value, setValue }) => { +// return ( +// +// ) +// } From 51aef68f62afcf9364cda4c1e30be0960190f37f Mon Sep 17 00:00:00 2001 From: Puskar Adhikari Date: Wed, 11 Aug 2021 15:38:26 +0545 Subject: [PATCH 3/8] user register with email and phone --- api/src/controllers/communityController.js | 240 ++++++++++++++------- api/src/middleware/authMiddleware.js | 26 ++- src/actions/userAction.js | 88 ++++---- src/components/signInSignUp/SignUp.jsx | 38 ++-- src/utils/apiFunc.jsx | 2 +- 5 files changed, 240 insertions(+), 154 deletions(-) diff --git a/api/src/controllers/communityController.js b/api/src/controllers/communityController.js index 4ccafa410..d81cf6371 100644 --- a/api/src/controllers/communityController.js +++ b/api/src/controllers/communityController.js @@ -40,11 +40,12 @@ const getCommunities = async (req, res) => { CASE WHEN "creatorId"=${req.user.id} THEN 'true' ELSE 'false' END - `), 'isCreator' + `), + 'isCreator' ], [ sequelize.literal(`( - SELECT COUNT("userId") + SELECT COUNT("userId") FROM communities_users WHERE "communityId" = communities.id AND active = true AND "userId" = ${req.user.id} )`), @@ -55,13 +56,15 @@ const getCommunities = async (req, res) => { } }) const totalPages = Math.ceil(communities.count / pageSize) - res.json({ - communities: communities.rows.map(rec => ({ ...rec.dataValues })), - totalItems: communities.count, - totalPages, - page, - pageSize - }).status(200) + res + .json({ + communities: communities.rows.map((rec) => ({ ...rec.dataValues })), + totalItems: communities.count, + totalPages, + page, + pageSize + }) + .status(200) } catch (error) { res.json(error) } @@ -72,11 +75,12 @@ const getCommunities = async (req, res) => { // @access Public const getUserCommunities = async (req, res) => { + console.log(req.body) const pageSize = 10 const page = Number(req.query.pageNumber) || 1 // const order = req.query.order || 'DESC' // const ordervalue = order && [['name', order]] - + console.log(req.user.id) db.Community.findAndCountAll({ offset: (page - 1) * pageSize, limit: pageSize, @@ -96,11 +100,12 @@ const getUserCommunities = async (req, res) => { CASE WHEN "creatorId"=${req.user.id} THEN 'true' ELSE 'false' END - `), 'isCreator' + `), + 'isCreator' ], [ sequelize.literal(`( - SELECT COUNT("userId") + SELECT COUNT("userId") FROM communities_users WHERE "communityId" = communities.id AND active = true AND "userId" = ${req.user.id} )`), @@ -111,23 +116,30 @@ const getUserCommunities = async (req, res) => { }, order: [['createdAt', 'DESC']], where: { deleted: false }, - include: [{ - model: db.User, - as: 'followers', - attributes: [], - where: { id: req.user.id }, - through: { attributes: [] } - }] + include: [ + { + model: db.User, + as: 'followers', + attributes: [], + where: { id: req.user.id }, + through: { attributes: [] } + } + ] }) - .then(communities => { + .then((communities) => { const totalPages = Math.ceil(communities.count / pageSize) - res.json({ - communities: communities.rows.map(rec => ({ ...rec.dataValues, attachment: changeFormat(rec.attachment) })), - totalItems: communities.count, - totalPages, - page, - pageSize - }).status(200) + res + .json({ + communities: communities.rows.map((rec) => ({ + ...rec.dataValues, + attachment: changeFormat(rec.attachment) + })), + totalItems: communities.count, + totalPages, + page, + pageSize + }) + .status(200) }) .catch((err) => res.json({ err }).status(400)) } @@ -147,8 +159,19 @@ const createCommunity = async (req, res) => { // auto follow through transactions if (req.body.auto_follow === 'true') { const result = await sequelize.transaction(async (t) => { - const community = await db.Community.create({ ...req.body, creatorId: req.user.id, slug: '', attachment: 'community/' + filename }, { transaction: t }) - const idArrays = await db.User.findAll({ attributes: ['id'] }, { transaction: t }) + const community = await db.Community.create( + { + ...req.body, + creatorId: req.user.id, + slug: '', + attachment: 'community/' + filename + }, + { transaction: t } + ) + const idArrays = await db.User.findAll( + { attributes: ['id'] }, + { transaction: t } + ) const allFollow = [] for (let i = 0; i < idArrays.length; i++) { @@ -166,11 +189,22 @@ const createCommunity = async (req, res) => { return res.json({ message: result }) } else { const followCommunity = await sequelize.transaction(async (t) => { - const community = await db.Community.create({ ...req.body, creatorId: req.user.id, slug: '', attachment: 'community/' + filename }, { transaction: t }) - await db.CommunityUser.create({ userId: req.user.id, communityId: community.id }, { transaction: t }) + const community = await db.Community.create( + { + ...req.body, + creatorId: req.user.id, + slug: '', + attachment: 'community/' + filename + }, + { transaction: t } + ) + await db.CommunityUser.create( + { userId: req.user.id, communityId: community.id }, + { transaction: t } + ) return true }) - if (followCommunity) return res.json({ message: 'Community is Created !!!' }).status(200) + if (followCommunity) { return res.json({ message: 'Community is Created !!!' }).status(200) } } } catch (error) { return res.json({ error: error.message }).status(400) @@ -184,9 +218,12 @@ const getCommunityById = async (req, res) => { const id = req.params.id db.Community.findByPk(id) - .then(communities => { + .then((communities) => { if (communities) { - res.json({ ...communities.dataValues, attachment: changeFormat(communities.dataValues.attachment) }) + res.json({ + ...communities.dataValues, + attachment: changeFormat(communities.dataValues.attachment) + }) } else { res.status(404) throw new Error('Community not found') @@ -214,14 +251,25 @@ const deleteCommunity = async (req, res) => { } const result = await sequelize.transaction(async (t) => { - const communityUserIds = await db.CommunityUser.findAll({ where: { communityId: id } }, { transaction: t }) + const communityUserIds = await db.CommunityUser.findAll( + { where: { communityId: id } }, + { transaction: t } + ) communityUserIds.forEach(async function (communityId) { const { id } = communityId - await db.CommunityUser.update({ active: false }, { where: { id } }, { transaction: t }) + await db.CommunityUser.update( + { active: false }, + { where: { id } }, + { transaction: t } + ) }) - await db.Community.update({ deleted: true }, { where: { id } }, { transaction: t }) + await db.Community.update( + { deleted: true }, + { where: { id } }, + { transaction: t } + ) return 'Community Deleted with links.' }) @@ -241,9 +289,7 @@ const deleteCommunity = async (req, res) => { // @access Private const updateCommunity = async (req, res) => { try { - const { - name, description, file, toggleActive - } = req.body + const { name, description, file, toggleActive } = req.body let filename = '' if (req.file) { @@ -274,11 +320,11 @@ const updateCommunity = async (req, res) => { // converting them to the array of ids not(object with ids) // to check console.log(followIdArrays) and newFollowIds - const newFollowIds = followIdArrays.map(item => item.userId) - const newUserIds = userIdArrays.map(item => item.id) + const newFollowIds = followIdArrays.map((item) => item.userId) + const newUserIds = userIdArrays.map((item) => item.id) // this is removing any duplicate items between newFollowIds and newUserIds - const idArrays = newUserIds.filter(item => { + const idArrays = newUserIds.filter((item) => { return newFollowIds.indexOf(item) === -1 }) @@ -295,33 +341,41 @@ const updateCommunity = async (req, res) => { await db.CommunityUser.bulkCreate(allFollow, { transaction: t }) if (!req.file) { - await db.Community.update({ ...req.body, slug: '' }, - { where: { id } }) + await db.Community.update( + { ...req.body, slug: '' }, + { where: { id } } + ) return 'Community is updated with autoFollow' } - await db.Community.update({ ...req.body, slug: '', attachment: 'community/' + filename }, - { where: { id } }) + await db.Community.update( + { ...req.body, slug: '', attachment: 'community/' + filename }, + { where: { id } } + ) return 'Community is updated with autoFollow' }) return res.json({ message: result }) } else { if (!req.file) { - await db.Community.update({ - name, - description - }, - { where: { id }, returning: true, attributes: ['id'] }) + await db.Community.update( + { + name, + description + }, + { where: { id }, returning: true, attributes: ['id'] } + ) return res.json({ message: 'Community Updated !!!' }).status(200) } - await db.Community.update({ - name, - description, - attachment: 'community/' + filename - }, - { where: { id }, returning: true, attributes: ['id'] }) + await db.Community.update( + { + name, + description, + attachment: 'community/' + filename + }, + { where: { id }, returning: true, attributes: ['id'] } + ) return res.json({ message: 'Community Updated !!!' }).status(200) } } else { @@ -340,11 +394,21 @@ const searchCommunityName = (req, res) => { const { name } = req.query const order = req.query.order || 'ASC' - db.Community.findAll({ where: { name: { [Op.iLike]: '%' + name + '%' } }, order: [['name', order]] }) - .then(communities => res.json({ - communities: communities.map(rec => ({ ...rec.dataValues, attachment: changeFormat(rec.attachment) })) - }).status(200)) - .catch(err => res.json({ error: err }).status(400)) + db.Community.findAll({ + where: { name: { [Op.iLike]: '%' + name + '%' } }, + order: [['name', order]] + }) + .then((communities) => + res + .json({ + communities: communities.map((rec) => ({ + ...rec.dataValues, + attachment: changeFormat(rec.attachment) + })) + }) + .status(200) + ) + .catch((err) => res.json({ error: err }).status(400)) } // @desc Search usercommunity name @@ -355,26 +419,44 @@ const searchUserCommunityName = (req, res) => { const order = req.query.order || 'ASC' db.Community.findAll({ - include: [{ - model: db.User, - as: 'creator' && 'followers', - attributes: ['id'], - where: { id: req.user.id }, - through: { - attributes: ['active'], - as: 'followStatus', - where: { - active: true + include: [ + { + model: db.User, + as: 'creator' && 'followers', + attributes: ['id'], + where: { id: req.user.id }, + through: { + attributes: ['active'], + as: 'followStatus', + where: { + active: true + } } } - }], + ], where: { name: { [Op.iLike]: '%' + name + '%' } }, order: [['name', order]] }) - .then(communities => res.json({ - communities: communities.map(rec => ({ ...rec.dataValues, attachment: changeFormat(rec.attachment) })) - }).status(200)) - .catch(err => res.json({ error: err }).status(400)) + .then((communities) => + res + .json({ + communities: communities.map((rec) => ({ + ...rec.dataValues, + attachment: changeFormat(rec.attachment) + })) + }) + .status(200) + ) + .catch((err) => res.json({ error: err }).status(400)) } -module.exports = { getCommunities, getUserCommunities, searchUserCommunityName, createCommunity, getCommunityById, deleteCommunity, updateCommunity, searchCommunityName } +module.exports = { + getCommunities, + getUserCommunities, + searchUserCommunityName, + createCommunity, + getCommunityById, + deleteCommunity, + updateCommunity, + searchCommunityName +} diff --git a/api/src/middleware/authMiddleware.js b/api/src/middleware/authMiddleware.js index 461eb9aab..dc7fcb62b 100644 --- a/api/src/middleware/authMiddleware.js +++ b/api/src/middleware/authMiddleware.js @@ -25,22 +25,28 @@ module.exports = async (req, res, next) => { } else { const jwk = require('./jwks.json') const pem = jwkToPem(jwk.keys[0]) - jwt.verify(token, pem, { algorithms: ['RS256'] }, function (err, decodedToken) { - if (err) { - if (err.message === 'jwt expired') { - throw Error('TokenExpired') - } else { - throw Error('InvalidToken') + jwt.verify( + token, + pem, + { algorithms: ['RS256'] }, + function (err, decodedToken) { + if (err) { + if (err.message === 'jwt expired') { + throw Error('TokenExpired') + } else { + throw Error('InvalidToken') + } } + recoded = decodedToken } - recoded = decodedToken - }) + ) } /* - * TODO: Maintain session and check again local session - */ + * TODO: Maintain session and check again local session + */ if (process.env.AUTH_METHOD !== 'cognito') { req.user = await db.User.findOne({ where: { userID: decoded.id } }) + console.log('user', req.user) } else if (recoded) { req.user = await db.User.findOne({ where: { userID: recoded.sub } }) } else { diff --git a/src/actions/userAction.js b/src/actions/userAction.js index 6d927f376..34d9a69a0 100644 --- a/src/actions/userAction.js +++ b/src/actions/userAction.js @@ -60,51 +60,55 @@ if (process.env.REACT_APP_AUTH_METHOD === 'cognito') { }) } -export const register = (name, password) => async (dispatch) => { - try { - dispatch({ type: User.USER_REGISTER_REQUEST }) - dispatch({ type: User.USER_LOGIN_REQUEST }) - let userdata - if (process.env.REACT_APP_AUTH_METHOD !== 'cognito') { - const { data } = await postApi( - dispatch, - `${process.env.REACT_APP_API_BASE_URL}/api/users`, - { name, password } - ) - userdata = data - } else { - await Auth.signUp({ - username: name, - password, - attributes: { - email: null +export const register = + ({ name, phone, email, password }) => + async (dispatch) => { + try { + dispatch({ type: User.USER_REGISTER_REQUEST }) + dispatch({ type: User.USER_LOGIN_REQUEST }) + let userdata + if (process.env.REACT_APP_AUTH_METHOD !== 'cognito') { + const { data } = await postApi( + dispatch, + `${process.env.REACT_APP_API_BASE_URL}/api/users`, + { name, phone, email, password } + ) + userdata = data + } else { + await Auth.signUp({ + username: name, + password, + attributes: { + email: email, + phone_number: phone + } + }) + const response = await Auth.signIn(name, password) + userdata = { + token: response?.signInUserSession?.idToken?.jwtToken, + id: response?.attributes?.sub || '' + } + + await postApi( + dispatch, + `${process.env.REACT_APP_API_BASE_URL}/api/users`, + { id: userdata.id } + ).catch((err) => console.log(err)) } - }) - const response = await Auth.signIn(name, password) - userdata = { - token: response?.signInUserSession?.idToken?.jwtToken, - id: response?.attributes?.sub || '' + window.localStorage.setItem('userInfo', JSON.stringify(userdata)) + dispatch({ type: User.USER_REGISTER_SUCCESS, payload: userdata }) + dispatch({ type: User.USER_LOGIN_SUCCESS, payload: userdata }) + await routingCommunityNews(dispatch, false) + } catch (error) { + dispatch({ + type: User.USER_REGISTER_FAIL, + payload: + error.response && error.response.data.error + ? error.response.data.error + : error.message + }) } - const { data } = await postApi( - dispatch, - `${process.env.REACT_APP_API_BASE_URL}/api/users`, - { id: userdata.id } - ).catch((err) => console.log(err)) } - window.localStorage.setItem('userInfo', JSON.stringify(userdata)) - dispatch({ type: User.USER_REGISTER_SUCCESS, payload: userdata }) - dispatch({ type: User.USER_LOGIN_SUCCESS, payload: userdata }) - await routingCommunityNews(dispatch, false) - } catch (error) { - dispatch({ - type: User.USER_REGISTER_FAIL, - payload: - error.response && error.response.data.error - ? error.response.data.error - : error.message - }) - } -} export const login = (name, password) => async (dispatch) => { let data = {} diff --git a/src/components/signInSignUp/SignUp.jsx b/src/components/signInSignUp/SignUp.jsx index 768f606cc..891859cf5 100644 --- a/src/components/signInSignUp/SignUp.jsx +++ b/src/components/signInSignUp/SignUp.jsx @@ -36,7 +36,7 @@ const SignIn = () => { const [showPassword, setShowPassword] = useState(false) const [inputVal, setInputVal] = useState('') const [checkType, setCheckType] = useState('') - const [value, setValue] = useState('') + const [countryCode, setCountryCode] = useState('+1') const togglePasswordVisibility = () => { setShowPassword(!showPassword) @@ -51,21 +51,22 @@ const SignIn = () => { } }, [history, userInfo]) - const onSubmit = ({ username, password }) => { - const phone = checkType === 'number' && value ? value + username : null - const email = checkType === 'email' ? username : null - username = + const onSubmit = ({ user, password }) => { + const phone = checkType === 'number' && countryCode ? countryCode : null + const email = checkType === 'email' ? user : null + const name = checkType === 'username' - ? username + ? user : Math.random().toString(36).substring(3, 6) + new Date().getTime() - return dispatch(register(username, phone, email, password)) + return dispatch(register({ name, phone, email, password })) } useEffect(() => { const rexEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ + const regexNumber = /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/ rexEmail.test(inputVal) ? setCheckType('email') - : /^\d+$/.test(inputVal) + : regexNumber.test(inputVal) ? setCheckType('number') : setCheckType('username') }, [inputVal]) @@ -84,7 +85,7 @@ const SignIn = () => { { errors={errors} onChange={(e) => setInputVal(e.target.value)} > - {checkType === 'number' && value ? {value} : ''} + {checkType === 'number' && countryCode ? ( + {countryCode} + ) : ( + '' + )} {checkType === 'email' ? ( ) : checkType === 'number' ? ( - + ) : ( )} @@ -159,14 +164,3 @@ const SignIn = () => { } export default SignIn - -// const PhoneNumber = ({ value, setValue }) => { -// return ( -// -// ) -// } diff --git a/src/utils/apiFunc.jsx b/src/utils/apiFunc.jsx index c01166ee4..1b6b1f812 100644 --- a/src/utils/apiFunc.jsx +++ b/src/utils/apiFunc.jsx @@ -2,7 +2,7 @@ import axios from 'axios' export const configFunc = (options = { headers: {} }) => { const userdata = window.localStorage.getItem('userInfo') - const token = JSON.parse(userdata).token + const token = JSON.parse(userdata)?.token const headers = { 'Content-Type': 'application/json' } headers.Authorization = token && `Bearer ${token}` return { headers: { ...headers, ...options.headers } } From 9689f44a327b05b8442915e5d2e7104206f95d48 Mon Sep 17 00:00:00 2001 From: Puskar Adhikari Date: Wed, 11 Aug 2021 15:51:47 +0545 Subject: [PATCH 4/8] shown country flag when user input country code --- src/components/signInSignUp/SignUp.jsx | 30 +++++++------------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/src/components/signInSignUp/SignUp.jsx b/src/components/signInSignUp/SignUp.jsx index 891859cf5..c11ccf80b 100644 --- a/src/components/signInSignUp/SignUp.jsx +++ b/src/components/signInSignUp/SignUp.jsx @@ -4,7 +4,6 @@ import { useDispatch, useSelector } from 'react-redux' import { useForm } from 'react-hook-form' import { register } from '../../actions/userAction' -import { USER_LOGIN_SUCCESS } from '../../constants/userConstants' import { SignInSignUpData } from './SignInSignUpData' import PhoneNumber from './PhoneNumber' @@ -15,19 +14,11 @@ import Input from '../input/Input' import { ReactComponent as UserAvatar } from '../../assets/images/user-green-outline.svg' import { ReactComponent as Lock } from '../../assets/images/lock-outline.svg' import { ReactComponent as Email } from '../../assets/images/email.svg' -import { ReactComponent as Phone } from '../../assets/images/phone-call-outline.svg' import './SignInSignUp.scss' const SignIn = () => { - const { - welcomeBack, - spanText, - text2, - google, - facebook, - signIn, - failMessage - } = SignInSignUpData + const { welcomeBack, spanText, text2, google, facebook, signIn } = + SignInSignUpData const history = useHistory() const { register: regi, handleSubmit, errors } = useForm() @@ -36,7 +27,6 @@ const SignIn = () => { const [showPassword, setShowPassword] = useState(false) const [inputVal, setInputVal] = useState('') const [checkType, setCheckType] = useState('') - const [countryCode, setCountryCode] = useState('+1') const togglePasswordVisibility = () => { setShowPassword(!showPassword) @@ -52,7 +42,7 @@ const SignIn = () => { }, [history, userInfo]) const onSubmit = ({ user, password }) => { - const phone = checkType === 'number' && countryCode ? countryCode : null + const phone = checkType === 'number' ? user : null const email = checkType === 'email' ? user : null const name = checkType === 'username' @@ -61,10 +51,10 @@ const SignIn = () => { return dispatch(register({ name, phone, email, password })) } useEffect(() => { - const rexEmail = + const regexEmail = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ const regexNumber = /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/ - rexEmail.test(inputVal) + regexEmail.test(inputVal) ? setCheckType('email') : regexNumber.test(inputVal) ? setCheckType('number') @@ -77,6 +67,7 @@ const SignIn = () => { : checkType === 'number' ? 'Phone Number' : 'Username' + return (

{welcomeBack}

@@ -86,7 +77,6 @@ const SignIn = () => { placeholder={inputPlaceholder} type='text' name='user' - id='username' autoFocus='autoFocus' ref={regi({ required: { @@ -95,17 +85,13 @@ const SignIn = () => { } })} errors={errors} + value={inputVal} onChange={(e) => setInputVal(e.target.value)} > - {checkType === 'number' && countryCode ? ( - {countryCode} - ) : ( - '' - )} {checkType === 'email' ? ( ) : checkType === 'number' ? ( - + ) : ( )} From 66145b4ce38449935a0969175d47c3a206dca602 Mon Sep 17 00:00:00 2001 From: Puskar Adhikari Date: Wed, 11 Aug 2021 16:09:23 +0545 Subject: [PATCH 5/8] custom hooks to check input type --- src/components/signInSignUp/SignUp.jsx | 20 ++------------ .../signInSignUp/useCheckInputType.js | 27 +++++++++++++++++++ 2 files changed, 29 insertions(+), 18 deletions(-) create mode 100644 src/components/signInSignUp/useCheckInputType.js diff --git a/src/components/signInSignUp/SignUp.jsx b/src/components/signInSignUp/SignUp.jsx index c11ccf80b..7e274489c 100644 --- a/src/components/signInSignUp/SignUp.jsx +++ b/src/components/signInSignUp/SignUp.jsx @@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form' import { register } from '../../actions/userAction' import { SignInSignUpData } from './SignInSignUpData' +import useCheckInputType from './useCheckInputType' import PhoneNumber from './PhoneNumber' import Button from '../button/Button' @@ -26,7 +27,6 @@ const SignIn = () => { const dispatch = useDispatch() const [showPassword, setShowPassword] = useState(false) const [inputVal, setInputVal] = useState('') - const [checkType, setCheckType] = useState('') const togglePasswordVisibility = () => { setShowPassword(!showPassword) @@ -34,6 +34,7 @@ const SignIn = () => { const userRegister = useSelector((state) => state.userRegister) const { loading, error, userInfo } = userRegister + const { checkType, inputPlaceholder } = useCheckInputType(inputVal) useEffect(() => { if (userInfo) { @@ -50,23 +51,6 @@ const SignIn = () => { : Math.random().toString(36).substring(3, 6) + new Date().getTime() return dispatch(register({ name, phone, email, password })) } - useEffect(() => { - const regexEmail = - /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ - const regexNumber = /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/ - regexEmail.test(inputVal) - ? setCheckType('email') - : regexNumber.test(inputVal) - ? setCheckType('number') - : setCheckType('username') - }, [inputVal]) - - const inputPlaceholder = - checkType === 'email' - ? 'Email' - : checkType === 'number' - ? 'Phone Number' - : 'Username' return ( diff --git a/src/components/signInSignUp/useCheckInputType.js b/src/components/signInSignUp/useCheckInputType.js new file mode 100644 index 000000000..80264e297 --- /dev/null +++ b/src/components/signInSignUp/useCheckInputType.js @@ -0,0 +1,27 @@ +import { useState, useEffect } from 'react' + +const useCheckInputType = (inputVal) => { + const [checkType, setCheckType] = useState('') + + useEffect(() => { + const regexEmail = + /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ + const regexNumber = /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/ + regexEmail.test(inputVal) + ? setCheckType('email') + : regexNumber.test(inputVal) + ? setCheckType('number') + : setCheckType('username') + }, [inputVal]) + + const inputPlaceholder = + checkType === 'email' + ? 'Email' + : checkType === 'number' + ? 'Phone Number' + : 'Username' + + return { checkType, inputPlaceholder } +} + +export default useCheckInputType From 412ad8c36ed7cd5408e550747d2b6226659f4e45 Mon Sep 17 00:00:00 2001 From: Puskar Adhikari Date: Wed, 11 Aug 2021 17:23:45 +0545 Subject: [PATCH 6/8] formatted --- src/components/signInSignUp/Icon.jsx | 19 ++ src/components/signInSignUp/Sign.jsx | 120 ++++++++++++ src/components/signInSignUp/SignIn.jsx | 178 +++--------------- .../signInSignUp/SignInSignUpData.js | 6 +- src/components/signInSignUp/SignUp.jsx | 115 ++--------- 5 files changed, 182 insertions(+), 256 deletions(-) create mode 100644 src/components/signInSignUp/Icon.jsx create mode 100644 src/components/signInSignUp/Sign.jsx diff --git a/src/components/signInSignUp/Icon.jsx b/src/components/signInSignUp/Icon.jsx new file mode 100644 index 000000000..dd402637d --- /dev/null +++ b/src/components/signInSignUp/Icon.jsx @@ -0,0 +1,19 @@ +import PhoneNumber from './PhoneNumber' +import { ReactComponent as UserAvatar } from '../../assets/images/user-green-outline.svg' +import { ReactComponent as Email } from '../../assets/images/email.svg' + +const Icon = ({ checkType, inputVal, setInputVal }) => { + return ( + <> + {checkType === 'email' ? ( + + ) : checkType === 'number' ? ( + + ) : ( + + )} + + ) +} + +export default Icon diff --git a/src/components/signInSignUp/Sign.jsx b/src/components/signInSignUp/Sign.jsx new file mode 100644 index 000000000..316bab08e --- /dev/null +++ b/src/components/signInSignUp/Sign.jsx @@ -0,0 +1,120 @@ +import { useState } from 'react' +import { Link } from 'react-router-dom' +import { useForm } from 'react-hook-form' +import useCheckInputType from './useCheckInputType' +import Icon from './Icon' +import OAuthBtn from '../oAuthBtn/OAuthBtn' +import Checkbox from '../checkbox/Checkbox' +import Button from '../button/Button' +import Input from '../input/Input' +import { ReactComponent as Lock } from '../../assets/images/lock-outline.svg' + +const Sign = ({ + onSubmit, + title, + inputVal, + setInputVal, + spanText, + google, + facebook, + haveAc, + noAc, + signIn, + error, + text, + isSignUp, + welcomeBack +}) => { + const { register: regi, handleSubmit, errors } = useForm() + const [showPassword, setShowPassword] = useState(false) + const togglePasswordVisibility = () => { + setShowPassword(!showPassword) + } + const { checkType, inputPlaceholder } = useCheckInputType(inputVal) + + return ( + +

{title}

+
+ {error &&
{error}
} + setInputVal(e.target.value)} + > + + + + + +
+ {isSignUp ? ( + + ) : ( + + )} +
+ +
+
+
+ +
+
+

{haveAc || noAc}

+ + {welcomeBack || signIn} + +
+
+ + ) +} + +export default Sign diff --git a/src/components/signInSignUp/SignIn.jsx b/src/components/signInSignUp/SignIn.jsx index 044b9826f..32be55f57 100644 --- a/src/components/signInSignUp/SignIn.jsx +++ b/src/components/signInSignUp/SignIn.jsx @@ -1,188 +1,52 @@ import React, { useState, useEffect } from 'react' -import { Link, useHistory } from 'react-router-dom' +import { useHistory } from 'react-router-dom' import { useDispatch, useSelector } from 'react-redux' -import { useForm } from 'react-hook-form' import { login } from '../../actions/userAction' -import { USER_LOGIN_SUCCESS } from '../../constants/userConstants' import { SignInSignUpData } from './SignInSignUpData' - -import Button from '../button/Button' -import Checkbox from '../checkbox/Checkbox' -import Input from '../input/Input' -import OAuthBtn from '../oAuthBtn/OAuthBtn' -import { ReactComponent as UserAvatar } from '../../assets/images/user-green-outline.svg' -import { ReactComponent as Lock } from '../../assets/images/lock-outline.svg' import './SignInSignUp.scss' -import { listUserCommunities, visitCommunity } from '../../actions/communityActions' +import { visitCommunity } from '../../actions/communityActions' +import Sign from './Sign' const SignIn = () => { - const { welcomeBack, rememberMe, text1, google, facebook, failMessage } = + const { welcomeBack, text1, google, facebook, noAc, signIn } = SignInSignUpData - const [user, setUser] = useState(null) const history = useHistory() const dispatch = useDispatch() const userLogin = useSelector((state) => state.userLogin) const { currentCommunity } = useSelector((state) => state.activeCommunity) const { loading, error, userInfo } = userLogin - const { register: regi, errors, handleSubmit } = useForm() - - const [terms, setTerms] = useState(false) - const [termsError, setTermsError] = useState(false) - const [showPassword, setShowPassword] = useState(false) - - const togglePasswordVisibility = () => { - setShowPassword(!showPassword) - } + const [inputVal, setInputVal] = useState('') useEffect(() => { - /* Hub.listen("auth", ({ payload: { event, data } }) => { - console.log(event); - switch (event) { - case "signIn": - case "cognitoHostedUI": - getUser().then((userData) => setUser(userData)); - break; - case "signOut": - setUser(null); - break; - case "signIn_failure": - case "cognitoHostedUI_failure": - console.log("Sign in failure", data); - break; - default: - console.log("Sign in failure"); - } - }); */ - if (userInfo) { if (currentCommunity) { return dispatch(visitCommunity(currentCommunity.id)) } } - - // getUser().then((userData) => setUser(userData)); }, [history, userInfo, dispatch]) - function getUser () { - /* return Auth.currentAuthenticatedUser() - .then((userData) => userData) - .catch(() => console.log("Not signed in")); */ - } - - // async function signIn(username, password) { - // try { - // const user = await Auth.signIn(username, password); - // if (user) { - // localStorage.setItem("userInfo", JSON.stringify(user)); - // dispatch({ - // type: USER_LOGIN_SUCCESS, - // payload: user, - // }); - // history.push("/community-page-news"); - // } - // } catch (error) { - // const code = error.code; - // switch (code) { - // case "NotAuthorizedException": - // setUserError("NotAuthorizedException"); - // setPasswordError("NotAuthorizedException"); - // return; - // default: - // return false; - // } - // } - // } - - const loginWithFacebook = (e) => { - e.preventDefault() - // Auth.federatedSignIn({ provider: "Facebook" }); - } - - const loginWithGoogle = (e) => { - e.preventDefault() - // Auth.federatedSignIn({ provider: "Google" }); - } - - const onSubmit = ({ username, password }) => { - dispatch(login(username, password)) + const onSubmit = ({ user, password }) => { + dispatch(login(user, password)) } return ( -
-

Sign In

-
- {error &&
{error}
} - - - - - - - - - -
- -
- -
-
- -
- -
- -
-

- Don't have an account yet? -

- - Become a member! - -
-
-
+ ) } diff --git a/src/components/signInSignUp/SignInSignUpData.js b/src/components/signInSignUp/SignInSignUpData.js index 563aa8c5c..8b18d3a9f 100644 --- a/src/components/signInSignUp/SignInSignUpData.js +++ b/src/components/signInSignUp/SignInSignUpData.js @@ -1,6 +1,5 @@ export const SignInSignUpData = { welcomeBack: 'Become a member', - rememberMe: 'Remember Me', signIn: 'Sign in', forgotPassword: 'Forgot Password?', text1: 'Sign In with services', @@ -12,5 +11,8 @@ export const SignInSignUpData = { facebook: 'Facebook', spanText4: 'Already have an account?', subtract2: '', - failMessage: ' Please enter correct username or password.' + failMessage: ' Please enter correct username or password.', + haveAc: 'Already have an Account?', + noAc: 'Don\'t have an account yet?', + signUp: 'Become a member!' } diff --git a/src/components/signInSignUp/SignUp.jsx b/src/components/signInSignUp/SignUp.jsx index 7e274489c..5dfb004cc 100644 --- a/src/components/signInSignUp/SignUp.jsx +++ b/src/components/signInSignUp/SignUp.jsx @@ -1,40 +1,24 @@ import React, { useState, useEffect } from 'react' -import { Link, useHistory } from 'react-router-dom' +import { useHistory } from 'react-router-dom' import { useDispatch, useSelector } from 'react-redux' -import { useForm } from 'react-hook-form' import { register } from '../../actions/userAction' import { SignInSignUpData } from './SignInSignUpData' import useCheckInputType from './useCheckInputType' +import Sign from './Sign' -import PhoneNumber from './PhoneNumber' -import Button from '../button/Button' -import Checkbox from '../checkbox/Checkbox' -import OAuthBtn from '../oAuthBtn/OAuthBtn' -import Input from '../input/Input' -import { ReactComponent as UserAvatar } from '../../assets/images/user-green-outline.svg' -import { ReactComponent as Lock } from '../../assets/images/lock-outline.svg' -import { ReactComponent as Email } from '../../assets/images/email.svg' import './SignInSignUp.scss' const SignIn = () => { - const { welcomeBack, spanText, text2, google, facebook, signIn } = + const { welcomeBack, spanText, text2, google, facebook, signIn, haveAc } = SignInSignUpData - const history = useHistory() - const { register: regi, handleSubmit, errors } = useForm() - const dispatch = useDispatch() - const [showPassword, setShowPassword] = useState(false) const [inputVal, setInputVal] = useState('') - const togglePasswordVisibility = () => { - setShowPassword(!showPassword) - } - const userRegister = useSelector((state) => state.userRegister) const { loading, error, userInfo } = userRegister - const { checkType, inputPlaceholder } = useCheckInputType(inputVal) + const { checkType } = useCheckInputType(inputVal) useEffect(() => { if (userInfo) { @@ -53,83 +37,20 @@ const SignIn = () => { } return ( -
-

{welcomeBack}

-
- {error &&
{error}
} - setInputVal(e.target.value)} - > - {checkType === 'email' ? ( - - ) : checkType === 'number' ? ( - - ) : ( - - )} - - - - -
-
- -
-
-
-
-
- -
-
-

Already have an Account?

- - {signIn} - -
-
-
+ ) } From 7c4f9b369f9be293b5bbb6f8b15cff8a7324977f Mon Sep 17 00:00:00 2001 From: Puskar Adhikari Date: Wed, 11 Aug 2021 17:57:31 +0545 Subject: [PATCH 7/8] styling --- src/components/signInSignUp/PhoneNumber.jsx | 1 + src/components/signInSignUp/SignInSignUp.scss | 77 ++++++----- .../congratulation/Congratulation.scss | 120 +++++++++--------- 3 files changed, 108 insertions(+), 90 deletions(-) diff --git a/src/components/signInSignUp/PhoneNumber.jsx b/src/components/signInSignUp/PhoneNumber.jsx index 93b966689..bbf1573cf 100644 --- a/src/components/signInSignUp/PhoneNumber.jsx +++ b/src/components/signInSignUp/PhoneNumber.jsx @@ -3,6 +3,7 @@ import PhoneInput from 'react-phone-number-input' const PhoneNumber = ({ value, setValue }) => { return ( Date: Thu, 12 Aug 2021 10:13:05 +0545 Subject: [PATCH 8/8] duplicate library --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 81c683926..c545ceea3 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "react-hook-form": "^6.15.4", "react-phone-number-input": "^3.1.25", "react-modal": "^3.14.3", - "react-phone-number-input": "^3.1.25", "react-player": "^2.9.0", "react-query": "^3.17.1", "react-redux": "^7.2.3",