Fix a bunch of layout issues
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { regExpPattern } from 'regexp-pattern'
|
||||
import { Text, StackLayout } from '../ui'
|
||||
import { Text, Column } from '../ui'
|
||||
import { MessageDialog, WaitDialog } from '../Dialog'
|
||||
import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
|
||||
import { api } from '../helpers'
|
||||
@@ -68,23 +68,23 @@ export class ForgotPassword extends React.Component {
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<StackLayout>
|
||||
<StackLayout.Item>
|
||||
<Column>
|
||||
<Column.Item>
|
||||
<Text size='large'>Forgotten Password</Text>
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<ValidatedInput label='Email' name='email'
|
||||
placeholder='example@xyz.com' validator={this.state.validator}
|
||||
message='A valid email address' />
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<Text>The email address of an existing user to send the password reset link to.</Text>
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<ValidatedButton className='submit' name='submit' content='Submit'
|
||||
primary submit validator={this.state.validator}>Submit</ValidatedButton>
|
||||
</StackLayout.Item>
|
||||
</StackLayout>
|
||||
</Column.Item>
|
||||
</Column>
|
||||
</form>
|
||||
|
||||
<WaitDialog active={!!this.state.waitDialog}
|
||||
|
||||
@@ -4,7 +4,7 @@ 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, StackLayout } from '../ui'
|
||||
import { Image, Link, Text, Column } from '../ui'
|
||||
import headerLogo from 'images/deighton.png'
|
||||
|
||||
export class Login extends React.Component {
|
||||
@@ -87,40 +87,40 @@ export class Login extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
return null && (
|
||||
<div>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<StackLayout>
|
||||
<StackLayout.Item>
|
||||
<Column>
|
||||
<Column.Item>
|
||||
<Image source={headerLogo} width={279} height={73} />
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</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} />
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<ValidatedInput password label='Password' name='password'
|
||||
validator={this.state.validator} message='Enter your password.' width={16} />
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<Link to='/forgot-password'>Forgot your password?</Link>
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</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' />
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<ValidatedButton className='submit' name='submit' content='Login'
|
||||
submit validator={this.state.validator} />
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<Text>
|
||||
Please contact <Link to='mailto:support@jamoki.com'>support@jamoki.com</Link> to request login credentials.
|
||||
</Text>
|
||||
</StackLayout.Item>
|
||||
</StackLayout>
|
||||
</Column.Item>
|
||||
</Column>
|
||||
</form>
|
||||
|
||||
<WaitDialog active={this.state.waitDialog} message='Logging In' />
|
||||
|
||||
@@ -4,7 +4,7 @@ import { api } from '../helpers'
|
||||
|
||||
export class Logout extends React.Component {
|
||||
static propTypes = {
|
||||
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
|
||||
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
|
||||
}
|
||||
componentDidMount(event) {
|
||||
api.logout().then(() => {
|
||||
|
||||
@@ -8,8 +8,8 @@ export class ProtectedRoute extends React.Component {
|
||||
roles: PropTypes.array,
|
||||
location: PropTypes.shape({
|
||||
pathname: PropTypes.string,
|
||||
search: PropTypes.string
|
||||
})
|
||||
search: PropTypes.string,
|
||||
}),
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Text, StackLayout } from '../ui'
|
||||
import { Text, Column } from '../ui'
|
||||
import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
|
||||
import { MessageDialog, WaitDialog } from '../Dialog'
|
||||
import { api } from '../helpers'
|
||||
@@ -63,32 +63,32 @@ export class ResetPassword extends React.Component {
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<StackLayout>
|
||||
<StackLayout.Item>
|
||||
<Column>
|
||||
<Column.Item>
|
||||
<Text size='large'>Reset Password</Text>
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<ValidatedInput label='New Password' password name='newPassword'
|
||||
message='A new password, cannot be blank or the same as your old password'
|
||||
width={16} validator={this.state.validator} />
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<ValidatedInput label='Re-entered New Password' password name='reenteredNewPassword'
|
||||
message='The new password again, must match and cannot be blank'
|
||||
width={16} validator={this.state.validator} />
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<Text>
|
||||
Passwords can contain special characters and should be unique to this application.
|
||||
<br /><br />
|
||||
Passwords must be at least 6 characters long.
|
||||
</Text>
|
||||
</StackLayout.Item>
|
||||
<StackLayout.Item>
|
||||
</Column.Item>
|
||||
<Column.Item>
|
||||
<ValidatedButton className='submit' name='submit' content='Submit'
|
||||
submit validator={this.state.validator} />
|
||||
</StackLayout.Item>
|
||||
</StackLayout>
|
||||
</Column.Item>
|
||||
</Column>
|
||||
</form>
|
||||
|
||||
<MessageDialog error open={!!this.state.messageDialog}
|
||||
|
||||
Reference in New Issue
Block a user