john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Remove whitespace around email when logging in

Browse Source
This commit is contained in:
John Lyon-Smith
2018-04-18 17:32:03 -07:00
parent f5044284ff
commit 5b27a879de
8 changed files with 118 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/package.json
View File

@@ -61,7 +61,7 @@
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"deploy": "rsync -vr -e ssh build/* ubuntu@tmr:deighton-ar/website/",
"deploy": "rsync -vr -e ssh build/* ubuntu@gs-1:deighton-ar/website/",
"lint": "eslint --ext .js --ext .jsx src/",
"lint:fix": "eslint --ext .js --ext .jsx --fix src/"
},

162
website/src/Auth/Login.js
View File

@@ -1,37 +1,47 @@
import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import { regExpPattern } from 'regexp-pattern'
import { api } from 'src/API'
import { WaitModal, MessageModal } from '../Modal'
import { Box, Image, Link, Text, Row, Column, BoundInput, BoundCheckbox, BoundButton } from 'ui'
import headerLogo from 'images/deighton.png'
import { versionInfo } from '../version'
import { FormBinder } from 'react-form-binder'
import autobind from 'autobind-decorator'
import { sizeInfo, colorInfo } from 'ui/style'
import React, { Component, Fragment } from "react"
import PropTypes from "prop-types"
import { regExpPattern } from "regexp-pattern"
import { api } from "src/API"
import { WaitModal, MessageModal } from "../Modal"
import {
Box,
Image,
Link,
Text,
Row,
Column,
BoundInput,
BoundCheckbox,
BoundButton,
} from "ui"
import headerLogo from "images/deighton.png"
import { versionInfo } from "../version"
import { FormBinder } from "react-form-binder"
import autobind from "autobind-decorator"
import { sizeInfo, colorInfo } from "ui/style"
export class Login extends Component {
static propTypes = {
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
}
static bindings = {
email: {
alwaysGet: true,
isValid: (r, v) => (regExpPattern.email.test(v))
isValid: (r, v) => regExpPattern.email.test(v),
},
password: {
alwaysGet: true,
isValid: (r, v) => (v !== '')
isValid: (r, v) => v !== "",
},
rememberMe: {
alwaysGet: true,
initValue: true
initValue: true,
},
submit: {
noValue: true,
isDisabled: (r) => (!r.anyModified || !r.allValid)
}
isDisabled: (r) => !r.anyModified || !r.allValid,
},
}
constructor(props) {
@@ -39,7 +49,7 @@ export class Login extends Component {
this.state = {
waitModal: false,
messageModal: null,
binder: new FormBinder({}, Login.bindings)
binder: new FormBinder({}, Login.bindings),
}
}
@@ -59,23 +69,31 @@ export class Login extends Component {
if (obj) {
this.setState({ waitModal: true })
api.login(obj.email, obj.password, obj.rememberMe).then((user) => {
this.setState({ waitModal: false })
if (this.props.history) {
let url = new URLSearchParams(window.location.search).get('redirect') || '/'
api
.login(obj.email.trim(), obj.password, obj.rememberMe)
.then((user) => {
this.setState({ waitModal: false })
if (this.props.history) {
let url =
new URLSearchParams(window.location.search).get("redirect") || "/"
try {
this.props.history.replace(url)
} catch (error) {
this.props.history.replace('/')
try {
this.props.history.replace(url)
} catch (error) {
this.props.history.replace("/")
}
}
}
}).catch((error) => {
this.setState({
waitModal: false,
messageModal: { icon: 'hand', message: `Unable to login`, detail: error.message }
})
})
.catch((error) => {
this.setState({
waitModal: false,
messageModal: {
icon: "hand",
message: `Unable to login`,
detail: error.message,
},
})
})
}
}
@@ -83,10 +101,13 @@ export class Login extends Component {
handleMessageModalDismiss() {
this.setState({
messageModal: null,
binder: new FormBinder({ email: this.state.binder.getFieldValue('email') }, Login.bindings)
binder: new FormBinder(
{ email: this.state.binder.getFieldValue("email") },
Login.bindings
),
})
const elems = document.getElementsByName('password')
const elems = document.getElementsByName("password")
if (elems) {
elems[0].focus()
@@ -103,8 +124,13 @@ export class Login extends Component {
<Row>
<Row.Item grow />
<Row.Item width={sizeInfo.modalWidth}>
<form onSubmit={this.handleSubmit} id='loginForm'>
<Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
<form onSubmit={this.handleSubmit} id="loginForm">
<Box
border={{
width: sizeInfo.headerBorderWidth,
color: colorInfo.headerBorder,
}}
radius={sizeInfo.formBoxRadius}>
<Row>
<Row.Item width={sizeInfo.formRowSpacing} />
<Row.Item>
@@ -114,33 +140,51 @@ export class Login extends Component {
<Row>
<Row.Item grow />
<Row.Item>
<Image source={headerLogo} width={sizeInfo.loginLogoWidth} />
<Image
source={headerLogo}
width={sizeInfo.loginLogoWidth}
/>
</Row.Item>
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Text size='large'>Login</Text>
<Text size="large">Login</Text>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<BoundInput label='Email' name='email'
placeholder='example@xyz.com' binder={this.state.binder}
message='Enter the email address associated with your account.' />
<BoundInput
label="Email"
name="email"
placeholder="example@xyz.com"
binder={this.state.binder}
message="Enter the email address associated with your account."
/>
</Column.Item>
<Column.Item>
<BoundInput password label='Password' name='password'
binder={this.state.binder} message='Enter your password.' />
<BoundInput
password
label="Password"
name="password"
binder={this.state.binder}
message="Enter your password."
/>
</Column.Item>
<Column.Item>
<Row>
<Row.Item>
<Link to='/forgot-password'>Forgot your password?</Link>
<Link to="/forgot-password">
Forgot your password?
</Link>
</Row.Item>
<Row.Item grow />
<Row.Item>
<BoundCheckbox label='Remember Me' name='rememberMe' binder={this.state.binder} />
<BoundCheckbox
label="Remember Me"
name="rememberMe"
binder={this.state.binder}
/>
</Row.Item>
</Row>
</Column.Item>
@@ -149,14 +193,23 @@ export class Login extends Component {
<Row>
<Row.Item grow />
<Row.Item>
<BoundButton name='submit' text='Login' submit='loginForm' binder={this.state.binder} />
<BoundButton
name="submit"
text="Login"
submit="loginForm"
binder={this.state.binder}
/>
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
<Column.Item>
<Text>
Please contact <Link to={`mailto:${versionInfo.supportEmail}`}>{versionInfo.supportEmail}</Link> to request login credentials.
Please contact{" "}
<Link to={`mailto:${versionInfo.supportEmail}`}>
{versionInfo.supportEmail}
</Link>{" "}
to request login credentials.
</Text>
</Column.Item>
<Column.Item height={sizeInfo.formColumnSpacing} />
@@ -171,12 +224,15 @@ export class Login extends Component {
</Row>
</Column.Item>
<Column.Item grow>
<WaitModal active={waitModal} message='Logging in...' />
<MessageModal error open={!!messageModal}
icon={messageModal ? messageModal.icon : ''}
message={messageModal ? messageModal.message : ''}
detail={messageModal ? messageModal.detail : ''}
onDismiss={this.handleMessageModalDismiss} />
<WaitModal active={waitModal} message="Logging in..." />
<MessageModal
error
open={!!messageModal}
icon={messageModal ? messageModal.icon : ""}
message={messageModal ? messageModal.message : ""}
detail={messageModal ? messageModal.detail : ""}
onDismiss={this.handleMessageModalDismiss}
/>
</Column.Item>
</Fragment>
)