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

Added swipable list to work items list

Browse Source
This commit is contained in:
John Lyon-Smith
2018-04-06 11:35:23 -07:00
parent aec39ae17d
commit d646b9477b
9 changed files with 394 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
mobile/src/Auth/Login.js
View File

@@ -1,22 +1,31 @@
import React from 'react';
import { Platform, StyleSheet, Text, Image, Switch, TextInput,
KeyboardAvoidingView, View, Button } from 'react-native'
import { MessageModal } from '../Modal'
import logoImage from './images/deighton.png'
import { FormBinder } from 'react-form-binder'
import { api } from '../API'
import { BoundSwitch, BoundInput, BoundButton } from '../ui'
import autobind from 'autobind-decorator'
import React from "react"
import {
Platform,
StyleSheet,
Text,
Image,
Switch,
TextInput,
View,
Button
} from "react-native"
import { MessageModal } from "../Modal"
import logoImage from "./images/deighton.png"
import { FormBinder } from "react-form-binder"
import { api } from "../API"
import { BoundSwitch, BoundInput, BoundButton } from "../ui"
import KeyboardSpacer from "react-native-keyboard-spacer"
import autobind from "autobind-decorator"
export class Login extends React.Component {
static bindings = {
email: {
alwaysGet: true,
isValid: (r, v) => (v !== '')
isValid: (r, v) => v !== ""
},
password: {
alwaysGet: true,
isValid: (r, v) => (v !== '')
isValid: (r, v) => v !== ""
},
rememberMe: {
alwaysGet: true,
@@ -25,49 +34,49 @@ export class Login extends React.Component {
},
login: {
noValue: true,
isDisabled: (r) => (!(r.anyModified && r.allValid))
isDisabled: r => !(r.anyModified && r.allValid)
}
}
static styles = StyleSheet.create({
page: {
minHeight: '50%',
minHeight: "50%",
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
},
logo: {
width: '50%'
width: "50%"
},
inputRow: {
paddingTop: 10,
width: '60%',
flexDirection: 'column',
justifyContent: 'flex-end',
alignItems: 'flex-start',
width: "60%",
flexDirection: "column",
justifyContent: "flex-end",
alignItems: "flex-start"
},
switchRow: {
paddingTop: 10,
width: '60%',
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center'
width: "60%",
flexDirection: "row",
justifyContent: "flex-end",
alignItems: "center"
},
buttonRow: {
paddingTop: 10,
width: '60%',
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center'
width: "60%",
flexDirection: "row",
justifyContent: "flex-end",
alignItems: "center"
}
})
constructor(props) {
super(props)
this.state = {
binder: new FormBinder({email: 'john@lyon-smith.org'}, Login.bindings),
messageModal: null,
binder: new FormBinder({ email: "john@lyon-smith.org" }, Login.bindings),
messageModal: null
}
}
@@ -77,15 +86,20 @@ export class Login extends React.Component {
let { history } = this.props
if (obj) {
api.login(obj.email, obj.password, obj.rememberMe).then((user) => {
history.replace('/home')
}).catch((error) => {
this.setState({ messageModal: {
icon: 'hand',
message: 'Unable to login',
detail: error.message,
}})
})
api
.login(obj.email, obj.password, obj.rememberMe)
.then(user => {
history.replace("/home")
})
.catch(error => {
this.setState({
messageModal: {
icon: "hand",
message: "Unable to login",
detail: error.message
}
})
})
}
}
@@ -98,28 +112,55 @@ export class Login extends React.Component {
const { messageModal } = this.state
return (
<KeyboardAvoidingView style={Login.styles.page} behavior='padding'
keyboardVerticalOffset={Platform.select({ios: 0, android: -220})}>
<Image style={Login.styles.logo} source={logoImage} resizeMode='contain' />
<View style={Login.styles.page} behavior="padding">
<Image
style={Login.styles.logo}
source={logoImage}
resizeMode="contain"
/>
<View style={Login.styles.inputRow}>
<BoundInput name='email' label='Email:' placeholder='name@xyz.com' message='Must enter a valid email' binder={this.state.binder} />
<BoundInput
name="email"
label="Email:"
placeholder="name@xyz.com"
message="Must enter a valid email"
binder={this.state.binder}
/>
</View>
<View style={Login.styles.inputRow}>
<BoundInput name='password' password label='Password:' message='Must supply a password' binder={this.state.binder} />
<BoundInput
name="password"
password
label="Password:"
message="Must supply a password"
binder={this.state.binder}
/>
</View>
<View style={Login.styles.switchRow}>
<BoundSwitch name='rememberMe' binder={this.state.binder} label='Remember Me'/>
<BoundSwitch
name="rememberMe"
binder={this.state.binder}
label="Remember Me"
/>
</View>
<View style={Login.styles.buttonRow}>
<BoundButton title='Login' name='login' width='100%' onPress={this.handleLogin} binder={this.state.binder} />
<BoundButton
title="Login"
name="login"
width="100%"
onPress={this.handleLogin}
binder={this.state.binder}
/>
</View>
<MessageModal
open={!!messageModal}
icon={messageModal ? messageModal.icon : ''}
message={messageModal ? messageModal.message : ''}
detail={messageModal ? messageModal.detail : ''}
onDismiss={messageModal && this.handleMessageDismiss} />
</KeyboardAvoidingView>
icon={messageModal ? messageModal.icon : ""}
message={messageModal ? messageModal.message : ""}
detail={messageModal ? messageModal.detail : ""}
onDismiss={messageModal && this.handleMessageDismiss}
/>
<KeyboardSpacer />
</View>
)
}
}