Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

(feat) Add the ability to change password from edit profile form #968

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

(feat) Add the ability to change password from edit profile form #968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d5b7255
add change password ability from /edit-profile
coderatomy Oct 26, 2023
ff0d432
remove logs
coderatomy Oct 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions zubhub_frontend/zubhub/public/locales/en/translation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -724,6 +724,11 @@
"required": "Seems like you forgot this"
}
},
"changePassword": {
"newPassword": "Change Password",
"confirmNewPassword": "Retype new password",
"error": "<1/> {{errorMessage}}"
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add a custom Component and an error message

},
"submit": "Save Changes"
},
"or": "OR",
Expand Down
5 changes: 5 additions & 0 deletions zubhub_frontend/zubhub/src/assets/js/styles/views/edit_profile/editProfileStyles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,11 @@ const styles = theme => ({
color: 'var(--primary-color2)',
},
fieldHelperTextStyle: {
'&.MuiFormHelperText-root.Mui-error': {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try sending the classnames to mui component rather than using their generated class names. it would hassle when upgrading libraries as they change how the classnames (or styles) (they usually support it) are created or update dom structure

<ErrorComponent classNames={{
errorComponent: classNames.myErrorClassName
}} />

display: 'inline-flex',
alignItems: 'center',
gap: '4px'
},
[theme.breakpoints.up('1600')]: {
fontSize: '1.2rem',
},
Expand Down
246 changes: 190 additions & 56 deletions zubhub_frontend/zubhub/src/views/edit_profile/EditProfile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import { Trans } from 'react-i18next'
import { Link } from 'react-router-dom';
import clsx from 'clsx';
import PropTypes from 'prop-types';
Expand All @@ -14,6 +15,7 @@ import { makeStyles } from '@material-ui/core/styles';
import Visibility from '@material-ui/icons/Visibility';

import VisibilityOff from '@material-ui/icons/VisibilityOff';
import ErrorIcon from '@material-ui/icons/Error';

import {
Grid,
Expand Down Expand Up @@ -41,6 +43,7 @@ import {
} from '@material-ui/core';

import {
customValidation,
validationSchema,
getLocations,
getProfile,
Expand Down Expand Up @@ -82,7 +85,9 @@ function EditProfile(props) {
tool_tip_open: false,
dialog_error: null,
open_delete_account_modal: false,
show_password: false,
show_current_password: false,
show_new_password: false,
show_confirm_new_password: false,
show_delete_account_password: false,
});

Expand All @@ -92,7 +97,7 @@ function EditProfile(props) {
}, []);

const classes = useStyles();
const { show_password, show_delete_account_password } = state;
const { show_current_password, show_new_password, show_confirm_new_password, show_delete_account_password } = state;

const handleSetState = obj => {
if (obj) {
Expand All @@ -117,7 +122,7 @@ function EditProfile(props) {
className="auth-form"
name="signup"
noValidate="noValidate"
onSubmit={e => editProfile(e, props, toast)}
onSubmit={props.handleSubmit}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

utilizing the formik handleSubmit for better security in terms of validation

>
<Typography
gutterBottom
Expand Down Expand Up @@ -363,63 +368,186 @@ function EditProfile(props) {
</FormControl>
</Grid>

<Grid item xs={12} sm={6} md={6}>
<FormControl
className={clsx(classes.margin, classes.textField)}
variant="outlined"
size="small"
fullWidth
margin="normal"
error={
(props.status && props.status['password']) ||
(props.touched['password'] && props.errors['password'])
}
>
<InputLabel
className={classes.customLabelStyle}
htmlFor="password"
<Grid container style={{ display: 'block'}}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are you changing the grid system to block? its just gonno affect responsiveness

FYI If you aare changing to block system just use div instead

<Grid item>
<FormControl
className={clsx(classes.margin, classes.textField)}
variant="outlined"
size="small"
fullWidth
margin="normal"
error={
(props.status && props.status['password']) ||
(props.touched['password'] && props.errors['password'])
}
>
{t('editProfile.inputs.password.label')}
</InputLabel>
<OutlinedInput
className={classes.customInputStyle}
id="password"
name="password"
type={show_password ? 'text' : 'password'}
onChange={props.handleChange}
onBlur={props.handleBlur}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() =>
handleSetState(handleClickShowPassword(state))
}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{show_password ? (
<Visibility />
) : (
<VisibilityOff />
<InputLabel
className={classes.customLabelStyle}
htmlFor="password"
>
{t('editProfile.inputs.password.label')}
</InputLabel>
<OutlinedInput
className={classes.customInputStyle}
id="password"
name="password"
type={show_current_password ? 'text' : 'password'}
onChange={props.handleChange}
onBlur={props.handleBlur}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() =>
handleSetState(handleClickShowPassword(state, 'show_current_password'))
}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{show_current_password ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
}
label={t('editProfile.inputs.password.label')}
/>
<FormHelperText
className={classes.fieldHelperTextStyle}
error
>
{(props.status && props.status['password']) ||
(props.errors['password'] &&
<Trans t={t} i18nextKey="editProfile.inputs.changePassword.error">
<ErrorIcon fontSize="small" /> {{errorMessage: props.errors['password']}}
</Trans>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

using the Trans component from react-i18next to improve the field error message with Icons

)}
</FormHelperText>
</FormControl>
</Grid>

<Grid item>
<FormControl
className={clsx(classes.margin, classes.textField)}
variant="outlined"
size="small"
fullWidth
margin="normal"
error={
(props.status && props.status['new-password']) ||
(props.errors['new-password'])
}
>
<InputLabel
className={classes.customLabelStyle}
htmlFor="newPassword"
>
{t('editProfile.inputs.changePassword.newPassword')}
</InputLabel>
<OutlinedInput
className={classes.customInputStyle}
id="new-password"
name="newPassword"
type={show_new_password ? 'text' : 'password'}
onChange={props.handleChange}
onBlur={props.handleBlur}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

labels need translations

onClick={() =>
handleSetState(handleClickShowPassword(state, 'show_new_password'))
}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{show_new_password ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
}
label={t('editProfile.inputs.changePassword.newPassword')}
/>
<FormHelperText
className={classes.fieldHelperTextStyle}
error
>
{(props.status && props.status['new-password']) ||
(props.errors['newPassword'] &&
<Trans t={t} i18nextKey="editProfile.inputs.changePassword.error">
<ErrorIcon fontSize="small" /> {{errorMessage: props.errors['newPassword']}}
</Trans>
)}
</IconButton>
</InputAdornment>
</FormHelperText>
</FormControl>
</Grid>

<Grid item>
<FormControl
className={clsx(classes.margin, classes.textField)}
variant="outlined"
size="small"
fullWidth
margin="normal"
error={
(props.status && props.status['confirmNewPassword']) ||
(props.touched['confirmNewPassword'] && props.errors['confirmNewPassword'])
}
label={t('editProfile.inputs.password.label')}
/>
<FormHelperText
className={classes.fieldHelperTextStyle}
error
>
{(props.status && props.status['password']) ||
(props.touched['password'] &&
props.errors['password'] &&
t(
`editProfile.inputs.password.errors.${props.errors['password']}`,
))}
</FormHelperText>
</FormControl>
<InputLabel
className={classes.customLabelStyle}
htmlFor="new-password"
>
{t('editProfile.inputs.changePassword.confirmNewPassword')}
</InputLabel>
<OutlinedInput
className={classes.customInputStyle}
id="confirmNewPassword"
name="confirmNewPassword"
type={show_confirm_new_password ? 'text' : 'password'}
onChange={props.handleChange}
onBlur={props.handleBlur}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() =>
handleSetState(handleClickShowPassword(state, 'show_confirm_new_password'))
}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{ show_confirm_new_password ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
}
label={t('editProfile.inputs.changePassword.confirmNewPassword')}
/>
<FormHelperText
className={classes.fieldHelperTextStyle}
error
>
{(props.status && props.status['confirmNewPassword']) ||
(props.touched['confirmNewPassword'] &&
props.errors['confirmNewPassword'] &&
(
<Trans t={t} i18nextKey="editProfile.inputs.changePassword.error">
<ErrorIcon fontSize="small" /> {{errorMessage: props.errors['confirmNewPassword']}}
</Trans>
)
)}
</FormHelperText>
</FormControl>
</Grid>
</Grid>

<Grid item xs={12}>
Expand Down Expand Up @@ -708,9 +836,15 @@ export default connect(
email: '',
phone: '',
password: '',
newPassword: '',
confirmNewPassword: '',
user_location: '',
bio: '',
}),
validationSchema,
handleSubmit: (values, { props }) => {
return editProfile(values, props, toast)
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

assigning the editProfile with the validated data

},
validate: customValidation
})(EditProfile),
);
Loading