setting up create screen

app/mobile/src/access/create/Create.jsx

@@ -1,4 +1,4 @@
-import { ActivityIndicator, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native';
+import { ScrollView, ActivityIndicator, Alert, Text, TextInput, View, TouchableOpacity } from 'react-native';
 import { styles } from './Create.styled';
 import Ionicons from '@expo/vector-icons/AntDesign';
 import { useCreate } from './useCreate.hook';
@@ -14,7 +14,7 @@ export function Create() {
     catch (err) {
       Alert.alert(
         "Create Failed",
-        "Please check your login and password.",
+        "Please check your username and password.",
       );
     }
   }
@@ -24,79 +24,99 @@ export function Create() {
       <View style={styles.container}>
         <View style={styles.control}>
           <TouchableOpacity onPress={actions.config}>
-            <Ionicons style={styles.config} name="setting" size={24} color="#aaaaaa" />
+            <Ionicons style={styles.config} name="setting" size={24} color="#888888" />
           </TouchableOpacity>
         </View>
         <Text style={styles.title}>Databag</Text>
         <View style={styles.spacemid}>
           <Text style={styles.header}>Create Account</Text>
         </View>
-        <View style={styles.spacetop}>
+        <ScrollView style={styles.spacetop}>
           <View style={styles.inputwrapper}>
-            <Ionicons style={styles.icon} name="user" size={18} color="#aaaaaa" />
-            <TextInput style={styles.inputfield} value={state.create} onChangeText={actions.setLogin}
-                autoCapitalize="none" placeholder="username@server" />
-            <View style={styles.space} />
+            <Ionicons style={styles.icon} name="database" size={18} color="#888888" />
+            <TextInput style={styles.inputfield} value={state.server} onChangeText={actions.setServer}
+                autoCapitalize="none" placeholder="server" />
+            <View style={styles.space}>
+              <Text style={styles.required}>✻</Text>
+            </View>
+          </View>
+          { state.tokenRequired && (
+            <View style={styles.inputwrapper}>
+              <Ionicons style={styles.icon} name="key" size={18} color="#888888" />
+              <TextInput style={styles.inputfield} value={state.token} onChangeText={actions.setToken}
+                  autoCapitalize="none" placeholder="token" />
+              <View style={styles.space} />
+            </View>
+          )}
+          <View style={styles.inputwrapperpad}>
+            <Ionicons style={styles.icon} name="user" size={18} color="#888888" />
+            <TextInput style={styles.inputfield} value={state.username} onChangeText={actions.setUsername}
+                autoCapitalize="none" placeholder="username" />
+            <View style={styles.space}>
+              <Text style={styles.required}>✻</Text>
+            </View>
           </View>
           { state.showPassword && (
             <View style={styles.inputwrapper}>
-              <Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" />
+              <Ionicons style={styles.icon} name="lock" size={18} color="#888888" />
               <TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword}
                   autoCapitalize="none" placeholder="password" />
               <TouchableOpacity onPress={actions.hidePassword}>
-                <Ionicons style={styles.icon} name="eye" size={18} color="#aaaaaa" />
+                <Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
               </TouchableOpacity>
             </View>
           )}
           { !state.showPassword && (
             <View style={styles.inputwrapper}>
-              <Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" />
+              <Ionicons style={styles.icon} name="lock" size={18} color="#888888" />
               <TextInput style={styles.inputfield} value={state.password} onChangeText={actions.setPassword}
                   secureTextEntry={true} autoCapitalize="none" placeholder="password" />
               <TouchableOpacity onPress={actions.showPassword}>
-                <Ionicons style={styles.icon} name="eyeo" size={18} color="#aaaaaa" />
+                <Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
               </TouchableOpacity>
             </View>
           )}
           { state.showConfirm && (
             <View style={styles.inputwrapper}>
-              <Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" />
+              <Ionicons style={styles.icon} name="lock" size={18} color="#888888" />
               <TextInput style={styles.inputfield} value={state.confirm} onChangeText={actions.setConfirm}
                   autoCapitalize="none" placeholder="confirm password" />
               <TouchableOpacity onPress={actions.hideConfirm}>
-                <Ionicons style={styles.icon} name="eye" size={18} color="#aaaaaa" />
+                <Ionicons style={styles.icon} name="eye" size={18} color="#888888" />
               </TouchableOpacity>
             </View>
           )}
           { !state.showConfirm && (
             <View style={styles.inputwrapper}>
-              <Ionicons style={styles.icon} name="lock" size={18} color="#aaaaaa" />
+              <Ionicons style={styles.icon} name="lock" size={18} color="#888888" />
               <TextInput style={styles.inputfield} value={state.confirm} onChangeText={actions.setConfirm}
                   secureTextEntry={true} autoCapitalize="none" placeholder="confirm password" />
               <TouchableOpacity onPress={actions.showConfirm}>
-                <Ionicons style={styles.icon} name="eyeo" size={18} color="#aaaaaa" />
+                <Ionicons style={styles.icon} name="eyeo" size={18} color="#888888" />
               </TouchableOpacity>
             </View>
           )}
-          { state.enabled && (
-            <TouchableOpacity style={styles.create} onPress={create}>
-              { state.busy && (
-                <ActivityIndicator size="small" color="#ffffff" />
-              )}
-              { !state.busy && (
-                <Text style={styles.createtext}>Create Account</Text>
-              )}
+          <View style={styles.buttons}>
+            { state.enabled && (
+              <TouchableOpacity style={styles.create} onPress={create}>
+                { state.busy && (
+                  <ActivityIndicator size="small" color="#ffffff" />
+                )}
+                { !state.busy && (
+                  <Text style={styles.createtext}>Create Account</Text>
+                )}
+              </TouchableOpacity>
+            )}
+            { !state.enabled && (
+              <View style={styles.nocreate}>
+                <Text style={styles.nocreatetext}>Create</Text>
+              </View>
+            )}
+            <TouchableOpacity style={styles.login} onPress={actions.create}>
+              <Text style={styles.createtext}>Account Login</Text>
             </TouchableOpacity>
-          )}
-          { !state.enabled && (
-            <View style={styles.nocreate}>
-              <Text style={styles.nocreatetext}>Create</Text>
-            </View>
-          )}
-          <TouchableOpacity style={styles.create} onPress={actions.login}>
-            <Text style={styles.createtext}>Account Login</Text>
-          </TouchableOpacity>
-        </View>      
+          </View>
+        </ScrollView>      
       </View>
     </View>
   );

app/mobile/src/access/create/Create.styled.js

@@ -14,6 +14,14 @@ export const styles = StyleSheet.create({
   },
   space: {
     width: 32,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  required: {
+    fontSize: 12,
+    color: Colors.alert,
+    textAlignVertical: 'center',
   },
   container: {
     flexDirection: 'column',
@@ -22,14 +30,13 @@ export const styles = StyleSheet.create({
     width: '100%',
     height: '100%',
     display: 'flex',
-    paddingLeft: 16,
-    paddingRight: 16,
-    },
+  },
   control: {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'flex-end',
     color: Colors.grey,
+    marginRight: 16,
   },
   title: {
     width: '100%',
@@ -46,12 +53,16 @@ export const styles = StyleSheet.create({
     width: '100%',
   },
   spacetop: {
-    flexGrow: 1,
-    flexDirection: 'column',
-    textAlign: 'center',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
     width: '100%',
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  buttons: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   header: {
     fontSize: 32,
@@ -67,6 +78,17 @@ export const styles = StyleSheet.create({
     marginBottom: 16,
     alignItems: 'center',
   },
+  inputwrapperpad: {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    borderRadius: 4,
+    borderColor: Colors.divider,
+    borderWidth: 1,
+    marginTop: 16,
+    marginBottom: 16,
+    alignItems: 'center',
+  },
   inputfield: {
     flex: 1,
     textAlign: 'center',
@@ -95,12 +117,14 @@ export const styles = StyleSheet.create({
     borderRadius: 4,
     borderColor: Colors.divider,
     borderWidth: 1,
+    marginBottom: 16,
   },
   nocreatetext: {
     color: Colors.disabled,
   },
   create: {
     marginTop: 16,
+    marginBottom: 16,
   },
   createtext: {
     fontColor: 'yellow',

app/mobile/src/access/create/useCreate.hook.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext } from 'react';
+import { useState, useEffect, useContext, useRef } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { useNavigate } from 'react-router-dom';
 import { AppContext } from 'context/AppContext';
@@ -11,23 +11,38 @@ export function useCreate() {
   const [state, setState] = useState({
     busy: false,
     enabled: false,
-    login: null,
+    server: null,
+    token: null,
+    username: null,
     password: null,
     confirm: null,
     showPassword: false,
     showConfirm: false,
+    serverCheck: true,
+    serverValid: false,
+    tokenRequired: false,
+    usernameCheck: true,
+    usernameValid: false,
+    
   });
 
+  const debounceUsername = useRef(null);
+  const debounceServer = useRef(null);
+
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
 
   useEffect(() => {
-    if (state.password && state.login && !state.enabled) {
-      updateState({ enabled: true });
+    if (state.password && state.username && state.server && state.confirm && state.password === state.confirm) {
+      if (!state.enabled) {
+        updateState({ enabled: true });
+      }
     }
-    if ((!state.password || !state.login) && state.enabled) {
-      updateState({ enabled: false });
+    else {
+      if (state.enabled) {
+        updateState({ enabled: false });
+      }
     }
   }, [state.login, state.password]);
 
@@ -35,8 +50,14 @@ export function useCreate() {
     config: () => {
       navigate('/admin');
     },
-    setLogin: (login) => {
-      updateState({ login });
+    setServer: (server) => {
+      updateState({ server });
+    },
+    setToken: (token) => {
+      updateState({ token });
+    },
+    setUsername: (username) => {
+      updateState({ username });
     },
     setPassword: (password) => {
       updateState({ password });