first commit

common/resources/client/admin/users/crupdate-user-form.tsx

@@ -0,0 +1,118 @@
+import {FieldValues, SubmitHandler, UseFormReturn} from 'react-hook-form';
+import clsx from 'clsx';
+import {ReactNode} from 'react';
+import {Link} from 'react-router-dom';
+import {useValueLists} from '../../http/value-lists';
+import {FormTextField} from '../../ui/forms/input-field/text-field/text-field';
+import {FormSwitch} from '../../ui/forms/toggle/switch';
+import {FormFileSizeField} from '../../ui/forms/input-field/file-size-field';
+import {LinkStyle} from '../../ui/buttons/external-link';
+import {FormPermissionSelector} from '../../auth/ui/permission-selector';
+import {Trans} from '../../i18n/trans';
+import {FormChipField} from '../../ui/forms/input-field/chip-field/form-chip-field';
+import {Item} from '../../ui/forms/listbox/item';
+import {CrupdateResourceLayout} from '../crupdate-resource-layout';
+import {useSettings} from '../../core/settings/use-settings';
+
+interface Props<T extends FieldValues> {
+  onSubmit: SubmitHandler<T>;
+  form: UseFormReturn<T>;
+  title: ReactNode;
+  subTitle?: ReactNode;
+  isLoading: boolean;
+  avatarManager: ReactNode;
+  resendEmailButton?: ReactNode;
+  children?: ReactNode;
+}
+export function CrupdateUserForm<T extends FieldValues>({
+  onSubmit,
+  form,
+  title,
+  subTitle,
+  isLoading,
+  avatarManager,
+  resendEmailButton,
+  children,
+}: Props<T>) {
+  const {require_email_confirmation} = useSettings();
+  const {data: valueLists} = useValueLists(['roles', 'permissions']);
+
+  return (
+    <CrupdateResourceLayout
+      onSubmit={onSubmit}
+      form={form}
+      title={title}
+      subTitle={subTitle}
+      isLoading={isLoading}
+    >
+      <div className="mb-40 flex items-start gap-40 md:gap-80">
+        {avatarManager}
+        <div className="flex-auto">
+          {children}
+          <FormTextField
+            className="mb-30"
+            name="first_name"
+            label={<Trans message="First name" />}
+          />
+          <FormTextField
+            name="last_name"
+            label={<Trans message="Last name" />}
+          />
+        </div>
+      </div>
+
+      <div className="mb-30 border-b border-t pb-30 pt-30">
+        <FormSwitch
+          className={clsx(resendEmailButton && 'mb-30')}
+          disabled={!require_email_confirmation}
+          name="email_verified_at"
+          description={
+            <Trans message="Whether email address has been confirmed. User will not be able to login until address is confirmed, unless confirmation is disabled from settings page." />
+          }
+        >
+          <Trans message="Email confirmed" />
+        </FormSwitch>
+        {resendEmailButton}
+      </div>
+      <FormFileSizeField
+        className="mb-30"
+        name="available_space"
+        label={<Trans message="Allowed storage space" />}
+        description={
+          <Trans
+            values={{
+              a: parts => (
+                <Link
+                  className={LinkStyle}
+                  target="_blank"
+                  to="/admin/settings/uploading"
+                >
+                  {parts}
+                </Link>
+              ),
+            }}
+            message="Total storage space all user uploads are allowed to take up. If left empty, this value will be inherited from any roles or subscriptions user has, or from 'Available space' setting in <a>Uploading</a> settings page."
+          />
+        }
+      />
+      <FormChipField
+        className="mb-30"
+        name="roles"
+        label={<Trans message="Roles" />}
+        suggestions={valueLists?.roles}
+      >
+        {chip => (
+          <Item key={chip.id} value={chip.id}>
+            {chip.name}
+          </Item>
+        )}
+      </FormChipField>
+      <div className="mt-30 border-t pt-30">
+        <div className="mb-10 text-sm">
+          <Trans message="Permissions" />
+        </div>
+        <FormPermissionSelector name="permissions" />
+      </div>
+    </CrupdateResourceLayout>
+  );
+}