[OF#3680] Handle multiple cosign auth methods for cosign

src/components/LoginOptions/LoginOptions.stories.js

@@ -17,10 +17,11 @@ export default {
 };
 
 export const Display = {
-  render: ({loginAsYourselfOptions, loginAsGemachtigdeOptions}) => (
+  render: ({loginAsYourselfOptions, loginAsGemachtigdeOptions, cosignLoginOptions}) => (
     <LoginOptionsDisplay
       loginAsYourselfOptions={loginAsYourselfOptions}
       loginAsGemachtigdeOptions={loginAsGemachtigdeOptions}
+      cosignLoginOptions={cosignLoginOptions}
     />
   ),
   args: {
@@ -76,18 +77,37 @@ export const Display = {
         url: '#',
       },
     ],
+    cosignLoginOptions: [
+      {
+        identifier: 'digid',
+        label: 'DigiD',
+        logo: {
+          appearance: 'dark',
+          href: 'https://www.digid.nl/',
+          title: 'DigiD',
+          imageSrc: './digid.png',
+        },
+        url: '#',
+      },
+      {
+        identifier: 'eHerkenning',
+        label: 'eHerkenning',
+        logo: {
+          appearance: 'light',
+          href: 'https://www.eherkenning.nl/',
+          title: 'eHerkenning',
+          imageSrc: './eherkenning.png',
+        },
+        url: '#',
+      },
+    ],
   },
 };
 
-const render = ({
-  loginRequired = false,
-  loginOptions = [],
-  cosignLoginInfo = undefined,
-  onFormStart,
-}) =>
+const render = ({loginRequired = false, loginOptions = [], cosignLoginOptions = [], onFormStart}) =>
   console.log(onFormStart) || (
     <LoginOptions
-      form={buildForm({loginRequired, loginOptions, cosignLoginInfo})}
+      form={buildForm({loginRequired, loginOptions, cosignLoginOptions})}
       onFormStart={onFormStart}
     />
   );
@@ -214,17 +234,19 @@ export const WithCoSignOption = {
         isForGemachtigde: false,
       },
     ],
-    cosignLoginInfo: {
-      identifier: 'digid',
-      label: 'DigiD',
-      url: '#',
-      logo: {
-        title: 'DigiD simulatie',
-        imageSrc: './digid.png',
-        href: 'https://www.digid.nl/',
-        appearance: 'dark',
+    cosignLoginOptions: [
+      {
+        identifier: 'digid',
+        label: 'DigiD',
+        url: '#',
+        logo: {
+          title: 'DigiD simulatie',
+          imageSrc: './digid.png',
+          href: 'https://www.digid.nl/',
+          appearance: 'dark',
+        },
+        isForGemachtigde: false,
       },
-      isForGemachtigde: false,
-    },
+    ],
   },
 };

src/components/LoginOptions/LoginOptionsDisplay.js

@@ -9,7 +9,7 @@
 const LoginOptionsDisplay = ({
   loginAsYourselfOptions,
   loginAsGemachtigdeOptions,
-  cosignLoginInfo,
+  cosignLoginOptions,
 }) => {
   return (
     <div className={getBEMClassName('login-options')}>
@@ -36,7 +36,7 @@
         </>
       )}
 
-      {cosignLoginInfo && (
+      {cosignLoginOptions?.length > 0 && (
         <div className={getBEMClassName('login-options__cosign')}>
           <h2 className={getBEMClassName('login-options__caption')}>
             <FormattedMessage
@@ -45,7 +45,11 @@
             />
           </h2>
 
-          <LoginButton key={cosignLoginInfo.identifier} option={cosignLoginInfo} />
+          <div className={getBEMClassName('login-options__list')}>
+            {cosignLoginOptions.map(option => (
+              <LoginButton key={option.identifier} option={option} />
+            ))}
+          </div>
         </div>
       )}
     </div>
@@ -55,7 +59,7 @@
 LoginOptionsDisplay.propTypes = {
   loginAsYourselfOptions: PropTypes.arrayOf(FormattedLoginOption).isRequired,
   loginAsGemachtigdeOptions: PropTypes.arrayOf(FormattedLoginOption).isRequired,
-  cosignLoginInfo: FormattedLoginOption,
+  cosignLoginOptions: PropTypes.arrayOf(FormattedLoginOption),
 };
 
 export default LoginOptionsDisplay;

src/components/LoginOptions/index.js

@@ -14,6 +14,7 @@ const LoginOptions = ({form, onFormStart}) => {
 
   const loginAsYourselfOptions = [];
   const loginAsGemachtigdeOptions = [];
+  const cosignLoginOptions = [];
 
   form.loginOptions.forEach(option => {
     let readyOption = {...option};
@@ -33,6 +34,21 @@ const LoginOptions = ({form, onFormStart}) => {
     }
   });
 
+  if (form.cosignLoginOptions) {
+    form.cosignLoginOptions.forEach(option => {
+      cosignLoginOptions.push({
+        ...option,
+        label: (
+          <FormattedMessage
+            description="Login button label"
+            defaultMessage="Login with {provider}"
+            values={{provider: option.label}}
+          />
+        ),
+      });
+    });
+  }
+
   if (!form.loginRequired) {
     loginAsYourselfOptions.push({
       identifier: 'anonymous',
@@ -51,23 +67,12 @@ const LoginOptions = ({form, onFormStart}) => {
         },
       };
 
-  let cosignInfo = form.cosignLoginInfo && {
-    ...form.cosignLoginInfo,
-    label: (
-      <FormattedMessage
-        description="Login button label"
-        defaultMessage="Login with {provider}"
-        values={{provider: form.cosignLoginInfo.label}}
-      />
-    ),
-  };
-
   return (
     <Container {...containerProps}>
       <LoginDisplayComponent
         loginAsYourselfOptions={loginAsYourselfOptions}
         loginAsGemachtigdeOptions={loginAsGemachtigdeOptions}
-        cosignLoginInfo={cosignInfo}
+        cosignLoginOptions={cosignLoginOptions}
       />
     </Container>
   );

src/components/LoginOptions/tests.spec.js

@@ -30,7 +30,7 @@ afterEach(() => {
 });
 
 it('Login not required, options wrapped in form tag', () => {
-  const form = buildForm({loginRequired: false, loginOptions: []});
+  const form = buildForm({loginRequired: false, loginOptions: [], cosignLoginOptions: []});
   const onFormStart = jest.fn(e => e.preventDefault());
 
   act(() => {
@@ -67,6 +67,7 @@ it('Login required, options not wrapped in form tag', () => {
         isForGemachtigde: false,
       },
     ],
+    cosignLoginOptions: [],
   });
   const onFormStart = jest.fn(e => e.preventDefault());
 
@@ -114,6 +115,7 @@ it('Login button has the right URL after cancelling log in', () => {
         isForGemachtigde: false,
       },
     ],
+    cosignLoginOptions: [],
   });
 
   const onFormStart = jest.fn(e => e.preventDefault());

src/formio/components/Cosign.js

@@ -6,7 +6,6 @@ export default class Cosign extends Email {
       {
         label: 'Co-sign',
         type: 'cosign',
-        authPlugin: 'digid', // default
         input: false,
       },
       ...extend

src/formio/components/Cosign.stories.js

@@ -10,7 +10,6 @@ export default {
     type: 'cosign',
     label: 'Co-signer email address',
     validateOn: 'blur',
-    authPlugin: 'digid',
     extraComponentProperties: {},
     evalContext: {},
   },
@@ -19,7 +18,6 @@ export default {
     label: {type: {required: true}},
     type: {table: {disable: true}},
     validateOn: {table: {disable: true}},
-    authPlugin: {table: {disable: true}},
     extraComponentProperties: {
       description: `Any additional Form.io component properties, recursively merged into the
         component definition.`,

src/types/Form.js

@@ -19,7 +19,7 @@ const Form = PropTypes.shape({
   name: PropTypes.string.isRequired,
   loginRequired: PropTypes.bool.isRequired,
   loginOptions: PropTypes.arrayOf(LoginOption).isRequired,
-  cosignLoginInfo: LoginOption,
+  cosignLoginOptions: PropTypes.arrayOf(LoginOption),
   product: PropTypes.string,
   slug: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,

src/types/FormattedLoginOption.js

@@ -1,14 +1,12 @@
 import PropTypes from 'prop-types';
 
+import LoginOptionLogo from './LoginOptionLogo';
+
 const FormattedLoginOption = PropTypes.shape({
   identifier: PropTypes.string.isRequired,
   label: PropTypes.node.isRequired,
   url: PropTypes.string,
-  logo: PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    imageSrc: PropTypes.string.isRequired,
-    href: PropTypes.string,
-  }),
+  logo: LoginOptionLogo,
   isForGemachtigde: PropTypes.bool,
 });
 

src/types/LoginOptionLogo.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+
+import {LOGO_APPEARANCES} from 'components/LoginButton/LoginButtonIcon';
+
+const LoginOptionLogo = PropTypes.shape({
+  title: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string.isRequired,
+  href: PropTypes.string,
+  appearance: PropTypes.oneOf(LOGO_APPEARANCES),
+});
+
+export default LoginOptionLogo;