Simplifying change password page
This commit is contained in:
Jesús Espino
parent
23964c22ae
commit
e43e58c71d
2 changed files with 87 additions and 95 deletions
|
|
@ -11,6 +11,13 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.3) 0px 4px 8px;
|
box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.3) 0px 4px 8px;
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 430px) {
|
@media screen and (max-width: 430px) {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -46,7 +53,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .Button {
|
form > .Button {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
min-height: 38px;
|
min-height: 38px;
|
||||||
|
|
|
||||||
|
|
@ -1,112 +1,97 @@
|
||||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||||
// See LICENSE.txt for license information.
|
// See LICENSE.txt for license information.
|
||||||
import React from 'react'
|
import React, {useState, useContext} from 'react'
|
||||||
|
import {Link} from 'react-router-dom'
|
||||||
import {
|
|
||||||
withRouter,
|
|
||||||
RouteComponentProps,
|
|
||||||
Link,
|
|
||||||
} from 'react-router-dom'
|
|
||||||
|
|
||||||
import Button from '../widgets/buttons/button'
|
import Button from '../widgets/buttons/button'
|
||||||
import client from '../octoClient'
|
import client from '../octoClient'
|
||||||
import './changePasswordPage.scss'
|
import './changePasswordPage.scss'
|
||||||
import {UserContext} from '../user'
|
import {UserContext, IUser} from '../user'
|
||||||
|
|
||||||
type Props = RouteComponentProps
|
const ChangePasswordPage = React.memo(() => {
|
||||||
|
const [oldPassword, setOldPassword] = useState('')
|
||||||
|
const [newPassword, setNewPassword] = useState('')
|
||||||
|
const [errorMessage, setErrorMessage] = useState('')
|
||||||
|
const [succeeded, setSucceeded] = useState(false)
|
||||||
|
const user = useContext<IUser|undefined>(UserContext)
|
||||||
|
|
||||||
type State = {
|
if (!user) {
|
||||||
oldPassword: string
|
|
||||||
newPassword: string
|
|
||||||
errorMessage?: string
|
|
||||||
succeeded: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
class ChangePasswordPage extends React.PureComponent<Props, State> {
|
|
||||||
state: State = {
|
|
||||||
oldPassword: '',
|
|
||||||
newPassword: '',
|
|
||||||
succeeded: false,
|
|
||||||
}
|
|
||||||
|
|
||||||
private handleSubmit = async (userId: string): Promise<void> => {
|
|
||||||
const response = await client.changePassword(userId, this.state.oldPassword, this.state.newPassword)
|
|
||||||
if (response.code === 200) {
|
|
||||||
this.setState({oldPassword: '', newPassword: '', errorMessage: undefined, succeeded: true})
|
|
||||||
} else {
|
|
||||||
this.setState({errorMessage: `Change password failed: ${response.json?.error}`})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render(): React.ReactNode {
|
|
||||||
return (
|
return (
|
||||||
<div className='ChangePasswordPage'>
|
<div className='ChangePasswordPage'>
|
||||||
<div className='title'>{'Change Password'}</div>
|
<div className='title'>{'Change Password'}</div>
|
||||||
|
<Link to='/login'>{'Log in first'}</Link>
|
||||||
<UserContext.Consumer>
|
|
||||||
{(user) => {
|
|
||||||
if (user) {
|
|
||||||
return (<>
|
|
||||||
<div className='oldPassword'>
|
|
||||||
<input
|
|
||||||
id='login-oldpassword'
|
|
||||||
type='password'
|
|
||||||
placeholder={'Enter current password'}
|
|
||||||
value={this.state.oldPassword}
|
|
||||||
onChange={(e) => this.setState({oldPassword: e.target.value, errorMessage: undefined})}
|
|
||||||
onKeyPress={(e) => this.onKeyPress(e, user.id)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className='newPassword'>
|
|
||||||
<input
|
|
||||||
id='login-newpassword'
|
|
||||||
type='password'
|
|
||||||
placeholder={'Enter new password'}
|
|
||||||
value={this.state.newPassword}
|
|
||||||
onChange={(e) => this.setState({newPassword: e.target.value, errorMessage: undefined})}
|
|
||||||
onKeyPress={(e) => this.onKeyPress(e, user.id)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
filled={true}
|
|
||||||
onClick={() => this.handleSubmit(user.id)}
|
|
||||||
>
|
|
||||||
{'Change password'}
|
|
||||||
</Button>
|
|
||||||
{this.state.errorMessage &&
|
|
||||||
<div className='error'>
|
|
||||||
{this.state.errorMessage}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
{this.state.succeeded &&
|
|
||||||
<Link
|
|
||||||
className='succeeded'
|
|
||||||
to='/'
|
|
||||||
>{'Password changed, click to continue.'}</Link>
|
|
||||||
}
|
|
||||||
{!this.state.succeeded &&
|
|
||||||
<Link to='/'>{'Cancel'}</Link>
|
|
||||||
}
|
|
||||||
</>)
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<Link to='/login'>{'Log in first'}</Link>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
</UserContext.Consumer>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
private onKeyPress = (e: React.KeyboardEvent, userId: string) => {
|
const handleSubmit = async (userId: string): Promise<void> => {
|
||||||
if (!(e.metaKey || e.ctrlKey) && !e.shiftKey && e.key === 'Enter') {
|
const response = await client.changePassword(userId, oldPassword, newPassword)
|
||||||
this.handleSubmit(userId)
|
if (response.code === 200) {
|
||||||
e.preventDefault()
|
setOldPassword('')
|
||||||
return false
|
setNewPassword('')
|
||||||
|
setErrorMessage('')
|
||||||
|
setSucceeded(true)
|
||||||
|
} else {
|
||||||
|
setErrorMessage(`Change password failed: ${response.json?.error}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
export default withRouter(ChangePasswordPage)
|
return (
|
||||||
|
<div className='ChangePasswordPage'>
|
||||||
|
<div className='title'>{'Change Password'}</div>
|
||||||
|
<form
|
||||||
|
onSubmit={(e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
handleSubmit(user.id)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='oldPassword'>
|
||||||
|
<input
|
||||||
|
id='login-oldpassword'
|
||||||
|
type='password'
|
||||||
|
placeholder={'Enter current password'}
|
||||||
|
value={oldPassword}
|
||||||
|
onChange={(e) => {
|
||||||
|
setOldPassword(e.target.value)
|
||||||
|
setErrorMessage('')
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className='newPassword'>
|
||||||
|
<input
|
||||||
|
id='login-newpassword'
|
||||||
|
type='password'
|
||||||
|
placeholder={'Enter new password'}
|
||||||
|
value={newPassword}
|
||||||
|
onChange={(e) => {
|
||||||
|
setNewPassword(e.target.value)
|
||||||
|
setErrorMessage('')
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
filled={true}
|
||||||
|
submit={true}
|
||||||
|
>
|
||||||
|
{'Change password'}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
{errorMessage &&
|
||||||
|
<div className='error'>
|
||||||
|
{errorMessage}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
{succeeded &&
|
||||||
|
<Link
|
||||||
|
className='succeeded'
|
||||||
|
to='/'
|
||||||
|
>{'Password changed, click to continue.'}</Link>
|
||||||
|
}
|
||||||
|
{!succeeded &&
|
||||||
|
<Link to='/'>{'Cancel'}</Link>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
export default ChangePasswordPage
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue