Simplifying change password page

webapp/src/pages/changePasswordPage.scss

@@ -11,6 +11,13 @@
     flex-direction: column;
     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) {
         position: fixed;
         top: 0;
@@ -46,7 +53,7 @@
         }
     }
 
-    > .Button {
+    form > .Button {
         margin-top: 10px;
         margin-bottom: 20px;
         min-height: 38px;

webapp/src/pages/changePasswordPage.tsx

@@ -1,112 +1,97 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React from 'react'
-
-import {
-    withRouter,
-    RouteComponentProps,
-    Link,
-} from 'react-router-dom'
+import React, {useState, useContext} from 'react'
+import {Link} from 'react-router-dom'
 
 import Button from '../widgets/buttons/button'
 import client from '../octoClient'
 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 = {
-    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 {
+    if (!user) {
         return (
             <div className='ChangePasswordPage'>
                 <div className='title'>{'Change Password'}</div>
-
-                <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>
+                <Link to='/login'>{'Log in first'}</Link>
             </div>
         )
     }
 
-    private onKeyPress = (e: React.KeyboardEvent, userId: string) => {
-        if (!(e.metaKey || e.ctrlKey) && !e.shiftKey && e.key === 'Enter') {
-            this.handleSubmit(userId)
-            e.preventDefault()
-            return false
+    const handleSubmit = async (userId: string): Promise<void> => {
+        const response = await client.changePassword(userId, oldPassword, newPassword)
+        if (response.code === 200) {
+            setOldPassword('')
+            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