rendering field states in create screen

2025-02-12 03:29:16 +00:00 · 2022-09-10 02:12:49 -07:00 · 2022-09-10 02:12:49 -07:00 · d437d206d1
commit d437d206d1
parent 0f6963afd6
5 changed files with 153 additions and 32 deletions
--- a/app/mobile/src/access/create/Create.jsx
+++ b/app/mobile/src/access/create/Create.jsx
@ -19,6 +19,10 @@ export function Create() {
    }
  }

+  const validServer = (state.server && state.serverChecked && state.serverValid);
+  const validToken = (!state.tokenRequired || (state.token && state.tokenChecked && state.tokenValid));
+  const validUsername = (state.username && state.usernameChecked && state.usernameValid);
+
  return (
    <View style={styles.wrapper}>
      <View style={styles.container}>
@ -37,23 +41,51 @@ export function Create() {
            <TextInput style={styles.inputfield} value={state.server} onChangeText={actions.setServer}
                autoCapitalize="none" placeholder="server" />
            <View style={styles.space}>
-              <Text style={styles.required}>✻</Text>
+              { (!state.server || !state.serverChecked) && (
+                <Text style={styles.required}>✻</Text>
+              )}
+              { state.server && state.serverChecked && !state.serverValid && (
+                <Ionicons style={styles.icon} name="exclamationcircleo" size={18} color="#ff8888" />
+              )}
+              { state.server && state.serverChecked && state.serverValid && (
+                <Ionicons style={styles.icon} name="checkcircleo" size={18} color="#448866" />
+              )}
            </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}>
+          <View style={styles.token}>
+            { 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}>
+                  { (!validServer || !state.token || !state.tokenChecked) && (
+                    <Text style={styles.required}>✻</Text>
+                  )}
+                  { validServer && state.token && state.tokenChecked && !state.tokenValid && (
+                    <Ionicons style={styles.icon} name="exclamationcircleo" size={18} color="#ff8888" />
+                  )}
+                  { validServer && state.token && state.tokenChecked && state.tokenValid && (
+                    <Ionicons style={styles.icon} name="checkcircleo" size={18} color="#448866" />
+                  )}
+                </View>
+              </View>
+            )}
+          </View>
+          <View style={styles.inputwrapper}>
            <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>
+                { (!validServer || !validToken || !state.username || !state.usernameChecked) && (
+                  <Text style={styles.required}>✻</Text>
+                )}
+                { validServer && validToken && state.username && state.usernameChecked && !state.usernameValid && (
+                  <Ionicons style={styles.icon} name="exclamationcircleo" size={18} color="#ff8888" />
+                )}
+                { validServer && validToken && state.username && state.usernameChecked && state.usernameValid && (
+                  <Ionicons style={styles.icon} name="checkcircleo" size={18} color="#448866" />
+                )}
            </View>
          </View>
          { state.showPassword && (
--- a/app/mobile/src/access/create/Create.styled.js
+++ b/app/mobile/src/access/create/Create.styled.js
@ -20,7 +20,7 @@ export const styles = StyleSheet.create({
  },
  required: {
    fontSize: 12,
-    color: Colors.alert,
+    color: Colors.grey,
    textAlignVertical: 'center',
  },
  container: {
@ -31,6 +31,9 @@ export const styles = StyleSheet.create({
    height: '100%',
    display: 'flex',
  },
+  token: {
+    height: 52,
+  },
  control: {
    display: 'flex',
    flexDirection: 'row',
@ -103,6 +106,7 @@ export const styles = StyleSheet.create({
    height: 28,
    backgroundColor: Colors.primary,
    borderRadius: 4,
+    marginBottom: 16,
  },
  createtext: {
    color: Colors.formFocus,
@ -122,14 +126,14 @@ export const styles = StyleSheet.create({
  nocreatetext: {
    color: Colors.disabled,
  },
-  create: {
+  login: {
    marginTop: 16,
    marginBottom: 16,
  },
-  createtext: {
+  logintext: {
    fontColor: 'yellow',
  },
-  nocreatetext: {
+  nologintext: {
    color: Colors.disabled,
  },
    
--- a/app/mobile/src/access/create/useCreate.hook.js
+++ b/app/mobile/src/access/create/useCreate.hook.js
@ -2,6 +2,8 @@ import { useState, useEffect, useContext, useRef } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { useNavigate } from 'react-router-dom';
 import { AppContext } from 'context/AppContext';
+import { getAvailable } from 'api/getAvailable';
+import { getUsername } from 'api/getUsername';

 export function useCreate() {

@ -18,23 +20,26 @@ export function useCreate() {
    confirm: null,
    showPassword: false,
    showConfirm: false,
-    serverCheck: true,
+    serverChecked: true,
    serverValid: false,
    tokenRequired: false,
-    usernameCheck: true,
+    tokenChecked: true,
+    tokenValid: false,
+    usernameChecked: true,
    usernameValid: false,
-    
  });

-  const debounceUsername = useRef(null);
-  const debounceServer = useRef(null);
+  const debounce = useRef(null);

  const updateState = (value) => {
    setState((s) => ({ ...s, ...value }));
  }

  useEffect(() => {
-    if (state.password && state.username && state.server && state.confirm && state.password === state.confirm) {
+    if (state.usernameChecked && state.serverChecked && state.tokenChecked &&
+        state.password && state.username && state.server && state.confirm &&
+        (!state.tokenRequired || state.tokenValid) &&
+        state.serverValid && state.usernameValid && state.password === state.confirm) {
      if (!state.enabled) {
        updateState({ enabled: true });
      }
@ -44,20 +49,93 @@ export function useCreate() {
        updateState({ enabled: false });
      }
    }
-  }, [state.login, state.password]);
+  }, [state]);
+
+  const check = (server, token, username) => {
+    if (debounce.current) {
+      clearTimeout(debounce.current);
+    }
+    debounce.current = setTimeout(async () => {
+      debounce.current = null;
+      if (server) {
+        try {
+          const available = await getAvailable(server);
+          if (available) {
+            if (username) {
+              try {
+                const claimable = await getUsername(username, server, null);
+                updateState({ usernameChecked: true, tokenChecked: true, serverChecked: true, tokenRequired: false,
+                    usernameValid: claimable, serverValid: true });
+              }
+              catch (err) {
+                updateState({ usernameChecked: true, tokenChecked: true, serverChecked: true, tokenRequired: false,
+                    usernameValid: false, serverValid: true });
+              }
+            }
+            else {
+              updateState({ usernameChecked: true, tokenChecked: true, serverChecked: true, tokenRequired: false,
+                  serverValid: true });
+            }
+          }
+          else {
+            if (token) {
+              try {
+                const accessible = await getUsername(null, server, token);
+                if (accessible) {
+                  if (username) {
+                    try {
+                      const claimable = await getUsername(username, server, token);
+                      updateState({ usernameChecked: true, tokenChecked: true, serverChecked: true, tokenRequired: true,
+                          usernameValid: claimable, tokenValid: true, serverValid: true });
+                    }
+                    catch (err) {
+                      updateState({ usernameChecked: true, tokenChecked: true, serverChecked: true, tokenRequired: true,
+                          usernameValid: false, tokenValid: true, serverValid: true });
+                    }
+                  }
+                  else {
+                    updateState({ usernameChecked: true, tokenChecked: true, serverChecked: true, tokenRequired: true,
+                        tokenValid: true, serverValid: true });
+                  }
+                }
+                else {
+                  updateState({ usernameChecked: true, tokenChecked: true, serverChecked: true, tokenRequired: true,
+                      tokenValid: false, serverValid: true });
+                }
+              }
+              catch (err) {
+                updateState({ usernameChecked: true, tokenChecked: true, serverChecked: true, tokenRequired: true,
+                    tokenValid: false, serverValid: true });
+              }
+            }
+            else {
+              updateState({ usernameChecked: true, tokenChecked: true, serverChecked: true, tokenRequired: true,
+                  serverValid: true });
+            }
+          }
+        }
+        catch (err) {
+          updateState({ usernameChecked: true, tokenChecked: true, serverChecked: true, serverValid: false });
+        }
+      }
+    }, 1000);
+  }

  const actions = {
    config: () => {
      navigate('/admin');
    },
    setServer: (server) => {
-      updateState({ server });
+      updateState({ server, serverChecked: false });
+      check(server, state.token, state.username);
    },
    setToken: (token) => {
-      updateState({ token });
+      updateState({ token, tokenChecked: false });
+      check(state.server, token, state.username);
    },
    setUsername: (username) => {
-      updateState({ username });
+      updateState({ username, usernameChecked: false });
+      check(state.server, state.token, username);
    },
    setPassword: (password) => {
      updateState({ password });
--- a/app/mobile/src/api/getAvailable.js
+++ b/app/mobile/src/api/getAvailable.js
@ -1,7 +1,7 @@
 import { checkResponse, fetchWithTimeout } from './fetchUtil';

-export async function getAvailable() {
-  let available = await fetchWithTimeout("/account/available", { method: 'GET' })
+export async function getAvailable(server) {
+  let available = await fetchWithTimeout(`https://${server}/account/available`, { method: 'GET' })
  checkResponse(available)
  return await available.json()
 }
--- a/app/mobile/src/api/getUsername.js
+++ b/app/mobile/src/api/getUsername.js
@ -1,11 +1,18 @@
 import { checkResponse, fetchWithTimeout } from './fetchUtil';

-export async function getUsername(name, token) {
-  let access = "";
-  if (token) {
-    access = `&token=${token}`
+export async function getUsername(name, server, token) {
+  let query = "";
+  if (token && name) {
+    query = `?name=${encodeURIComponent(name)}&token=${token}`;
  }
-  let available = await fetchWithTimeout('/account/username?name=' + encodeURIComponent(name) + access, { method: 'GET' })
+  else if (!token && name) {
+    query = `?name=${encodeURIComponent(name)}`
+  }
+  else if (token && !name) {
+    query = `?token=${token}`;
+  }
+    
+  let available = await fetchWithTimeout(`https://${server}/account/username${query}`, { method: 'GET' })
  checkResponse(available)
  return await available.json()
 }