martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

completed login screen

Browse Source
This commit is contained in:
Roland Osborne 2022-09-08 14:51:46 -07:00
parent 11dfa6e843
commit 180fcfe0f8
4 changed files with 77 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
app/mobile/src/access/login/Login.jsx
View File

@ -1,4 +1,4 @@
import { Text, TextInput, View, TouchableOpacity } from 'react-native';
import { ActivityIndicator, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native';
import { styles } from './Login.styled';
import Ionicons from '@expo/vector-icons/AntDesign';
import { useLogin } from './useLogin.hook';
@ -7,6 +7,18 @@ export function Login() {
const { state, actions } = useLogin();
const login = async () => {
try {
await actions.login();
}
catch (err) {
Alert.alert(
"Login Failed",
"Please check your login and password.",
);
}
}
return (
<View style={styles.wrapper}>
<View style={styles.container}>
@ -26,17 +38,34 @@ export function Login() {
autoCapitalize="none" />
<View style={styles.space} />
</View>
<View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" />
<TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword}
autoCapitalize="none" />
<TouchableOpacity>
<Ionicons style={styles.icon} name="eye" size={18} color="#aaaaaa" />
</TouchableOpacity>
</View>
{ state.showPassword && (
<View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" />
<TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword}
autoCapitalize="none" />
<TouchableOpacity onPress={actions.hidePassword}>
<Ionicons style={styles.icon} name="eye" size={18} color="#aaaaaa" />
</TouchableOpacity>
</View>
)}
{ !state.showPassword && (
<View style={styles.inputwrapper}>
<Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" />
<TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword}
secureTextEntry={true} autoCapitalize="none" />
<TouchableOpacity onPress={actions.showPassword}>
<Ionicons style={styles.icon} name="eyeo" size={18} color="#aaaaaa" />
</TouchableOpacity>
</View>
)}
{ state.enabled && (
<TouchableOpacity style={styles.login}>
<Text style={styles.logintext}>Login</Text>
<TouchableOpacity style={styles.login} onPress={login}>
{ state.busy && (
<ActivityIndicator size="small" color="#ffffff" />
)}
{ !state.busy && (
<Text style={styles.logintext}>Login</Text>
)}
</TouchableOpacity>
)}
{ !state.enabled && (
@ -44,16 +73,9 @@ export function Login() {
<Text style={styles.nologintext}>Login</Text>
</View>
)}
{ state.createable && (
<TouchableOpacity style={styles.create}>
<Text style={styles.createtext}>Create Account</Text>
</TouchableOpacity>
)}
{ !state.createable && (
<View style={styles.create}>
<Text style={styles.nocreatetext}>Create Account</Text>
</View>
)}
<TouchableOpacity style={styles.create} onPress={actions.create}>
<Text style={styles.createtext}>Create Account</Text>
</TouchableOpacity>
</View>
</View>
</View>

31
app/mobile/src/access/login/useLogin.hook.js
View File

@ -1,16 +1,19 @@
import { useState, useEffect } from 'react';
import { useState, useEffect, useContext } from 'react';
import { useWindowDimensions } from 'react-native';
import { useNavigate } from 'react-router-dom';
import { AppContext } from 'context/AppContext';
export function useLogin() {
const navigate = useNavigate();
const app = useContext(AppContext);
const [state, setState] = useState({
createable: false,
busy: false,
enabled: false,
login: null,
password: null,
showPassword: false,
});
const updateState = (value) => {
@ -36,6 +39,30 @@ export function useLogin() {
setPassword: (password) => {
updateState({ password });
},
create: () => {
navigate('/create');
},
showPassword: () => {
updateState({ showPassword: true });
},
hidePassword: () => {
updateState({ showPassword: false });
},
login: async () => {
if (!state.busy) {
updateState({ busy: true });
try {
await app.actions.login(state.login, state.password);
navigate('/');
}
catch (err) {
console.log(err);
updateState({ busy: false, showAlert: true });
throw new Error('login failed');
}
updateState({ busy: false });
}
}
};
return { state, actions };

6
app/mobile/src/api/setLogin.js
View File

@ -1,11 +1,11 @@
import { checkResponse, fetchWithTimeout } from './fetchUtil';
import base64 from 'react-native-base64'
export async function setLogin(username, password) {
export async function setLogin(username, server, password) {
let headers = new Headers()
headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));
let app = { Name: "indicom", Description: "decentralized communication" }
let login = await fetchWithTimeout('/account/apps', { method: 'POST', body: JSON.stringify(app), headers: headers })
let app = { Name: "topics", Description: "decentralized communication" }
let login = await fetchWithTimeout(`https://${server}/account/apps`, { method: 'POST', body: JSON.stringify(app), headers: headers })
checkResponse(login)
return await login.json()
}

2
app/mobile/src/context/useAppContext.hook.js
View File

@ -51,7 +51,9 @@ export function useAppContext() {
}
const appLogin = async (username, password) => {
const acc = username.split('@');
let access = await setLogin(acc[0], acc[1], password)
console.log(access);
setWebsocket(acc[1], access.appToken)
updateState({ session: true, token: access.appToken, server: acc[1] });
// store