preparing login screen

app/mobile/src/access/login/Login.jsx

@@ -1,19 +1,61 @@
-import Ionicons from '@expo/vector-icons/Ionicons';
+import { Text, TextInput, View, TouchableOpacity } from 'react-native';
-import { Text } from 'react-native';
+import { styles } from './Login.styled';
-import { Wrapper, Container, Control, Title, Spacer, Header } from './Login.styled';
+import Ionicons from '@expo/vector-icons/AntDesign';
+import { useLogin } from './useLogin.hook';
 
 export function Login() {
+
+  const { state, actions } = useLogin();
+
   return (
-    <Wrapper>
+    <View style={styles.wrapper}>
-      <Container>
+      <View style={styles.container}>
-        <Control>
+        <View style={styles.control}>
-          <Ionicons name="md-cog" size={32} color="grey" />
+          <TouchableOpacity onPress={actions.config}>
-        </Control>
+            <Ionicons style={styles.config} name="setting" size={24} color="#aaaaaa" />
-        <Title>Databag</Title>
+          </TouchableOpacity>
-        <Spacer>
+        </View>
-          <Header>Login</Header>
+        <Text style={styles.title}>Databag</Text>
-        </Spacer>
+        <View style={styles.spacemid}>
-      </Container>
+          <Text style={styles.header}>Login</Text>
-    </Wrapper>
+        </View>
+        <View style={styles.spacetop}>
+          <View style={styles.inputwrapper}>
+            <Ionicons style={styles.icon} name="user" size={18} color="#aaaaaa" />
+            <TextInput style={styles.inputfield} value={state.login} onChangeText={actions.setLogin}
+                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.enabled && (
+            <TouchableOpacity style={styles.login}>
+              <Text style={styles.logintext}>Login</Text>
+            </TouchableOpacity>
+          )}
+          { !state.enabled && (
+            <View style={styles.nologin}>
+              <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>
+          )}
+        </View>      
+      </View>
+    </View>
   );
 }

app/mobile/src/access/login/Login.styled.js

@@ -0,0 +1,113 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'constants/Colors';
+
+export const styles = StyleSheet.create({
+  wrapper: {
+    width: '100%',
+    height: '100%',
+  },
+  config: {
+    paddingTop: 8,
+  },
+  icon: {
+    padding: 8,
+  },
+  space: {
+    width: 32,
+  },
+  container: {
+    flexDirection: 'column',
+    backgroundColor: Colors.formBackground,
+    borderRadius: 4,
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    paddingLeft: 16,
+    paddingRight: 16,
+    },
+  control: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    color: Colors.grey,
+  },
+  title: {
+    width: '100%',
+    textAlign: 'center',
+    fontSize: 24,
+    color: Colors.grey,
+  },
+  spacemid: {
+    flexGrow: 1,
+    flexDirection: 'column',
+    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  spacetop: {
+    flexGrow: 1,
+    flexDirection: 'column',
+    textAlign: 'center',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    width: '100%',
+  },
+  header: {
+    fontSize: 32,
+    color: Colors.text,
+  },
+  inputwrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    borderRadius: 4,
+    borderColor: Colors.divider,
+    borderWidth: 1,
+    marginBottom: 16,
+    alignItems: 'center',
+  },
+  inputfield: {
+    flex: 1,
+    textAlign: 'center',
+    padding: 8,
+  },
+  login: {
+    marginTop: 16,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 128,
+    height: 28,
+    backgroundColor: Colors.primary,
+    borderRadius: 4,
+  },
+  logintext: {
+    color: Colors.formFocus,
+  },
+  nologin: {
+    marginTop: 16,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 128,
+    height: 28,
+    borderRadius: 4,
+    borderColor: Colors.divider,
+    borderWidth: 1,
+  },
+  nologintext: {
+    color: Colors.disabled,
+  },
+  create: {
+    marginTop: 16,
+  },
+  createtext: {
+    fontColor: 'yellow',
+  },
+  nocreatetext: {
+    color: Colors.disabled,
+  },
+    
+})
+

app/mobile/src/access/login/Login.styled.jsx

@@ -1,44 +0,0 @@
-import styled from 'styled-components/native';
-import { Colors } from 'constants/Colors';
-
-export const Wrapper = styled.View`
-  width: 100%;
-  height: 100%;
-`
-
-export const Container = styled.View`
-  background-color: ${Colors.formBackground};
-  border-radius: 4px;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-`
-
-export const Control = styled.View`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  color: ${Colors.grey};
-`
-
-export const Title = styled.Text`
-  width: 100%;
-  text-align: center;
-  fontSize: 24px;
-  color: ${Colors.grey};
-`
-
-export const Spacer = styled.View`
-  flex-grow: 1;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-`
-
-export const Header = styled.Text`
-  font-size: 32px;
-  color: ${Colors.text};
-`
-

app/mobile/src/access/login/useLogin.hook.js

@@ -0,0 +1,43 @@
+import { useState, useEffect } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { useNavigate } from 'react-router-dom';
+
+export function useLogin() {
+
+  const navigate = useNavigate();
+
+  const [state, setState] = useState({
+    createable: false,
+    enabled: false,
+    login: null,
+    password: null,
+  });
+
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
+  useEffect(() => {
+    if (state.password && state.login && !state.enabled) {
+      updateState({ enabled: true });
+    }
+    if ((!state.password || !state.login) && state.enabled) {
+      updateState({ enabled: false });
+    }
+  }, [state.login, state.password]);
+
+  const actions = {
+    config: () => {
+      navigate('/admin');
+    },
+    setLogin: (login) => {
+      updateState({ login });
+    },
+    setPassword: (password) => {
+      updateState({ password });
+    },
+  };
+
+  return { state, actions };
+}
+

app/mobile/src/constants/Colors.js

@@ -11,6 +11,7 @@ export const Colors = {
   encircle: '#cccccc',
   alert: '#ff8888',
   enabled: '#444444',
+  lightgrey: '#bbbbbb',
   disabled: '#aaaaaa',
   text: '#444444',
   link: '#0077CC',