Simplifying login page code

webapp/src/pages/loginPage.scss

@@ -4,13 +4,20 @@
     width: 450px;
     height: 400px;
     margin: 150px auto;
-    padding: 40px;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     flex-direction: column;
     box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.3) 0px 4px 8px;
 
+    form {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: center;
+        margin: 60px auto;
+    }
+
     @media screen and (max-width: 430px) {
         position: fixed;
         top: 0;

webapp/src/pages/loginPage.tsx

@@ -1,51 +1,46 @@
 // 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} from 'react'
+import {useHistory, Link} from 'react-router-dom'
+import {FormattedMessage} from 'react-intl'
 
 import Button from '../widgets/buttons/button'
 import client from '../octoClient'
 import './loginPage.scss'
 
-type Props = RouteComponentProps
+const LoginPage = React.memo(() => {
+    const [username, setUsername] = useState('')
+    const [password, setPassword] = useState('')
+    const [errorMessage, setErrorMessage] = useState('')
+    const history = useHistory()
 
-type State = {
-    username: string
-    password: string
-    errorMessage?: string
-}
-
-class LoginPage extends React.PureComponent<Props, State> {
-    state: State = {
-        username: '',
-        password: '',
-    }
-
-    private handleLogin = async (): Promise<void> => {
-        const logged = await client.login(this.state.username, this.state.password)
+    const handleLogin = async (): Promise<void> => {
+        const logged = await client.login(username, password)
         if (logged) {
-            this.props.history.push('/')
+            history.push('/')
         } else {
-            this.setState({errorMessage: 'Login failed'})
+            setErrorMessage('Login failed')
         }
     }
 
-    render(): React.ReactNode {
-        return (
-            <div className='LoginPage'>
+    return (
+        <div className='LoginPage'>
+            <form
+                onSubmit={(e: React.FormEvent) => {
+                    e.preventDefault()
+                    handleLogin()
+                }}
+            >
                 <div className='title'>{'Log in'}</div>
                 <div className='username'>
                     <input
                         id='login-username'
                         placeholder={'Enter username'}
-                        value={this.state.username}
-                        onChange={(e) => this.setState({username: e.target.value, errorMessage: undefined})}
-                        onKeyPress={this.onKeyPress}
+                        value={username}
+                        onChange={(e) => {
+                            setUsername(e.target.value)
+                            setErrorMessage('')
+                        }}
                     />
                 </div>
                 <div className='password'>
@@ -53,36 +48,36 @@ class LoginPage extends React.PureComponent<Props, State> {
                         id='login-password'
                         type='password'
                         placeholder={'Enter password'}
-                        value={this.state.password}
-                        onChange={(e) => this.setState({password: e.target.value, errorMessage: undefined})}
-                        onKeyPress={this.onKeyPress}
+                        value={password}
+                        onChange={(e) => {
+                            setPassword(e.target.value)
+                            setErrorMessage('')
+                        }}
                     />
                 </div>
                 <Button
                     filled={true}
-                    onClick={this.handleLogin}
+                    submit={true}
                 >
-                    {'Log in'}
+                    <FormattedMessage
+                        id='login.log-in-button'
+                        defaultMessage='Log in'
+                    />
                 </Button>
-                <Link to='/register'>{'or create an account if you don\'t have one'}</Link>
-                {this.state.errorMessage &&
-                    <div className='error'>
-                        {this.state.errorMessage}
-                    </div>
-                }
-            </div>
-        )
-    }
+            </form>
+            <Link to='/register'>
+                <FormattedMessage
+                    id='login.register-button'
+                    defaultMessage={'or create an account if you don\'t have one'}
+                />
+            </Link>
+            {errorMessage &&
+                <div className='error'>
+                    {errorMessage}
+                </div>
+            }
+        </div>
+    )
+})
 
-    private onKeyPress = (e: React.KeyboardEvent) => {
-        if (!(e.metaKey || e.ctrlKey) && !e.shiftKey && e.key === 'Enter') {
-            this.handleLogin()
-            e.preventDefault()
-            return false
-        }
-
-        return true
-    }
-}
-
-export default withRouter(LoginPage)
+export default LoginPage

webapp/src/widgets/buttons/button.tsx

@@ -11,12 +11,13 @@ type Props = {
     icon?: React.ReactNode
     filled?: boolean
     active?: boolean
+    submit?: boolean
 }
 
 function Button(props: Props): JSX.Element {
     return (
         <button
-            type='button'
+            type={props.submit ? 'submit' : 'button'}
             onClick={props.onClick}
             className={`Button ${props.active ? 'active' : ''} ${props.filled ? 'filled' : ''}`}
             title={props.title}