fix: read-only Auth fields (#2781)

payloadcms · Jun 6, 2023 · 60f5522 · 60f5522
1 parent 576af01
commit 60f5522
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 12 deletions.
diff --git a/src/admin/components/forms/field-types/ConfirmPassword/index.tsx b/src/admin/components/forms/field-types/ConfirmPassword/index.tsx
@@ -5,10 +5,15 @@ import Label from '../../Label';
 import Error from '../../Error';
 import { useFormFields } from '../../Form/context';
 import { Field } from '../../Form/types';
+import type { Props } from './types';
 
 import './index.scss';
 
-const ConfirmPassword: React.FC = () => {
+const ConfirmPassword: React.FC<Props> = (props) => {
+  const {
+    disabled,
+  } = props;
+
   const password = useFormFields<Field>(([fields]) => fields.password);
   const { t } = useTranslation('fields');
 
@@ -59,6 +64,7 @@ const ConfirmPassword: React.FC = () => {
         autoComplete="off"
         id="field-confirm-password"
         name="confirm-password"
+        disabled={!!disabled}
       />
     </div>
   );

diff --git a/src/admin/components/forms/field-types/ConfirmPassword/types.ts b/src/admin/components/forms/field-types/ConfirmPassword/types.ts
@@ -0,0 +1,4 @@
+
+export type Props = {
+  disabled?: boolean
+}
diff --git a/src/admin/components/forms/field-types/Password/index.tsx b/src/admin/components/forms/field-types/Password/index.tsx
@@ -19,6 +19,7 @@ const Password: React.FC<Props> = (props) => {
     width,
     autoComplete,
     label,
+    disabled,
   } = props;
 
   const path = pathFromProps || name;
@@ -67,7 +68,7 @@ const Password: React.FC<Props> = (props) => {
         id={`field-${path.replace(/\./gi, '__')}`}
         value={value as string || ''}
         onChange={setValue}
-        disabled={formProcessing}
+        disabled={formProcessing || disabled}
         type="password"
         autoComplete={autoComplete}
         name={path}

diff --git a/src/admin/components/forms/field-types/Password/types.ts b/src/admin/components/forms/field-types/Password/types.ts
@@ -9,8 +9,9 @@ export type Props = {
   required?: boolean
   validate?: Validate
   style?: React.CSSProperties
-  className?: string,
+  className?: string
   width?: string
   label?: string
   description?: Description
+  disabled?: boolean
 }
diff --git a/src/admin/components/views/Account/Default.tsx b/src/admin/components/views/Account/Default.tsx
@@ -106,6 +106,7 @@ const DefaultAccount: React.FC<Props> = (props) => {
                       collection={collection}
                       email={data?.email}
                       operation="update"
+                      readOnly={!hasSavePermission}
                     />
                     <RenderFields
                       permissions={permissions.fields}

diff --git a/src/admin/components/views/collections/Edit/Auth/APIKey.tsx b/src/admin/components/views/collections/Edit/Auth/APIKey.tsx
@@ -12,7 +12,7 @@ import GenerateConfirmation from '../../../../elements/GenerateConfirmation';
 const path = 'apiKey';
 const baseClass = 'api-key';
 
-const APIKey: React.FC = () => {
+const APIKey: React.FC<{readOnly?: boolean}> = ({ readOnly }) => {
   const [initialAPIKey, setInitialAPIKey] = useState(null);
   const [highlightedField, setHighlightedField] = useState(false);
   const { t } = useTranslation();
@@ -90,10 +90,12 @@ const APIKey: React.FC = () => {
           name="apiKey"
         />
       </div>
-      <GenerateConfirmation
-        setKey={() => setValue(uuidv4())}
-        highlightField={highlightField}
-      />
+      {!readOnly && (
+        <GenerateConfirmation
+          setKey={() => setValue(uuidv4())}
+          highlightField={highlightField}
+        />
+      )}
     </React.Fragment>
   );
 };

diff --git a/src/admin/components/views/collections/Edit/Auth/index.tsx b/src/admin/components/views/collections/Edit/Auth/index.tsx
@@ -17,7 +17,7 @@ import './index.scss';
 const baseClass = 'auth-fields';
 
 const Auth: React.FC<Props> = (props) => {
-  const { useAPIKey, requirePassword, verify, collection: { slug }, collection, email, operation } = props;
+  const { useAPIKey, requirePassword, verify, collection: { slug }, collection, email, operation, readOnly } = props;
   const [changingPassword, setChangingPassword] = useState(requirePassword);
   const enableAPIKey = useFormFields(([fields]) => fields.enableAPIKey);
   const dispatchFields = useFormFields((reducer) => reducer[1]);
@@ -79,7 +79,7 @@ const Auth: React.FC<Props> = (props) => {
             required
             name="email"
             label={t('general:email')}
-            admin={{ autoComplete: 'email' }}
+            admin={{ autoComplete: 'email', readOnly }}
           />
           {(changingPassword || requirePassword) && (
             <div className={`${baseClass}__changing-password`}>
@@ -88,13 +88,15 @@ const Auth: React.FC<Props> = (props) => {
                 required
                 name="password"
                 label={t('newPassword')}
+                disabled={readOnly}
               />
-              <ConfirmPassword />
+              <ConfirmPassword disabled={readOnly} />
               {!requirePassword && (
                 <Button
                   size="small"
                   buttonStyle="secondary"
                   onClick={() => handleChangePassword(false)}
+                  disabled={readOnly}
                 >
                   {t('general:cancel')}
                 </Button>
@@ -107,6 +109,7 @@ const Auth: React.FC<Props> = (props) => {
               size="small"
               buttonStyle="secondary"
               onClick={() => handleChangePassword(true)}
+              disabled={readOnly}
             >
               {t('changePassword')}
             </Button>
@@ -116,6 +119,7 @@ const Auth: React.FC<Props> = (props) => {
               size="small"
               buttonStyle="secondary"
               onClick={() => unlock()}
+              disabled={readOnly}
             >
               {t('forceUnlock')}
             </Button>
@@ -127,16 +131,18 @@ const Auth: React.FC<Props> = (props) => {
           <Checkbox
             label={t('enableAPIKey')}
             name="enableAPIKey"
+            admin={{ readOnly }}
           />
           {enableAPIKey?.value && (
-            <APIKey />
+            <APIKey readOnly={readOnly} />
           )}
         </div>
       )}
       {verify && (
         <Checkbox
           label={t('verified')}
           name="_verified"
+          admin={{ readOnly }}
         />
       )}
     </div>

diff --git a/src/admin/components/views/collections/Edit/Auth/types.ts b/src/admin/components/views/collections/Edit/Auth/types.ts
@@ -8,4 +8,5 @@ export type Props = {
   collection: SanitizedCollectionConfig
   email: string
   operation: 'update' | 'create'
+  readOnly: boolean
 }
diff --git a/src/admin/components/views/collections/Edit/Default.tsx b/src/admin/components/views/collections/Edit/Default.tsx
@@ -156,6 +156,7 @@ const DefaultEditView: React.FC<Props> = (props) => {
                         collection={collection}
                         email={data?.email}
                         operation={operation}
+                        readOnly={!hasSavePermission}
                       />
                     )}