123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 |
- import React, { useState } from 'react'
- import { CEditAvatar } from '../../components/EditAvatar'
- import { CustomInput } from '../../components/Input'
- import { message, Button } from 'antd'
- import { connect } from 'react-redux'
- import { actionChangePassword } from '../../actions/query/aboutMeQuery'
- import { actionClearPromiseForName } from '../../actions/types/promiseTypes'
- import { Basic, ConstructorModal } from '../../helpers'
- import { SpoilerButton } from '../../components/comment/SpoilerButton'
- import { actionUserUpdateTypeSaga } from '../../actions/typeSaga/myDataTypesSaga'
- import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'
- export const EditAccount = ({ showModalEdit }) => {
- return (
- <Button
- type="primary"
- style={{
- transition: '.3s',
- boxShadow: '0 5px 15px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
- }}
- onClick={showModalEdit}
- >
- Edit Setting
- </Button>
- )
- }
- const EditSetting = ({
- info,
- myId,
- onSaveUserUpsert,
- onSaveNewPassword,
- changePassword,
- }) => {
- const [state, setState] = useState(info)
- const [changePass, setChangePass] = useState(changePassword)
- const [isModalVisibleEdit, setIsModalVisibleEdit] = useState(false)
- const [checked1, setChecked1] = useState(true)
- const [checked2, setChecked2] = useState(true)
- const showModalEdit = () => {
- setIsModalVisibleEdit(true)
- }
- const handleCancelEdit = () => {
- setIsModalVisibleEdit(false)
- }
- const onChangeLogin = (event) =>
- setState({
- ...state,
- login: event.target.value,
- })
- const onChangeNick = (event) =>
- setState({
- ...state,
- nick: event.target.value,
- })
- const onChangePassLogin = (event) =>
- setChangePass({
- ...changePass,
- login: event.target.value,
- })
- const onChangePassPassword = (event) =>
- setChangePass({
- ...changePass,
- password: event.target.value,
- })
- const onChangePassNew = (event) =>
- setChangePass({
- ...changePass,
- newPassword: event.target.value,
- })
- const saveChange = () => {
- onSaveUserUpsert(state, myId) &&
- message.success(`Successfully saved changed !`) &&
- setIsModalVisibleEdit(false)
- }
- const saveNewPassword = () => {
- onSaveNewPassword(
- changePass.login,
- changePass.password,
- changePass.newPassword,
- )
- if (changePassword?.payload == null && changePass.login != info?.login) {
- message.error(`You entered wrong login/password! Try again!`)
- } else {
- message.success(`Successfully saved changed new password!`) &&
- setIsModalVisibleEdit(false)
- }
- }
- return (
- <div>
- <EditAccount showModalEdit={showModalEdit} />
- <ConstructorModal
- title={'Edit setting'}
- isModalVisible={isModalVisibleEdit}
- setIsModalVisible={setIsModalVisibleEdit}
- handleCancel={handleCancelEdit}
- >
- <div className="ModalEdit">
- <p> Edit avatar </p>
- <SpoilerButton text={'Change avatar'} style={{ width: '100%' }}>
- <CEditAvatar setIsModalVisibleEdit={setIsModalVisibleEdit} />
- </SpoilerButton>
- <p> Edit login </p>
- <SpoilerButton text={'Change login'} style={{ width: '100%' }}>
- <div
- style={{
- display: 'flex',
- alignItems: 'center',
- flexDirection: 'row',
- }}
- >
- <CustomInput
- state={state?.login || ''}
- onChangeText={onChangeLogin}
- />
- <Button
- style={{ margin: '10px' }}
- onClick={saveChange}
- disabled={
- state?.login && state?.login.length >= 5 ? false : true
- }
- type="primary"
- >
- {' '}
- Save login{' '}
- </Button>
- </div>
- </SpoilerButton>
- <p> Edit nick </p>
- <SpoilerButton text={'Change nick'} style={{ width: '100%' }}>
- <div
- style={{
- display: 'flex',
- alignItems: 'center',
- flexDirection: 'row',
- }}
- >
- <CustomInput
- state={state?.nick || ''}
- onChangeText={onChangeNick}
- />
- <Button
- style={{ margin: '10px' }}
- disabled={state?.nick && state?.nick.length >= 5 ? false : true}
- onClick={saveChange}
- type="primary"
- >
- Save nick
- </Button>
- </div>
- </SpoilerButton>
- <p> Edit password </p>
- <SpoilerButton
- text={'Change password'}
- style={{ width: '100%', marginBottom: '10px' }}
- >
- <p> Login</p>
- <div
- style={{
- display: 'flex',
- alignItems: 'center',
- flexDirection: 'row',
- }}
- >
- <CustomInput
- state={changePass?.login}
- onChangeText={onChangePassLogin}
- type={true}
- />
- </div>
- <p> Old password</p>
- <div
- style={{
- display: 'flex',
- alignItems: 'center',
- flexDirection: 'row',
- }}
- >
- <CustomInput
- state={changePass?.password}
- onChangeText={onChangePassPassword}
- checked={checked1}
- />
- {checked1 ? (
- <EyeInvisibleOutlined
- onClick={() => setChecked1(!checked1)}
- style={{ marginLeft: '5px', fontSize: 'x-large' }}
- />
- ) : (
- <EyeOutlined
- onClick={() => setChecked1(!checked1)}
- style={{ marginLeft: '5px', fontSize: 'x-large' }}
- />
- )}
- </div>
- <p> New password</p>
- <div
- style={{
- display: 'flex',
- alignItems: 'center',
- flexDirection: 'row',
- }}
- >
- <CustomInput
- state={changePass?.newPassword || ''}
- checked={checked2}
- onChangeText={onChangePassNew}
- />
- {checked2 ? (
- <EyeInvisibleOutlined
- onClick={() => setChecked2(!checked2)}
- style={{ marginLeft: '5px', fontSize: 'x-large' }}
- />
- ) : (
- <EyeOutlined
- onClick={() => setChecked2(!checked2)}
- style={{ marginLeft: '5px', fontSize: 'x-large' }}
- />
- )}
- </div>
- <div
- style={{
- display: 'flex',
- alignItems: 'center',
- flexDirection: 'column',
- }}
- >
- <Button
- style={{ margin: '10px' }}
- disabled={
- changePass?.login &&
- changePass?.password &&
- /(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[a-z])(?=.*[A-Z])[0-9!@#$%^&*a-zA-Z]{8,}/g.test(
- changePass?.newPassword,
- )
- ? false
- : true
- }
- onClick={saveNewPassword}
- type="primary"
- >
- Save new password
- </Button>
- </div>
- </SpoilerButton>
- </div>
- </ConstructorModal>
- </div>
- )
- }
- export const CEditSetting = connect(
- (state) => ({
- myId: state?.auth.payload.sub?.id,
- info: state?.myData?.aboutMe,
- changePassword: state.promise?.newPassword,
- }),
- {
- onSaveUserUpsert: actionUserUpdateTypeSaga,
- onSaveNewPassword: actionChangePassword,
- onClearPromise: actionClearPromiseForName,
- },
- )(EditSetting)
|