Simplifying register page

webapp/i18n/en.json

@@ -12,6 +12,7 @@
   "CardDetail.add-icon": "Add icon",
   "CardDetail.add-property": "+ Add a property",
   "CardDetail.addCardText": "add card text",
+  "CardDetail.moveContent": "move card content",
   "CardDetail.new-comment-placeholder": "Add a comment...",
   "CardDialog.editing-template": "You're editing a template",
   "CardDialog.nocard": "This card doesn't exist or is inaccessible",
@@ -159,5 +160,10 @@
   "ViewTitle.show-description": "show description",
   "ViewTitle.untitled-board": "Untitled board",
   "Workspace.editing-board-template": "You're editing a board template",
-  "default-properties.title": "Title"
+  "default-properties.title": "Title",
+  "login.log-in-button": "Log in",
+  "login.log-in-title": "Log in",
+  "login.register-button": "or create an account if you don't have one",
+  "register.login-button": "or login if you already have an account",
+  "register.signup-title": "Sign up for your account"
 }

webapp/src/pages/loginPage.scss

@@ -15,7 +15,7 @@
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
-        margin: 60px auto;
+        margin: 50px auto;
     }
 
     @media screen and (max-width: 430px) {
@@ -53,7 +53,7 @@
         }
     }
 
-    > .Button {
+    form > .Button {
         margin-top: 10px;
         margin-bottom: 20px;
         min-height: 38px;

webapp/src/pages/loginPage.tsx

@@ -31,7 +31,12 @@ const LoginPage = React.memo(() => {
                     handleLogin()
                 }}
             >
-                <div className='title'>{'Log in'}</div>
+                <div className='title'>{'Log in'}
+                    <FormattedMessage
+                        id='login.log-in-title'
+                        defaultMessage='Log in'
+                    />
+                </div>
                 <div className='username'>
                     <input
                         id='login-username'

webapp/src/pages/registerPage.scss

@@ -11,6 +11,13 @@
     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;
+    }
+
     @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/registerPage.tsx

@@ -1,73 +1,68 @@
 // 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 './registerPage.scss'
 
-type Props = RouteComponentProps
+const RegisterPage = React.memo(() => {
+    const [username, setUsername] = useState('')
+    const [password, setPassword] = useState('')
+    const [email, setEmail] = useState('')
+    const [errorMessage, setErrorMessage] = useState('')
+    const history = useHistory()
 
-type State = {
-    email: string
-    username: string
-    password: string
-    errorMessage?: string
-}
-
-class RegisterPage extends React.PureComponent<Props, State> {
-    state: State = {
-        email: '',
-        username: '',
-        password: '',
-    }
-
-    private handleRegister = async (): Promise<void> => {
+    const handleRegister = async (): Promise<void> => {
         const queryString = new URLSearchParams(window.location.search)
         const signupToken = queryString.get('t') || ''
 
-        const response = await client.register(this.state.email, this.state.username, this.state.password, signupToken)
+        const response = await client.register(email, username, password, signupToken)
         if (response.code === 200) {
-            const logged = await client.login(this.state.username, this.state.password)
+            const logged = await client.login(username, password)
             if (logged) {
-                this.props.history.push('/')
+                history.push('/')
 
                 // HACKHACK: react-router-dom seems to require a refresh to navigate correctly
                 // this.setState({email: '', username: '', password: ''})
             }
         } else if (response.code === 401) {
-            this.setState({errorMessage: 'Invalid registration link, please contact your administrator'})
+            setErrorMessage('Invalid registration link, please contact your administrator')
         } else {
-            this.setState({errorMessage: response.json?.error})
+            setErrorMessage(response.json?.error)
         }
     }
 
-    render(): React.ReactNode {
-        return (
-            <div className='RegisterPage'>
-                <div className='title'>{'Sign up for your account'}</div>
+    return (
+        <div className='RegisterPage'>
+            <form
+                onSubmit={(e: React.FormEvent) => {
+                    e.preventDefault()
+                    handleRegister()
+                }}
+            >
+                <div className='title'>
+                    <FormattedMessage
+                        id='register.signup-title'
+                        defaultMessage='Sign up for your account'
+                    />
+                </div>
                 <div className='email'>
                     <input
                         id='login-email'
                         placeholder={'Enter email'}
-                        value={this.state.email}
-                        onChange={(e) => this.setState({email: e.target.value})}
-                        onKeyPress={this.onKeyPress}
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
                     />
                 </div>
                 <div className='username'>
                     <input
                         id='login-username'
                         placeholder={'Enter username'}
-                        value={this.state.username}
-                        onChange={(e) => this.setState({username: e.target.value})}
-                        onKeyPress={this.onKeyPress}
+                        value={username}
+                        onChange={(e) => setUsername(e.target.value)}
                     />
                 </div>
                 <div className='password'>
@@ -75,35 +70,30 @@ class RegisterPage 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})}
-                        onKeyPress={this.onKeyPress}
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
                     />
                 </div>
                 <Button
                     filled={true}
-                    onClick={this.handleRegister}
+                    submit={true}
                 >
                     {'Register'}
                 </Button>
-                <Link to='/login'>{'or login if you already have an account'}</Link>
-                {this.state.errorMessage &&
-                    <div className='error'>
-                        {this.state.errorMessage}
-                    </div>
-                }
-            </div>
-        )
-    }
+            </form>
+            <Link to='/login'>
+                <FormattedMessage
+                    id='register.login-button'
+                    defaultMessage={'or login if you already have an account'}
+                />
+            </Link>
+            {errorMessage &&
+                <div className='error'>
+                    {errorMessage}
+                </div>
+            }
+        </div>
+    )
+})
 
-    private onKeyPress = (e: React.KeyboardEvent) => {
-        if (!(e.metaKey || e.ctrlKey) && !e.shiftKey && e.key === 'Enter') {
-            this.handleRegister()
-            e.preventDefault()
-            return false
-        }
-
-        return true
-    }
-}
-export default withRouter(RegisterPage)
+export default RegisterPage