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

Fix a bunch of layout issues

Browse Source
This commit is contained in:
John Lyon-Smith
2018-02-26 12:05:23 -08:00
parent ab243dc6db
commit f8e930d59e
29 changed files with 279 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
website/.eslintrc
View File

@@ -19,9 +19,10 @@
"__COVERAGE__" : false "__COVERAGE__" : false
}, },
"rules": { "rules": {
"key-spacing" : 0, "key-spacing": 0,
"jsx-quotes" : [2, "prefer-single"], "jsx-quotes": [2, "prefer-single"],
"object-curly-spacing" : [2, "always"], "object-curly-spacing": [2, "always"],
"space-before-function-paren": ["error", "never"] "space-before-function-paren": ["error", "never"],
"comma-dangle": ["error", "only-multiline"]
} }
} }

2
website/public/index.html
View File

@@ -7,7 +7,7 @@
<link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Hind" rel="stylesheet">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
</head> </head>
<body> <body style="margin: 0;">
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

31
website/src/App.js
View File

@@ -3,7 +3,7 @@ import { Login, Logout, ResetPassword, ForgotPassword, ConfirmEmail, ProtectedRo
import { Home } from './Home' import { Home } from './Home'
import { Profile } from './Profile' import { Profile } from './Profile'
import { Users } from './Users' import { Users } from './Users'
import { HolyGrail, Image, Text, Icon } from './ui' import { Column, Row, Image, Text, Icon, Box } from './ui'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import logoImage from 'images/logo.png' import logoImage from 'images/logo.png'
import { versionInfo } from './version' import { versionInfo } from './version'
@@ -11,12 +11,21 @@ import { versionInfo } from './version'
export class App extends React.Component { export class App extends React.Component {
render() { render() {
return ( return (
<HolyGrail> <Column minHeight='100vh'>
<HolyGrail.Header> <Column.Item>
<Box color='#FAFAFA' borderBottom='1px solid #B2B2B2'>
<Row minWidth='100vw'>
<Row.Item>
<Image source={logoImage} width={50} height={50} margin={5} /> <Image source={logoImage} width={50} height={50} margin={5} />
</Row.Item>
<Row.Item grow>&nbsp;</Row.Item>
<Row.Item>
<Icon name='logout' /> <Icon name='logout' />
</HolyGrail.Header> </Row.Item>
<HolyGrail.Body> </Row>
</Box>
</Column.Item>
<Column.Item grow>
<Router basename='/'> <Router basename='/'>
<Switch> <Switch>
<Route path='/login' component={Login} /> <Route path='/login' component={Login} />
@@ -30,11 +39,13 @@ export class App extends React.Component {
<Route component={Home} />{/* No Match Route */} <Route component={Home} />{/* No Match Route */}
</Switch> </Switch>
</Router> </Router>
</HolyGrail.Body> </Column.Item>
<HolyGrail.Footer> <Column.Item>
<Text margin={10}>{versionInfo.fullVersion} &copy; 2018, Kingston Software Solutions.</Text> <Box color='#FAFAFA' borderTop='1px solid #B2B2B2'>
</HolyGrail.Footer> <Text tone='dimmed' margin={10}>{versionInfo.fullVersion} &copy; 2018, Kingston Software Solutions.</Text>
</HolyGrail> </Box>
</Column.Item>
</Column>
) )
} }
} }

22
website/src/Auth/ForgotPassword.js
View File

@@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { regExpPattern } from 'regexp-pattern' import { regExpPattern } from 'regexp-pattern'
import { Text, StackLayout } from '../ui' import { Text, Column } from '../ui'
import { MessageDialog, WaitDialog } from '../Dialog' import { MessageDialog, WaitDialog } from '../Dialog'
import { Validator, ValidatedInput, ValidatedButton } from '../Validated' import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
import { api } from '../helpers' import { api } from '../helpers'
@@ -68,23 +68,23 @@ export class ForgotPassword extends React.Component {
return ( return (
<div> <div>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<StackLayout> <Column>
<StackLayout.Item> <Column.Item>
<Text size='large'>Forgotten Password</Text> <Text size='large'>Forgotten Password</Text>
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='Email' name='email' <ValidatedInput label='Email' name='email'
placeholder='example@xyz.com' validator={this.state.validator} placeholder='example@xyz.com' validator={this.state.validator}
message='A valid email address' /> message='A valid email address' />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<Text>The email address of an existing user to send the password reset link to.</Text> <Text>The email address of an existing user to send the password reset link to.</Text>
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedButton className='submit' name='submit' content='Submit' <ValidatedButton className='submit' name='submit' content='Submit'
primary submit validator={this.state.validator}>Submit</ValidatedButton> primary submit validator={this.state.validator}>Submit</ValidatedButton>
</StackLayout.Item> </Column.Item>
</StackLayout> </Column>
</form> </form>
<WaitDialog active={!!this.state.waitDialog} <WaitDialog active={!!this.state.waitDialog}

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

@@ -4,7 +4,7 @@ import { regExpPattern } from 'regexp-pattern'
import { api } from '../helpers' import { api } from '../helpers'
import { Validator, ValidatedInput, ValidatedCheckbox, ValidatedButton } from '../Validated' import { Validator, ValidatedInput, ValidatedCheckbox, ValidatedButton } from '../Validated'
import { WaitDialog, MessageDialog } from '../Dialog' 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' import headerLogo from 'images/deighton.png'
export class Login extends React.Component { export class Login extends React.Component {
@@ -87,40 +87,40 @@ export class Login extends React.Component {
} }
render() { render() {
return ( return null && (
<div> <div>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<StackLayout> <Column>
<StackLayout.Item> <Column.Item>
<Image source={headerLogo} width={279} height={73} /> <Image source={headerLogo} width={279} height={73} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='Email' name='email' <ValidatedInput label='Email' name='email'
placeholder='example@xyz.com' validator={this.state.validator} placeholder='example@xyz.com' validator={this.state.validator}
message='Enter the email address associated with your account.' width={16} /> message='Enter the email address associated with your account.' width={16} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput password label='Password' name='password' <ValidatedInput password label='Password' name='password'
validator={this.state.validator} message='Enter your password.' width={16} /> validator={this.state.validator} message='Enter your password.' width={16} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<Link to='/forgot-password'>Forgot your password?</Link> <Link to='/forgot-password'>Forgot your password?</Link>
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedCheckbox label='Remember Me' <ValidatedCheckbox label='Remember Me'
name='rememberMe' onChange={this.handleChange} validator={this.state.validator} name='rememberMe' onChange={this.handleChange} validator={this.state.validator}
message='Should we keep you logged in on this computer?' className='login-checkbox' /> message='Should we keep you logged in on this computer?' className='login-checkbox' />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedButton className='submit' name='submit' content='Login' <ValidatedButton className='submit' name='submit' content='Login'
submit validator={this.state.validator} /> submit validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<Text> <Text>
Please contact <Link to='mailto:support@jamoki.com'>support@jamoki.com</Link> to request login credentials. Please contact <Link to='mailto:support@jamoki.com'>support@jamoki.com</Link> to request login credentials.
</Text> </Text>
</StackLayout.Item> </Column.Item>
</StackLayout> </Column>
</form> </form>
<WaitDialog active={this.state.waitDialog} message='Logging In' /> <WaitDialog active={this.state.waitDialog} message='Logging In' />

2
website/src/Auth/Logout.js
View File

@@ -4,7 +4,7 @@ import { api } from '../helpers'
export class Logout extends React.Component { export class Logout extends React.Component {
static propTypes = { static propTypes = {
history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]) history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
} }
componentDidMount(event) { componentDidMount(event) {
api.logout().then(() => { api.logout().then(() => {

4
website/src/Auth/ProtectedRoute.js
View File

@@ -8,8 +8,8 @@ export class ProtectedRoute extends React.Component {
roles: PropTypes.array, roles: PropTypes.array,
location: PropTypes.shape({ location: PropTypes.shape({
pathname: PropTypes.string, pathname: PropTypes.string,
search: PropTypes.string search: PropTypes.string,
}) }),
} }
constructor(props) { constructor(props) {

26
website/src/Auth/ResetPassword.js
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Text, StackLayout } from '../ui' import { Text, Column } from '../ui'
import { Validator, ValidatedInput, ValidatedButton } from '../Validated' import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
import { MessageDialog, WaitDialog } from '../Dialog' import { MessageDialog, WaitDialog } from '../Dialog'
import { api } from '../helpers' import { api } from '../helpers'
@@ -63,32 +63,32 @@ export class ResetPassword extends React.Component {
return ( return (
<div> <div>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<StackLayout> <Column>
<StackLayout.Item> <Column.Item>
<Text size='large'>Reset Password</Text> <Text size='large'>Reset Password</Text>
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='New Password' password name='newPassword' <ValidatedInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password' message='A new password, cannot be blank or the same as your old password'
width={16} validator={this.state.validator} /> width={16} validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='Re-entered New Password' password name='reenteredNewPassword' <ValidatedInput label='Re-entered New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank' message='The new password again, must match and cannot be blank'
width={16} validator={this.state.validator} /> width={16} validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<Text> <Text>
Passwords can contain special characters and should be unique to this application. Passwords can contain special characters and should be unique to this application.
<br /><br /> <br /><br />
Passwords must be at least 6 characters long. Passwords must be at least 6 characters long.
</Text> </Text>
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedButton className='submit' name='submit' content='Submit' <ValidatedButton className='submit' name='submit' content='Submit'
submit validator={this.state.validator} /> submit validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
</StackLayout> </Column>
</form> </form>
<MessageDialog error open={!!this.state.messageDialog} <MessageDialog error open={!!this.state.messageDialog}

18
website/src/Dialog/ChangeEmailDialog.js
View File

@@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { autoBind } from 'auto-bind2' import { autoBind } from 'auto-bind2'
import { Modal, Button, Icon, StackLayout, Text } from '../ui' import { Modal, Button, Icon, Column, Text } from '../ui'
import { ValidatedInput, ValidatedButton, Validator } from '../Validated' import { ValidatedInput, ValidatedButton, Validator } from '../Validated'
import { regExpPattern } from 'regexp-pattern' import { regExpPattern } from 'regexp-pattern'
@@ -58,24 +58,24 @@ export class ChangeEmailDialog extends React.Component {
<Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose} <Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose}
closeOnDimmerClick={false}> closeOnDimmerClick={false}>
<form className='user-form' id='emailForm' onSubmit={this.handleSubmit}> <form className='user-form' id='emailForm' onSubmit={this.handleSubmit}>
<StackLayout> <Column>
<StackLayout.Item> <Column.Item>
<Text>Change Email</Text> <Text>Change Email</Text>
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='New Email' name='newEmail' width={16} <ValidatedInput label='New Email' name='newEmail' width={16}
message='Your new email address, e.g. xyz@abc.com, cannot be blank' message='Your new email address, e.g. xyz@abc.com, cannot be blank'
validator={this.state.validator} /> validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedButton primary submit form='emailForm' name='submit' validator={this.state.validator}> <ValidatedButton primary submit form='emailForm' name='submit' validator={this.state.validator}>
<Icon name='checkmark' /> OK <Icon name='checkmark' /> OK
</ValidatedButton> </ValidatedButton>
<Button color='red' onClick={this.handleClick}> <Button color='red' onClick={this.handleClick}>
<Icon name='close' /> Cancel <Icon name='close' /> Cancel
</Button> </Button>
</StackLayout.Item> </Column.Item>
</StackLayout> </Column>
</form> </form>
</Modal> </Modal>
) )

34
website/src/Dialog/ChangePasswordDialog.js
View File

@@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { autoBind } from 'auto-bind2' import { autoBind } from 'auto-bind2'
import { Modal, Button, Icon, StackLayout, RowLayout, Text } from '../ui' import { Modal, Button, Icon, Column, Row, Text } from '../ui'
import { ValidatedInput, ValidatedActionsButton, Validator } from '../Validated' import { ValidatedInput, ValidatedActionsButton, Validator } from '../Validated'
export class ChangePasswordDialog extends React.Component { export class ChangePasswordDialog extends React.Component {
@@ -66,38 +66,38 @@ export class ChangePasswordDialog extends React.Component {
return ( return (
<Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose} closeOnDimmerClick={false}> <Modal dimmer='inverted' open={this.props.open} onClose={this.handleClose} closeOnDimmerClick={false}>
<form id='passwordForm' onSubmit={this.handleSubmit}> <form id='passwordForm' onSubmit={this.handleSubmit}>
<StackLayout.Item color='black' icon='edit'> <Column.Item color='black' icon='edit'>
<Text size='large'>Change Password</Text> <Text size='large'>Change Password</Text>
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<StackLayout> <Column>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='Current Password' password name='oldPassword' <ValidatedInput label='Current Password' password name='oldPassword'
message='Your existing password, cannot be blank' message='Your existing password, cannot be blank'
width={8} validator={this.state.validator} /> width={8} validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='New Password' password name='newPassword' <ValidatedInput label='New Password' password name='newPassword'
message='A new password, cannot be blank or the same as your old password' message='A new password, cannot be blank or the same as your old password'
width={8} validator={this.state.validator} /> width={8} validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='Re-entered New Password' password name='reenteredNewPassword' <ValidatedInput label='Re-entered New Password' password name='reenteredNewPassword'
message='The new password again, must match and cannot be blank' message='The new password again, must match and cannot be blank'
width={8} validator={this.state.validator} /> width={8} validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
</StackLayout> </Column>
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<RowLayout> <Row>
<ValidatedActionsButton primary submit form='passwordForm' name='submit' validator={this.state.validator}> <ValidatedActionsButton primary submit form='passwordForm' name='submit' validator={this.state.validator}>
<Icon name='checkmark' /> OK <Icon name='checkmark' /> OK
</ValidatedActionsButton> </ValidatedActionsButton>
<Button color='red' onClick={this.handleClick}> <Button color='red' onClick={this.handleClick}>
<Icon name='close' /> Cancel <Icon name='close' /> Cancel
</Button> </Button>
</RowLayout> </Row>
</StackLayout.Item> </Column.Item>
</form> </form>
</Modal> </Modal>
) )

18
website/src/Dialog/MessageDialog.js
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Modal, Button, Icon, StackLayout, Text } from '../ui' import { Modal, Button, Icon, Column, Text } from '../ui'
export class MessageDialog extends React.Component { export class MessageDialog extends React.Component {
static propTypes = { static propTypes = {
@@ -13,19 +13,19 @@ export class MessageDialog extends React.Component {
render() { render() {
return ( return (
<Modal open={this.props.open} onClose={this.props.onDismiss} closeOnDimmerClick={false}> <Modal open={this.props.open} onClose={this.props.onDismiss} closeOnDimmerClick={false}>
<StackLayout> <Column>
<StackLayout.Item> <Column.Item>
<Text>{this.props.title}</Text> <Text>{this.props.title}</Text>
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<Text>{this.props.message}</Text> <Text>{this.props.message}</Text>
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<Button onClick={this.props.onDismiss}> <Button onClick={this.props.onDismiss}>
<Icon name='checkmark' /> OK <Icon name='checkmark' /> OK
</Button> </Button>
</StackLayout.Item> </Column.Item>
</StackLayout> </Column>
</Modal> </Modal>
) )
} }

18
website/src/Dialog/YesNoMessageDialog.js
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Modal, Button, StackLayout, Text, Icon } from '../ui' import { Modal, Button, Column, Text, Icon } from '../ui'
export class YesNoMessageDialog extends React.Component { export class YesNoMessageDialog extends React.Component {
static propTypes = { static propTypes = {
@@ -18,22 +18,22 @@ export class YesNoMessageDialog extends React.Component {
return ( return (
<Modal open={this.props.open} onClose={this.onDismiss(false)} <Modal open={this.props.open} onClose={this.onDismiss(false)}
closeOnDimmerClick={false} className='yes-no-modal'> closeOnDimmerClick={false} className='yes-no-modal'>
<StackLayout> <Column>
<StackLayout.Item color='orange'> <Column.Item color='orange'>
<Text>{this.props.title}</Text> <Text>{this.props.title}</Text>
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<Text>{this.props.message}</Text> <Text>{this.props.message}</Text>
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<Button negative onClick={this.onDismiss(false)}> <Button negative onClick={this.onDismiss(false)}>
<Icon name='remove' /> No <Icon name='remove' /> No
</Button> </Button>
<Button positive onClick={this.onDismiss(true)}> <Button positive onClick={this.onDismiss(true)}>
<Icon name='checkmark' /> Yes <Icon name='checkmark' /> Yes
</Button> </Button>
</StackLayout.Item> </Column.Item>
</StackLayout> </Column>
</Modal> </Modal>
) )
} }

26
website/src/Profile/ProfileForm.js
View File

@@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { StackLayout, Button } from '../ui' import { Column, Button } from '../ui'
import { regExpPattern } from 'regexp-pattern' import { regExpPattern } from 'regexp-pattern'
import { Validator, ValidatedInput, ValidatedButton } from '../Validated' import { Validator, ValidatedInput, ValidatedButton } from '../Validated'
@@ -95,30 +95,30 @@ export class ProfileForm extends React.Component {
render() { render() {
return ( return (
<form className='profile-form' onSubmit={this.handleSubmit}> <form className='profile-form' onSubmit={this.handleSubmit}>
<StackLayout stackable> <Column stackable>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='First Name' name='firstName' width={8} <ValidatedInput label='First Name' name='firstName' width={8}
validator={this.state.validator} /> validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='Last Name' name='lastName' width={8} <ValidatedInput label='Last Name' name='lastName' width={8}
validator={this.state.validator} /> validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='Email' name='email' width={8} message='Required. Must be a valid email address.' <ValidatedInput label='Email' name='email' width={8} message='Required. Must be a valid email address.'
validator={this.state.validator} /> validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<Button fluid content={'Change Email'} label='&nbsp;' <Button fluid content={'Change Email'} label='&nbsp;'
width={4} onClick={this.props.onChangeEmail} /> width={4} onClick={this.props.onChangeEmail} />
<Button fluid content={'Change Password'} label='&nbsp;' <Button fluid content={'Change Password'} label='&nbsp;'
width={4} onClick={this.props.onChangePassword} /> width={4} onClick={this.props.onChangePassword} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedButton submit primary width={4} size='medium' content='Save' label='&nbsp;' name='save' <ValidatedButton submit primary width={4} size='medium' content='Save' label='&nbsp;' name='save'
validator={this.state.validator} /> validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
</StackLayout> </Column>
</form> </form>
) )
} }

30
website/src/Users/UserForm.js
View File

@@ -5,7 +5,7 @@ import { regExpPattern } from 'regexp-pattern'
import { ValidatedEmailIcon } from './ValidatedEmailIcon' import { ValidatedEmailIcon } from './ValidatedEmailIcon'
import { Constants, api } from '../helpers' import { Constants, api } from '../helpers'
import { Validator, ValidatedInput, ValidatedButton, ValidatedCheckbox } from '../Validated' import { Validator, ValidatedInput, ValidatedButton, ValidatedCheckbox } from '../Validated'
import { StackLayout } from '../ui' import { Column } from '../ui'
export class UserForm extends React.Component { export class UserForm extends React.Component {
static propTypes = { static propTypes = {
@@ -144,32 +144,32 @@ export class UserForm extends React.Component {
render() { render() {
return ( return (
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<StackLayout> <Column>
<StackLayout.Item> <Column.Item>
<ValidatedCheckbox label={'Deighton Access & Security Level'} width={6} selection <ValidatedCheckbox label={'Deighton Access & Security Level'} width={6} selection
options={Constants.accessLevels} name='role' message='The user role and security level' options={Constants.accessLevels} name='role' message='The user role and security level'
placeholder='' validator={this.state.validator} /> placeholder='' validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='First Name' name='firstName' <ValidatedInput label='First Name' name='firstName'
width={8} validator={this.state.validator} /> width={8} validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='Last Name' name='lastName' <ValidatedInput label='Last Name' name='lastName'
width={8} validator={this.state.validator} /> width={8} validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedInput label='Email' name='email' width={8} message='Must be a valid email address. Required.' <ValidatedInput label='Email' name='email' width={8} message='Must be a valid email address. Required.'
validator={this.state.validator} /> validator={this.state.validator} />
<ValidatedEmailIcon name='emailValidated' validator={this.state.validator} width={4} <ValidatedEmailIcon name='emailValidated' validator={this.state.validator} width={4}
onClick={this.handleResendEmail} /> onClick={this.handleResendEmail} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedButton width={4} size='medium' content='Change Email' label='&nbsp;' name='changeEmail' <ValidatedButton width={4} size='medium' content='Change Email' label='&nbsp;' name='changeEmail'
validator={this.state.validator} onClick={this.handleChangeEmail} /> validator={this.state.validator} onClick={this.handleChangeEmail} />
</StackLayout.Item> </Column.Item>
<StackLayout.Item> <Column.Item>
<ValidatedButton color='red' width={4} size='medium' content='Remove' label='&nbsp;' name='remove' <ValidatedButton color='red' width={4} size='medium' content='Remove' label='&nbsp;' name='remove'
validator={this.state.validator} onClick={this.props.onRemove} /> validator={this.state.validator} onClick={this.props.onRemove} />
<ValidatedButton width={4} size='medium' content='Reset' label='&nbsp;' name='reset' <ValidatedButton width={4} size='medium' content='Reset' label='&nbsp;' name='reset'
@@ -177,8 +177,8 @@ export class UserForm extends React.Component {
<ValidatedButton primary submit width={4} size='medium' <ValidatedButton primary submit width={4} size='medium'
content={this.state.validator._id ? 'Save' : 'Add'} label='&nbsp;' name='submit' content={this.state.validator._id ? 'Save' : 'Add'} label='&nbsp;' name='submit'
validator={this.state.validator} /> validator={this.state.validator} />
</StackLayout.Item> </Column.Item>
</StackLayout> </Column>
</form> </form>
) )
} }

14
website/src/Users/Users.js
View File

@@ -4,7 +4,7 @@ import { UserList } from './UserList'
import { UserForm } from './UserForm' import { UserForm } from './UserForm'
import { UserFormPlaceholder } from './UserFormPlaceholder' import { UserFormPlaceholder } from './UserFormPlaceholder'
import { api } from '../helpers' import { api } from '../helpers'
import { RowLayout } from '../ui' import { Row } from '../ui'
import { YesNoMessageDialog, MessageDialog, ChangeEmailDialog, WaitDialog } from '../Dialog' import { YesNoMessageDialog, MessageDialog, ChangeEmailDialog, WaitDialog } from '../Dialog'
export class Users extends React.Component { export class Users extends React.Component {
@@ -240,16 +240,16 @@ export class Users extends React.Component {
<div> <div>
<div>Users</div> <div>Users</div>
<RowLayout> <Row>
{/* User List - Displayed on left hand side. */} {/* User List - Displayed on left hand side. */}
<RowLayout.Item width={5}> <Row.Item width={5}>
<UserList users={this.state.users} selectedUser={this.state.selectedUser} <UserList users={this.state.users} selectedUser={this.state.selectedUser}
selectionModified={this.state.modified} onUserListClick={this.handleUserListClick} selectionModified={this.state.modified} onUserListClick={this.handleUserListClick}
onAddNewUser={this.handleAddNewUser} /> onAddNewUser={this.handleAddNewUser} />
</RowLayout.Item> </Row.Item>
{/* User Info - Displayed on right hand side. */} {/* User Info - Displayed on right hand side. */}
<RowLayout.Item> <Row.Item>
{ {
this.state.selectedUser this.state.selectedUser
? <UserForm user={this.state.selectedUser} onSave={this.handleSave} ? <UserForm user={this.state.selectedUser} onSave={this.handleSave}
@@ -257,8 +257,8 @@ export class Users extends React.Component {
onChangeEmail={this.handleChangeEmail} onResendEmail={this.handleResendEmail} /> onChangeEmail={this.handleChangeEmail} onResendEmail={this.handleResendEmail} />
: <UserFormPlaceholder /> : <UserFormPlaceholder />
} }
</RowLayout.Item> </Row.Item>
</RowLayout> </Row>
<ChangeEmailDialog open={!!this.state.changeEmailDialog} onDismiss={this.handleChangeEmailDismiss} /> <ChangeEmailDialog open={!!this.state.changeEmailDialog} onDismiss={this.handleChangeEmailDismiss} />

29
website/src/ui/Box.js Normal file
View File

@@ -0,0 +1,29 @@
import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
class Box extends Component {
static propTypes = {
borderTop: PropTypes.number,
borderBottom: PropTypes.string,
borderRight: PropTypes.string,
borderLeft: PropTypes.string,
border: PropTypes.string,
color: PropTypes.string,
children: PropTypes.node,
}
render() {
const { children, color, borderTop, borderBottom, borderLeft, borderRight, border } = this.props
return (
<div style={[
color && { backgroundColor: color },
border ? { border } : { borderTop, borderBottom, borderLeft, borderRight }]}>
{children}
</div>
)
}
}
export default Radium(Box)

4
website/src/ui/Checkbox.style.js
View File

@@ -22,8 +22,8 @@ export default {
position: 'absolute', position: 'absolute',
display: 'block', display: 'block',
content: '', content: '',
left: 10, left: 8,
top: 5, top: 4,
width: 6, width: 6,
height: 12, height: 12,
borderStyle: 'solid', borderStyle: 'solid',

37
website/src/ui/Column.js Normal file
View File

@@ -0,0 +1,37 @@
import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Column extends Component {
static propTypes = {
children: PropTypes.node,
minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
}
render() {
const { children, minHeight } = this.props
return (
<div style={{ display: 'flex', minHeight, flexDirection: 'column' }}>{children}</div>
)
}
}
Column.Item = Radium(class StackLayoutItem extends Component {
static propTypes = {
children: PropTypes.node,
minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
grow: PropTypes.bool
}
render() {
const { children, grow, minHeight } = this.props
const flexGrow = grow ? 1 : null
return (
<div style={{ minHeight, flexGrow }}>{children}</div>
)
}
})
export default Radium(Column)

7
website/src/ui/Dimmer.js
View File

@@ -6,7 +6,8 @@ import { reactAutoBind } from 'auto-bind2'
export class Dimmer extends Component { export class Dimmer extends Component {
static propTypes = { static propTypes = {
children: PropTypes.node children: PropTypes.node,
active: PropTypes.bool
} }
constructor(props) { constructor(props) {
@@ -19,11 +20,11 @@ export class Dimmer extends Component {
} }
render() { render() {
return ( return this.props.active ? (
<div style={style.dimmer} onClick={this.preventPropagation}> <div style={style.dimmer} onClick={this.preventPropagation}>
{this.props.children} {this.props.children}
</div> </div>
) ) : null
} }
} }

54
website/src/ui/HolyGrail.js
View File

@@ -1,54 +0,0 @@
import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import style from './HolyGrail.style.js'
class HolyGrail extends Component {
static propTypes = {
children: PropTypes.node
}
render() {
return (
<div style={style.base}>{this.props.children}</div>
)
}
}
HolyGrail.Header = Radium(class HolyGrailHeader extends Component {
static propTypes = {
children: PropTypes.node
}
render() {
return (
<div style={style.header}>{this.props.children}</div>
)
}
})
HolyGrail.Footer = Radium(class HolyGrailFooter extends Component {
static propTypes = {
children: PropTypes.node
}
render() {
return (
<div style={style.footer}>{this.props.children}</div>
)
}
})
HolyGrail.Body = Radium(class HolyGrailBody extends Component {
static propTypes = {
children: PropTypes.node
}
render() {
return (
<div style={style.body}>{this.props.children}</div>
)
}
})
export default Radium(HolyGrail)

19
website/src/ui/HolyGrail.style.js
View File

@@ -1,19 +0,0 @@
export default {
base: {
display: 'flex',
minHeight: '100vh',
flexDirection: 'column'
},
body: {
display: 'flex',
flexGrow: 1
},
header: {
backgroundColor: '#FAFAFA',
borderBottom: '1px solid #B2B2B2'
},
footer: {
backgroundColor: '#FAFAFA',
borderTop: '1px solid #B2B2B2'
}
}

18
website/src/ui/Modal.js
View File

@@ -1,30 +1,22 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import style from './Modal.style' import style from './Modal.style'
import { reactAutoBind } from 'auto-bind2'
import Radium from 'radium' import Radium from 'radium'
import { Dimmer } from '../ui'
class Modal extends Component { class Modal extends Component {
static propTypes = { static propTypes = {
children: PropTypes.node children: PropTypes.node,
} open: PropTypes.bool
constructor(props) {
super(props)
reactAutoBind(this)
}
preventPropagation(e) {
e.stopPropagation()
} }
render() { render() {
return ( return (
<div style={style.dimmer} onClick={this.preventPropagation}> <Dimmer active={this.props.open}>
<div style={style.modal}> <div style={style.modal}>
{this.props.children} {this.props.children}
</div> </div>
</div> </Dimmer>
) )
} }
} }

37
website/src/ui/Row.js Normal file
View File

@@ -0,0 +1,37 @@
import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Row extends Component {
static propTypes = {
children: PropTypes.node,
minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired
}
render() {
const { children, minWidth } = this.props
return (
<div style={{ display: 'flex', minWidth, flexDirection: 'row' }}>{children}</div>
)
}
}
Row.Item = Radium(class RowLayoutItem extends Component {
static propTypes = {
children: PropTypes.node,
minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
grow: PropTypes.bool,
}
render() {
const { children, grow, minWidth } = this.props
const flexGrow = grow ? 1 : null
return (
<div style={{ minWidth, flexGrow }}>{children}</div>
)
}
})
export default Radium(Row)

31
website/src/ui/RowLayout.js
View File

@@ -1,31 +0,0 @@
import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class RowLayout extends Component {
static propTypes = {
children: PropTypes.node,
width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired
}
render() {
return (
<div style={{ display: 'flex', minWidth: this.props.width, flexDirection: 'row' }}>{this.props.children}</div>
)
}
}
RowLayout.Item = Radium(class RowLayoutItem extends Component {
static propTypes = {
children: PropTypes.node,
width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
}
render() {
return (
<div style={[ this.props.width ? { minWidth: this.props.width } : { flexGrow: 1 } ]}>{this.props.children}</div>
)
}
})
export default Radium(RowLayout)

31
website/src/ui/StackLayout.js
View File

@@ -1,31 +0,0 @@
import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class StackLayout extends Component {
static propTypes = {
children: PropTypes.node,
height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired
}
render() {
return (
<div style={{ display: 'flex', minHeight: this.props.height, flexDirection: 'column' }}>{this.props.children}</div>
)
}
}
StackLayout.Item = Radium(class StackLayoutItem extends Component {
static propTypes = {
children: PropTypes.node,
height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ])
}
render() {
return (
<div style={[ this.props.height ? { minHeight: this.props.height } : { flexGrow: 1 } ]}>{this.props.children}</div>
)
}
})
export default Radium(StackLayout)

7
website/src/ui/Text.js
View File

@@ -7,11 +7,13 @@ class Text extends Component {
static propTypes = { static propTypes = {
size: PropTypes.string, size: PropTypes.string,
margin: PropTypes.number, margin: PropTypes.number,
children: PropTypes.node children: PropTypes.node,
tone: PropTypes.string
} }
static defaultProps = { static defaultProps = {
size: 'medium', size: 'medium',
tone: 'normal',
margin: 0 margin: 0
} }
@@ -21,7 +23,8 @@ class Text extends Component {
display: 'inline-block', display: 'inline-block',
fontSize: fontInfo.size[this.props.size], fontSize: fontInfo.size[this.props.size],
fontFamily: fontInfo.family, fontFamily: fontInfo.family,
margin: this.props.margin margin: this.props.margin,
color: fontInfo.color[this.props.tone],
}}>{this.props.children}</span> }}>{this.props.children}</span>
) )
} }

6
website/src/ui/index.js
View File

@@ -1,3 +1,4 @@
export { default as Box } from './Box'
export { default as Button } from './Button' export { default as Button } from './Button'
export { default as Checkbox } from './Checkbox' export { default as Checkbox } from './Checkbox'
export { default as Input } from './Input' export { default as Input } from './Input'
@@ -11,6 +12,5 @@ export { default as Dropdown } from './Dropdown'
export { default as Modal } from './Modal' export { default as Modal } from './Modal'
export { default as Dimmer } from './Dimmer' export { default as Dimmer } from './Dimmer'
export { default as Loader } from './Loader' export { default as Loader } from './Loader'
export { default as HolyGrail } from './HolyGrail' export { default as Row } from './Row'
export { default as RowLayout } from './RowLayout' export { default as Column } from './Column'
export { default as StackLayout } from './StackLayout'

4
website/src/ui/style.js
View File

@@ -1,6 +1,7 @@
export const colorInfo = { export const colorInfo = {
text: '#000000', text: '#000000',
alertText: '#FF0000', alertText: '#FF0000',
grayText: '#B0B0B0',
buttonBackground: '#3498DB', buttonBackground: '#3498DB',
buttonBackgroundHover: '#3CB0FD' buttonBackgroundHover: '#3CB0FD'
} }
@@ -14,6 +15,7 @@ export const fontInfo = {
}, },
color: { color: {
'normal': colorInfo.text, 'normal': colorInfo.text,
'alert': colorInfo.alertText 'alert': colorInfo.alertText,
'dimmed': colorInfo.grayText,
} }
} }

2
website/src/version.js
View File

@@ -1,5 +1,5 @@
export const versionInfo = { export const versionInfo = {
version: '0.1.0', version: '0.1.0',
fullVersion: '0.1.0-20180225.0', fullVersion: '0.1.0-20180225.0',
startYear: '2017' startYear: '2017',
} }