fix: username verification format #181

i18n/en_US.yaml

@@ -618,6 +618,7 @@ ui:
       msg:
         empty: Name cannot be empty.
         range: Name up to 30 characters.
+        character: 'Must use the character set "a-z", "0-9", " - . _"'
     email:
       label: Email
       msg:
@@ -981,6 +982,7 @@ ui:
     admin_name:
       label: Name
       msg: Name cannot be empty.
+      character: 'Must use the character set "a-z", "0-9", " - . _"'
     admin_password:
       label: Password
       text: >-

ui/src/pages/Install/components/FourthStep/index.tsx

@@ -71,6 +71,13 @@ const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
         isInvalid: true,
         errorMsg: t('admin_name.msg'),
       };
+    } else if (/[^a-z0-9\-._]/.test(name.value)) {
+      bol = false;
+      data.name = {
+        value: name.value,
+        isInvalid: true,
+        errorMsg: t('admin_name.character'),
+      };
     }
 
     if (!password.value) {

ui/src/pages/Install/index.tsx

@@ -23,7 +23,7 @@ import {
 
 const Index: FC = () => {
   const { t } = useTranslation('translation', { keyPrefix: 'install' });
-  const [step, setStep] = useState(1);
+  const [step, setStep] = useState(4);
   const [loading, setLoading] = useState(true);
   const [errorData, setErrorData] = useState<{ [propName: string]: any }>({
     msg: '',

ui/src/pages/Users/Register/components/SignUpForm/index.tsx

@@ -70,6 +70,13 @@ const Index: React.FC<Props> = ({ callback }) => {
         isInvalid: true,
         errorMsg: t('name.msg.empty'),
       };
+    } else if (/[^a-z0-9\-._]/.test(name.value)) {
+      bol = false;
+      formData.name = {
+        value: name.value,
+        isInvalid: true,
+        errorMsg: t('name.msg.character'),
+      };
     } else if ([...name.value].length > 30) {
       bol = false;
       formData.name = {