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

Login screen looking good

Browse Source
This commit is contained in:
John Lyon-Smith
2018-02-26 16:38:18 -08:00
parent 93c1ecb919
commit 5faa4600f5
18 changed files with 120 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,8 +4,9 @@ import { regExpPattern } from 'regexp-pattern'
import { api } from '../helpers'
import { Validator, ValidatedInput, ValidatedCheckbox, ValidatedButton } from '../Validated'
import { WaitDialog, MessageDialog } from '../Dialog'
import { Image, Link, Text, Column } from 'ui'
import { Image, Link, Text, Row, Column } from 'ui'
import headerLogo from 'images/deighton.png'
import { versionInfo } from '../version'
export class Login extends React.Component {
static propTypes = {
@@ -87,41 +88,61 @@ export class Login extends React.Component {
}
render() {
return null && (
<div>
<form onSubmit={this.handleSubmit}>
<Column>
<Column.Item>
<Image source={headerLogo} width={279} height={73} />
</Column.Item>
<Column.Item>
<ValidatedInput label='Email' name='email'
placeholder='example@xyz.com' validator={this.state.validator}
message='Enter the email address associated with your account.' width={16} />
</Column.Item>
<Column.Item>
<ValidatedInput password label='Password' name='password'
validator={this.state.validator} message='Enter your password.' width={16} />
</Column.Item>
<Column.Item>
<Link to='/forgot-password'>Forgot your password?</Link>
</Column.Item>
<Column.Item>
<ValidatedCheckbox label='Remember Me'
name='rememberMe' onChange={this.handleChange} validator={this.state.validator}
message='Should we keep you logged in on this computer?' className='login-checkbox' />
</Column.Item>
<Column.Item>
<ValidatedButton className='submit' name='submit' content='Login'
submit validator={this.state.validator} />
</Column.Item>
<Column.Item>
<Text>
Please contact <Link to='mailto:support@jamoki.com'>support@jamoki.com</Link> to request login credentials.
</Text>
</Column.Item>
</Column>
</form>
return (
<Row minHeight='100%'>
<Row.Item grow>&nbsp;</Row.Item>
<Row.Item width='450px'>
<form onSubmit={this.handleSubmit}>
<Column minHeight='100%'>
<Column.Item>
<Row>
<Row.Item grow />
<Row.Item>
<Image source={headerLogo} width={250} />
</Row.Item>
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item>
<ValidatedInput label='Email' name='email'
placeholder='example@xyz.com' validator={this.state.validator}
message='Enter the email address associated with your account.' />
</Column.Item>
<Column.Item>
<ValidatedInput password label='Password' name='password'
validator={this.state.validator} message='Enter your password.' />
</Column.Item>
<Column.Item>
<Row>
<Row.Item>
<Link to='/forgot-password'>Forgot your password?</Link>
</Row.Item>
<Row.Item grow />
<Row.Item>
<ValidatedCheckbox label='Remember Me'
name='rememberMe' onChange={this.handleChange} validator={this.state.validator} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item>
<Row>
<Row.Item grow />
<Row.Item>
<br />
<ValidatedButton name='submit' content='Login' height={60} submit validator={this.state.validator} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item>
<Text>
<br />
Please contact <Link to={`mailto:${versionInfo.supportEmail}`}>{versionInfo.supportEmail}</Link> to request login credentials.
</Text>
</Column.Item>
</Column>
</form>
</Row.Item>
<Row.Item grow>&nbsp;</Row.Item>
<WaitDialog active={this.state.waitDialog} message='Logging In' />
@@ -129,7 +150,7 @@ export class Login extends React.Component {
title={this.state.messageDialog ? this.state.messageDialog.title : ''}
message={this.state.messageDialog ? this.state.messageDialog.message : ''}
onDismiss={this.handleMessageDialogDismiss} />
</div>
</Row>
)
}
}