Change login icons to ion & Format

This commit is contained in:
Jannis Mattheis
2018-05-20 20:42:59 +02:00
parent 3aad82a92a
commit 1ba8c76974

View File

@@ -1,14 +1,24 @@
import React from 'react'; import React from 'react';
import { View, Text, TextInput, Button, ToastAndroid } from 'react-native'; import {Button, Text, TextInput, ToastAndroid, View} from 'react-native';
import SharedPreferences from 'react-native-shared-preferences'; import SharedPreferences from 'react-native-shared-preferences';
import Icon from 'react-native-vector-icons/MaterialIcons' import Icon from 'react-native-vector-icons/Ionicons'
import DeviceInfo from 'react-native-device-info'; import DeviceInfo from 'react-native-device-info';
import * as axios from "axios"; import * as axios from "axios";
const urlRegex = new RegExp("^(http|https)://", "i"); const urlRegex = new RegExp("^(http|https)://", "i");
const defaultClientName = DeviceInfo.getManufacturer() + ' ' + DeviceInfo.getDeviceId(); const defaultClientName = DeviceInfo.getManufacturer() + ' ' + DeviceInfo.getDeviceId();
export default class Login extends React.Component { export default class Login extends React.Component {
state = {tryConnect: null, url: null, error: null, version: null, name: '', pass: '', loggedIn: null, client: defaultClientName}; state = {
tryConnect: null,
url: null,
error: null,
version: null,
name: '',
pass: '',
loggedIn: null,
client: defaultClientName
};
componentDidMount() { componentDidMount() {
SharedPreferences.getItem("@global:url", (url) => { SharedPreferences.getItem("@global:url", (url) => {
if (url) { if (url) {
@@ -34,8 +44,8 @@ export default class Login extends React.Component {
}; };
createClient = () => { createClient = () => {
const {client, url, pass, name} = this.state; const {client, url, pass, name} = this.state;
axios.post(url + 'client', {name: client}, {auth:{username: name, password: pass}}).then((resp) => { axios.post(url + 'client', {name: client}, {auth: {username: name, password: pass}}).then((resp) => {
SharedPreferences.setItem('@global:token', resp.data.token); SharedPreferences.setItem('@global:token', resp.data.token);
ToastAndroid.show("Created client " + client + " for user " + name, ToastAndroid.SHORT); ToastAndroid.show("Created client " + client + " for user " + name, ToastAndroid.SHORT);
this.props.navigation.navigate('AuthLoading') this.props.navigation.navigate('AuthLoading')
@@ -70,12 +80,12 @@ export default class Login extends React.Component {
} }
if (urlRegex.test(url)) { if (urlRegex.test(url)) {
if(url.match(/^http:\/\//i)){ if (url.match(/^http:\/\//i)) {
this.version(url.replace(/^http:\/\//i,"https://"), () => { this.version(url.replace(/^http:\/\//i, "https://"), () => {
this.version(url, this.notReachable, this.reachedButNot) this.version(url, this.notReachable, this.reachedButNot)
}); });
} else { } else {
this.version(url, this.notReachable,this.reachedButNot) this.version(url, this.notReachable, this.reachedButNot)
} }
} else { } else {
this.setState({...this.state, error: 'url must either start with http:// or https://'}) this.setState({...this.state, error: 'url must either start with http:// or https://'})
@@ -83,8 +93,8 @@ export default class Login extends React.Component {
}; };
checkUser = () => { checkUser = () => {
const {url, pass, name} = this.state; const {url, pass, name} = this.state;
axios.get(url + 'current/user', {auth:{username: name, password: pass}}).then((resp) => { axios.get(url + 'current/user', {auth: {username: name, password: pass}}).then((resp) => {
this.setState({...this.state, loggedIn: true}) this.setState({...this.state, loggedIn: true})
}).catch((resp) => { }).catch((resp) => {
this.setState({...this.state, loggedIn: false}) this.setState({...this.state, loggedIn: false})
@@ -95,38 +105,40 @@ export default class Login extends React.Component {
const {tryConnect, error, version, url, client, loggedIn} = this.state; const {tryConnect, error, version, url, client, loggedIn} = this.state;
return ( return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}> <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<View style={{width: "80%"}}> <View style={{width: "80%"}}>
<Text style={{fontSize: 20, textAlign:'center'}}>Gotify</Text> <Text style={{fontSize: 20, textAlign: 'center'}}>Gotify</Text>
<View style={{ alignItems: 'center', flexDirection: 'row'}}> <View style={{alignItems: 'center', flexDirection: 'row'}}>
<TextInput <TextInput
value={url} value={url}
placeholder="URL f.ex https://push.domain.tld" placeholder="URL f.ex https://push.domain.tld"
style={{alignSelf: 'stretch', flex: 1}} style={{alignSelf: 'stretch', flex: 1}}
keyboardType="url" keyboardType="url"
onChangeText={this.handleChange('url', {tryConnect: false, version: null})}/> onChangeText={this.handleChange('url', {tryConnect: false, version: null})}/>
<Icon.Button name="send" style={{alignSelf: 'flex-end'}} iconStyle={{marginRight: 0}} onPress={this.checkUrl}/> <Icon.Button name="md-send" style={{alignSelf: 'flex-end'}} iconStyle={{marginRight: 0}}
onPress={this.checkUrl}/>
</View> </View>
{error && <Text style={{textAlign:'center', color: 'red'}}>{error}</Text>} {error && <Text style={{textAlign: 'center', color: 'red'}}>{error}</Text>}
{version && <Text style={{textAlign:'center', color: 'green'}}>Gotify v{version.version}</Text>} {version && <Text style={{textAlign: 'center', color: 'green'}}>Gotify v{version.version}</Text>}
{tryConnect === true && ( {tryConnect === true && (
<React.Fragment> <React.Fragment>
<TextInput placeholder="Username" <TextInput placeholder="Username"
onChangeText={this.handleChange('name', {loggedIn: null})} onChangeText={this.handleChange('name', {loggedIn: null})}
style={{width: '100%'}}/> style={{width: '100%'}}/>
<View style={{ alignItems: 'center', flexDirection: 'row'}}> <View style={{alignItems: 'center', flexDirection: 'row'}}>
<TextInput placeholder="Password" <TextInput placeholder="Password"
secureTextEntry={true} secureTextEntry={true}
onChangeText={this.handleChange('pass', {loggedIn: null})} onChangeText={this.handleChange('pass', {loggedIn: null})}
style={{alignSelf: 'stretch', flex: 1}} style={{alignSelf: 'stretch', flex: 1}}
/> />
<Icon.Button name="send" style={{alignSelf: 'flex-end'}} iconStyle={{marginRight: 0}} onPress={this.checkUser}/> <Icon.Button name="md-send" style={{alignSelf: 'flex-end'}} iconStyle={{marginRight: 0}}
onPress={this.checkUser}/>
</View> </View>
{loggedIn === true && ( {loggedIn === true && (
<React.Fragment> <React.Fragment>
<Text style={{textAlign:'center', color: 'green'}}> <Text style={{textAlign: 'center', color: 'green'}}>
valid user valid user
</Text> </Text>
@@ -134,12 +146,12 @@ export default class Login extends React.Component {
value={client} value={client}
onChangeText={this.handleChange('client')} onChangeText={this.handleChange('client')}
style={{width: '100%'}}/> style={{width: '100%'}}/>
<Button title="Create Client" onPress={this.createClient} /> <Button title="Create Client" onPress={this.createClient}/>
</React.Fragment> </React.Fragment>
)} )}
{loggedIn === false && ( {loggedIn === false && (
<Text style={{textAlign:'center', color: 'red'}}> <Text style={{textAlign: 'center', color: 'red'}}>
wrong name / pass wrong name / pass
</Text> </Text>
)} )}