fix(webapp): input.name is not allowed to be empty

edenia · Jul 5, 2023 · f7bf0ce · f7bf0ce
1 parent f5238cb
commit f7bf0ce
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/webapp/src/gql/faucet.gql.js b/webapp/src/gql/faucet.gql.js
@@ -1,8 +1,12 @@
 import gql from 'graphql-tag'
 
-export const CREATE_ACCOUNT_MUTATION = gql`
-  mutation ($token: String!, $public_key: String!, $name: String) {
-    createAccount(token: $token, public_key: $public_key, name: $name) {
+export const CREATE_ACCOUNT_MUTATION = (includeName = true) => gql`
+  mutation ($token: String!, $public_key: String! ${
+    includeName ? ', $name: String' : ''
+  }) {
+    createAccount(token: $token, public_key: $public_key ${
+      includeName ? ', name: $name' : ''
+    }) {
       account
     }
   }

diff --git a/webapp/src/routes/Faucet/index.js b/webapp/src/routes/Faucet/index.js
@@ -30,7 +30,7 @@ const Faucet = () => {
   const [createAccountValues, setCreateAccountValues] = useState({})
   const [transferTokensTransaction, setTransferTokensTransaction] = useState('')
   const [createFaucetAccount, { loading: loadingCreateAccount }] = useMutation(
-    CREATE_ACCOUNT_MUTATION,
+    CREATE_ACCOUNT_MUTATION( eosConfig.networkName !== 'ultra-testnet' ),
   )
   const [transferFaucetTokens, { loading: loadingTransferFaucetTokens }] =
     useMutation(TRANFER_FAUCET_TOKENS_MUTATION)
@@ -39,14 +39,17 @@ const Faucet = () => {
   const createAccount = async () => {
     const reCaptchaToken = await executeRecaptcha?.('submit')
 
-    if (eosConfig.networkName === 'libre-testnet') {
-      if (
-        !reCaptchaToken ||
-        (!createAccountValues.publicKey && !createAccountValues.accountName)
-      )
-        return
-    } else {
-      if (!reCaptchaToken || !createAccountValues.publicKey) return
+    if (
+      !reCaptchaToken ||
+      !createAccountValues.publicKey ||
+      (eosConfig.networkName !== 'ultra-testnet' &&
+        !createAccountValues.accountName)
+    ) {
+      showMessage({
+        type: 'error',
+        content: 'Fill out the fields to create an account',
+      })
+      return
     }
 
     try {
@@ -58,7 +61,7 @@ const Faucet = () => {
         variables: {
           token: reCaptchaToken,
           public_key: createAccountValues.publicKey,
-          name: createAccountValues.accountName || '',
+          name: createAccountValues.accountName
         },
       })
 
@@ -71,8 +74,8 @@ const Faucet = () => {
         ),
       })
     } catch (err) {
-      const errorMessage = err.message.replace(
-        'GraphQL error: assertion failure with message: ',
+      const errorMessage = err.message.replace('GraphQL error:','').replace(
+        'assertion failure with message: ',
         '',
       )
 
@@ -128,6 +131,12 @@ const Faucet = () => {
     setAccount('')
   }
 
+  const isValidName = name => {
+    const regex = /^[.12345abcdefghijklmnopqrstuvwxyz]+$/i
+
+    return name?.length < 13 && regex.test(name)
+  }
+
   return (
     <div className={classes.test}>
       <div className={classes.card}>
@@ -147,9 +156,11 @@ const Faucet = () => {
                       ...{ publicKey: e.target.value },
                     })
                   }
+                  error={!createAccountValues.publicKey}
+                  required
                 />
               </div>
-              {eosConfig.networkName === 'libre-testnet' && (
+              {eosConfig.networkName !== 'ultra-testnet' && (
                 <div>
                   <TextField
                     key="action-field-issue-tokens"
@@ -162,6 +173,8 @@ const Faucet = () => {
                         ...{ accountName: e.target.value },
                       })
                     }
+                    error={!isValidName(createAccountValues.accountName)}
+                    required
                   />
                 </div>
               )}
@@ -195,10 +208,11 @@ const Faucet = () => {
               <div>
                 <TextField
                   key="action-field-issue-tokens"
-                  label={`Account (500 ${eosConfig.tokenSymbol})`}
+                  label={`${t('account')} (500 ${eosConfig.tokenSymbol})`}
                   variant="outlined"
                   value={account}
                   onChange={(e) => setAccount(e.target.value)}
+                  error={!isValidName(account)}
                 />
               </div>
               <div>