♻️ [open-formulieren/open-forms#3680] Updated the LoginOptions components to deal with arrays for cosign login options

Author: SilviaAmAm

src/components/LoginOptions/LoginOptionsDisplay.js

@@ -9,7 +9,7 @@ import {getBEMClassName} from 'utils';
 const LoginOptionsDisplay = ({
   loginAsYourselfOptions,
   loginAsGemachtigdeOptions,
-  cosignLoginInfo,
+  cosignLoginOptions,
 }) => {
   return (
     <div className={getBEMClassName('login-options')}>
@@ -36,7 +36,7 @@ const LoginOptionsDisplay = ({
         </>
       )}
 
-      {cosignLoginInfo && (
+      {cosignLoginOptions && cosignLoginOptions.length > 0 && (
         <div className={getBEMClassName('login-options__cosign')}>
           <h2 className={getBEMClassName('login-options__caption')}>
             <FormattedMessage
@@ -45,7 +45,11 @@ const LoginOptionsDisplay = ({
             />
           </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 @@ const LoginOptionsDisplay = ({
 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

@@ -12,8 +12,9 @@ import LoginOptionsDisplay from './LoginOptionsDisplay';
 const LoginOptions = ({form, onFormStart}) => {
   const config = useContext(ConfigContext);
 
-  const loginAsYourselfOptions = [];
-  const loginAsGemachtigdeOptions = [];
+  let loginAsYourselfOptions = [];
+  let loginAsGemachtigdeOptions = [];
+  let 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/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,