fix(ui): account details updates
This commit is contained in:
Shekar Siri
parent
678bc33820
commit
01d7c3676d
2 changed files with 87 additions and 97 deletions
|
|
@ -4,70 +4,70 @@ import { Button, Input, Form } from 'UI';
|
|||
import { updateAccount, updateClient } from 'Duck/user';
|
||||
import styles from './profileSettings.module.css';
|
||||
|
||||
@connect(state => ({
|
||||
accountName: state.getIn([ 'user', 'account', 'name' ]),
|
||||
organizationName: state.getIn([ 'user', 'account', 'tenantName' ]),
|
||||
loading: state.getIn([ 'user', 'updateAccountRequest', 'loading' ]) ||
|
||||
state.getIn([ 'user', 'putClientRequest', 'loading' ]),
|
||||
}), {
|
||||
updateAccount,
|
||||
updateClient,
|
||||
})
|
||||
@connect(
|
||||
(state) => ({
|
||||
accountName: state.getIn(['user', 'account', 'name']),
|
||||
organizationName: state.getIn(['user', 'account', 'tenantName']),
|
||||
loading:
|
||||
state.getIn(['user', 'updateAccountRequest', 'loading']) ||
|
||||
state.getIn(['user', 'putClientRequest', 'loading']),
|
||||
}),
|
||||
{
|
||||
updateAccount,
|
||||
updateClient,
|
||||
}
|
||||
)
|
||||
export default class Settings extends React.PureComponent {
|
||||
state = {
|
||||
accountName: this.props.accountName,
|
||||
organizationName: this.props.organizationName,
|
||||
}
|
||||
};
|
||||
|
||||
onChange = ({ target: { value, name } }) => {
|
||||
this.setState({ changed: true, [ name ]: value });
|
||||
}
|
||||
this.setState({ changed: true, [name]: value });
|
||||
};
|
||||
|
||||
handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const { accountName, organizationName } = this.state;
|
||||
const promises = [];
|
||||
if (accountName !== this.props.accountName) {
|
||||
promises.push(this.props.updateAccount({ name: accountName }));
|
||||
}
|
||||
if (organizationName !== this.props.organizationName) {
|
||||
promises.push(this.props.updateClient({ name: organizationName }));
|
||||
}
|
||||
Promise.all(promises)
|
||||
this.props
|
||||
.updateClient({ name: accountName, tenantName: organizationName })
|
||||
.then(() => this.setState({ changed: false }));
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { loading } = this.props;
|
||||
const { accountName, organizationName, changed, copied } = this.state;
|
||||
|
||||
return (
|
||||
<Form onSubmit={ this.handleSubmit } className={ styles.form }>
|
||||
<Form onSubmit={this.handleSubmit} className={styles.form}>
|
||||
<Form.Field>
|
||||
<label htmlFor="accountName">{ 'Name' }</label>
|
||||
<label htmlFor="accountName">{'Name'}</label>
|
||||
<Input
|
||||
name="accountName"
|
||||
id="accountName"
|
||||
type="text"
|
||||
onChange={ this.onChange }
|
||||
value={ accountName }
|
||||
onChange={this.onChange}
|
||||
value={accountName}
|
||||
maxLength={50}
|
||||
/>
|
||||
</Form.Field>
|
||||
|
||||
<Form.Field>
|
||||
<label htmlFor="organizationName">{ 'Organization' }</label>
|
||||
<label htmlFor="organizationName">{'Organization'}</label>
|
||||
<Input
|
||||
name="organizationName"
|
||||
id="organizationName"
|
||||
type="text"
|
||||
onChange={ this.onChange }
|
||||
value={ organizationName }
|
||||
onChange={this.onChange}
|
||||
value={organizationName}
|
||||
maxLength={50}
|
||||
/>
|
||||
</Form.Field>
|
||||
|
||||
<Button variant="outline" loading={ loading } disabled={ !changed } type="submit">{ 'Update' }</Button>
|
||||
<Button variant="outline" loading={loading} disabled={!changed} type="submit">
|
||||
{'Update'}
|
||||
</Button>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,17 +33,17 @@ export const initialState = Map({
|
|||
errors: List(),
|
||||
loginRequest: {
|
||||
loading: false,
|
||||
errors: [],
|
||||
errors: []
|
||||
},
|
||||
});
|
||||
|
||||
const setClient = (state, data) => {
|
||||
const client = Client(data);
|
||||
return state.set('client', client);
|
||||
};
|
||||
return state.set('client', client)
|
||||
}
|
||||
|
||||
export const UPDATE_JWT = 'jwt/UPDATE';
|
||||
export const DELETE = new RequestTypes('jwt/DELETE');
|
||||
export const DELETE = new RequestTypes('jwt/DELETE')
|
||||
export function setJwt(data) {
|
||||
return {
|
||||
type: UPDATE_JWT,
|
||||
|
|
@ -51,6 +51,7 @@ export function setJwt(data) {
|
|||
};
|
||||
}
|
||||
|
||||
|
||||
const reducer = (state = initialState, action = {}) => {
|
||||
switch (action.type) {
|
||||
case RESET_ERRORS:
|
||||
|
|
@ -58,15 +59,13 @@ const reducer = (state = initialState, action = {}) => {
|
|||
case UPDATE_JWT:
|
||||
return state.set('jwt', action.data);
|
||||
case LOGIN.REQUEST:
|
||||
return state.set('loginRequest', { loading: true, errors: [] });
|
||||
return state.set('loginRequest', { loading: true, errors: [] })
|
||||
case RESET_PASSWORD.SUCCESS:
|
||||
case LOGIN.SUCCESS:
|
||||
return state
|
||||
.set('account', Account({ ...action.data.user }))
|
||||
.set('loginRequest', { loading: false, errors: [] });
|
||||
return state.set('account', Account({...action.data.user })).set('loginRequest', { loading: false, errors: [] })
|
||||
case UPDATE_PASSWORD.REQUEST:
|
||||
case UPDATE_PASSWORD.SUCCESS:
|
||||
return state.set('passwordErrors', List());
|
||||
return state.set('passwordErrors', List())
|
||||
case SIGNUP.SUCCESS:
|
||||
state.set('account', Account(action.data.user)).set('onboarding', true);
|
||||
case REQUEST_RESET_PASSWORD.SUCCESS:
|
||||
|
|
@ -77,99 +76,90 @@ const reducer = (state = initialState, action = {}) => {
|
|||
case FETCH_TENANTS.SUCCESS:
|
||||
return state.set('authDetails', action.data);
|
||||
case UPDATE_PASSWORD.FAILURE:
|
||||
return state.set('passwordErrors', List(action.errors));
|
||||
return state.set('passwordErrors', List(action.errors))
|
||||
case LOGIN.FAILURE:
|
||||
console.log('login failed', action);
|
||||
deleteCookie('jwt', '/', 'openreplay.com');
|
||||
deleteCookie('jwt', '/', 'openreplay.com')
|
||||
return state.set('loginRequest', { loading: false, errors: action.errors });
|
||||
case FETCH_ACCOUNT.FAILURE:
|
||||
case DELETE.SUCCESS:
|
||||
case DELETE.FAILURE:
|
||||
deleteCookie('jwt', '/', 'openreplay.com');
|
||||
deleteCookie('jwt', '/', 'openreplay.com')
|
||||
return initialState;
|
||||
case PUT_CLIENT.REQUEST:
|
||||
const _data = { ...action.params };
|
||||
if (_data.name) {
|
||||
_data.tenantName = _data.name;
|
||||
delete _data.name;
|
||||
}
|
||||
return state.mergeIn(['account'], _data);
|
||||
console.log('put client request', action);
|
||||
return state.mergeIn([ 'account' ], action.params);
|
||||
case FETCH_CLIENT.SUCCESS:
|
||||
return setClient(state, action.data);
|
||||
case PUSH_NEW_SITE:
|
||||
return state.updateIn(['site', 'list'], (list) => list.push(action.newSite));
|
||||
return state.updateIn([ 'site', 'list' ], list =>
|
||||
list.push(action.newSite));
|
||||
case SET_ONBOARDING:
|
||||
return state.set('onboarding', action.state);
|
||||
return state.set('onboarding', action.state)
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
export default withRequestState(
|
||||
{
|
||||
signupRequest: SIGNUP,
|
||||
// loginRequest: LOGIN,
|
||||
updatePasswordRequest: UPDATE_PASSWORD,
|
||||
requestResetPassowrd: REQUEST_RESET_PASSWORD,
|
||||
resetPassword: RESET_PASSWORD,
|
||||
fetchUserInfoRequest: [FETCH_ACCOUNT, FETCH_CLIENT, FETCH_TENANTS],
|
||||
putClientRequest: PUT_CLIENT,
|
||||
updateAccountRequest: UPDATE_ACCOUNT,
|
||||
},
|
||||
reducer
|
||||
);
|
||||
|
||||
export const login = (params) => ({
|
||||
export default withRequestState({
|
||||
signupRequest: SIGNUP,
|
||||
// loginRequest: LOGIN,
|
||||
updatePasswordRequest: UPDATE_PASSWORD,
|
||||
requestResetPassowrd: REQUEST_RESET_PASSWORD,
|
||||
resetPassword: RESET_PASSWORD,
|
||||
fetchUserInfoRequest: [ FETCH_ACCOUNT, FETCH_CLIENT, FETCH_TENANTS ],
|
||||
putClientRequest: PUT_CLIENT,
|
||||
updateAccountRequest: UPDATE_ACCOUNT,
|
||||
}, reducer);
|
||||
|
||||
export const login = params => ({
|
||||
types: LOGIN.toArray(),
|
||||
call: (client) => client.post('/login', params),
|
||||
call: client => client.post('/login', params),
|
||||
});
|
||||
|
||||
export const signup = (params) => (dispatch) =>
|
||||
dispatch({
|
||||
types: SIGNUP.toArray(),
|
||||
call: (client) => client.post('/signup', params),
|
||||
});
|
||||
export const signup = params => dispatch => dispatch({
|
||||
types: SIGNUP.toArray(),
|
||||
call: client => client.post('/signup', params),
|
||||
});
|
||||
|
||||
export const resetPassword = (params) => (dispatch) =>
|
||||
dispatch({
|
||||
types: RESET_PASSWORD.toArray(),
|
||||
call: (client) => client.post('/password/reset', params),
|
||||
});
|
||||
export const resetPassword = params => dispatch => dispatch({
|
||||
types: RESET_PASSWORD.toArray(),
|
||||
call: client => client.post('/password/reset', params)
|
||||
});
|
||||
|
||||
export const requestResetPassword = (params) => (dispatch) =>
|
||||
dispatch({
|
||||
types: REQUEST_RESET_PASSWORD.toArray(),
|
||||
call: (client) => client.post('/password/reset-link', params),
|
||||
});
|
||||
export const requestResetPassword = params => dispatch => dispatch({
|
||||
types: REQUEST_RESET_PASSWORD.toArray(),
|
||||
call: client => client.post('/password/reset-link', params),
|
||||
});
|
||||
|
||||
export const updatePassword = (params) => (dispatch) =>
|
||||
dispatch({
|
||||
types: UPDATE_PASSWORD.toArray(),
|
||||
call: (client) => client.post('/account/password', params),
|
||||
});
|
||||
export const updatePassword = params => dispatch => dispatch({
|
||||
types: UPDATE_PASSWORD.toArray(),
|
||||
call: client => client.post('/account/password', params),
|
||||
})
|
||||
|
||||
export function fetchTenants() {
|
||||
return {
|
||||
types: FETCH_TENANTS.toArray(),
|
||||
call: (client) => client.get('/signup'),
|
||||
};
|
||||
call: client => client.get('/signup')
|
||||
}
|
||||
}
|
||||
|
||||
export const fetchUserInfo = () => ({
|
||||
types: FETCH_ACCOUNT.toArray(),
|
||||
call: (client) => client.get('/account'),
|
||||
});
|
||||
types: FETCH_ACCOUNT.toArray(),
|
||||
call: client => client.get('/account'),
|
||||
});
|
||||
|
||||
export function logout() {
|
||||
return {
|
||||
types: DELETE.toArray(),
|
||||
call: (client) => client.get('/logout'),
|
||||
call: client => client.get('/logout')
|
||||
};
|
||||
}
|
||||
|
||||
export function updateClient(params) {
|
||||
return {
|
||||
types: PUT_CLIENT.toArray(),
|
||||
call: (client) => client.put('/client', params),
|
||||
call: client => client.put('/client', params),
|
||||
params,
|
||||
};
|
||||
}
|
||||
|
|
@ -177,15 +167,15 @@ export function updateClient(params) {
|
|||
export function updateAccount(params) {
|
||||
return {
|
||||
types: UPDATE_ACCOUNT.toArray(),
|
||||
call: (client) => client.post('/account', params),
|
||||
};
|
||||
call: client => client.post('/account', params),
|
||||
}
|
||||
}
|
||||
|
||||
export function resendEmailVerification(email) {
|
||||
return {
|
||||
types: RESEND_EMAIL_VERIFICATION.toArray(),
|
||||
call: (client) => client.post('/re-validate', { email }),
|
||||
};
|
||||
call: client => client.post('/re-validate', { email }),
|
||||
}
|
||||
}
|
||||
|
||||
export function pushNewSite(newSite) {
|
||||
|
|
@ -198,7 +188,7 @@ export function pushNewSite(newSite) {
|
|||
export function setOnboarding(state = false) {
|
||||
return {
|
||||
type: SET_ONBOARDING,
|
||||
state,
|
||||
state
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -206,4 +196,4 @@ export function resetErrors() {
|
|||
return {
|
||||
type: RESET_ERRORS,
|
||||
};
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue