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