fix(console): auto generate password (#1133)

packages/console/src/pages/Users/components/CreateForm/index.tsx

@@ -1,5 +1,6 @@
 import { User } from '@logto/schemas';
-import { passwordRegEx, usernameRegEx } from '@logto/shared';
+import { usernameRegEx } from '@logto/shared';
+import { nanoid } from 'nanoid';
 import React from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -12,7 +13,6 @@ import useApi from '@/hooks/use-api';
 
 type FormData = {
   username: string;
-  password: string;
   name: string;
 };
 
@@ -35,8 +35,10 @@ const CreateForm = ({ onClose }: Props) => {
       return;
     }
 
-    const createdUser = await api.post('/api/users', { json: data }).json<User>();
-    onClose?.(createdUser, btoa(data.password));
+    const password = nanoid();
+
+    const createdUser = await api.post('/api/users', { json: { ...data, password } }).json<User>();
+    onClose?.(createdUser, btoa(password));
   });
 
   return (
@@ -79,19 +81,6 @@ const CreateForm = ({ onClose }: Props) => {
             errorMessage={errors.name?.message}
           />
         </FormField>
-        <FormField isRequired title="admin_console.users.create_form_password">
-          <TextInput
-            {...register('password', {
-              required: true,
-              pattern: {
-                value: passwordRegEx,
-                message: t('errors.password_pattern_error'),
-              },
-            })}
-            hasError={Boolean(errors.password)}
-            errorMessage={errors.password?.message}
-          />
-        </FormField>
       </form>
     </ModalLayout>
   );

packages/console/src/scss/modal.module.scss

@@ -15,6 +15,10 @@
   align-items: center;
   flex: 0 0;
   min-height: 100%;
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 .fullScreen {