feat: add OIDC Providers into UI

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-03-14T15:15:04.384Z\n"
-"PO-Revision-Date: 2024-03-14T15:15:04.384Z\n"
+"POT-Creation-Date: 2024-03-18T18:33:20.852Z\n"
+"PO-Revision-Date: 2024-03-18T18:33:20.852Z\n"
 
 msgid "Please confirm that you are not a robot by checking the checkbox."
 msgstr "Please confirm that you are not a robot by checking the checkbox."
@@ -92,6 +92,12 @@ msgstr "Creating account not available"
 msgid "Contact a system administrator to create an account."
 msgstr "Contact a system administrator to create an account."
 
+msgid "Log in with Google"
+msgstr "Log in with Google"
+
+msgid "Log in with Microsoft"
+msgstr "Log in with Microsoft"
+
 msgid "Creating account not available"
 msgstr "Creating account not available"
 
@@ -217,7 +223,7 @@ msgstr "Enter the new password for your account below"
 
 msgid ""
 "You should shortly be redirected. If you are not redirected, please click "
-"button."
+"redirect button."
 msgstr ""
 "You should shortly be redirected. If you are not redirected, please click "
-"button."
+"redirect button."

i18n/fr.po

@@ -208,3 +208,9 @@ msgstr "Saisir un nouveau de passe"
 
 msgid "Enter the new password for your account below"
 msgstr "Saisir ci-dessous le nouveau de passe pour votre compte"
+
+msgid "Log in with Google"
+msgstr "Se connecter avec Google"
+
+msgid "Log in with Microsoft"
+msgstr "Se connecter avec Microsoft"

src/components/index.js

@@ -23,3 +23,4 @@ export {
     NotAllowedNoticeCreateAccount,
 } from './not-allowed-notice.js'
 export { Popup } from './pop-up.js'
+export { OIDCLoginOptions } from './oidc-login-options.js'

src/components/oidc-login-options.js

@@ -0,0 +1,52 @@
+import i18n from '@dhis2/d2-i18n'
+import { Button } from '@dhis2/ui'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { useLoginConfig } from '../providers/index.js'
+import styles from './oidc-login-options.module.css'
+
+const loginTextStrings = {
+    login_with_google: i18n.t('Log in with Google'),
+    login_with_azure: i18n.t('Log in with Microsoft'),
+}
+
+const SVGIcon = ({ baseUrl, endpoint }) => (
+    <div>
+        <img height="24px" width="24px" src={`${baseUrl}${endpoint}`} />
+    </div>
+)
+
+SVGIcon.propTypes = {
+    baseUrl: PropTypes.string,
+    endpoint: PropTypes.string,
+}
+
+const redirectToOIDC = ({ baseUrl, endpoint }) => {
+    window.location.href = `${baseUrl}${endpoint}`
+}
+
+export const OIDCLoginOptions = () => {
+    const { oidcProviders, baseUrl, uiLocale } = useLoginConfig()
+    if (!(oidcProviders?.length > 0)) {
+        return null
+    }
+    return (
+        <div className={styles.formButtons}>
+            {oidcProviders.map((oidc) => (
+                <Button
+                    icon={<SVGIcon baseUrl={baseUrl} endpoint={oidc?.icon} />}
+                    key={oidc?.id}
+                    onClick={() => {
+                        redirectToOIDC({ baseUrl, endpoint: oidc?.url })
+                    }}
+                >
+                    {loginTextStrings[oidc?.loginText]
+                        ? i18n.t(loginTextStrings[oidc.loginText], {
+                              lng: uiLocale,
+                          })
+                        : oidc?.loginText}
+                </Button>
+            ))}
+        </div>
+    )
+}

src/components/oidc-login-options.module.css

@@ -0,0 +1,10 @@
+.formButtons {
+    display: flex;
+    flex-direction: var(--form-button-direction, column);
+    gap: var(--spacers-dp8);
+    margin-block: var(--spacers-dp16);
+}
+
+.formButtons * {
+    margin-block-start: '8px';
+}

src/pages/login.js

@@ -9,6 +9,7 @@ import {
     FormNotice,
     FormSubtitle,
     LoginLinks,
+    OIDCLoginOptions,
 } from '../components/index.js'
 import { checkIsFormValid, getIsRequired } from '../helpers/index.js'
 import { useLogin } from '../hooks/index.js'
@@ -260,7 +261,10 @@ const LoginFormContainer = () => {
                 uiLocale={uiLocale}
             />
             {!twoFAVerificationRequired && (
-                <LoginLinks formUserName={formUserName} />
+                <>
+                    <LoginLinks formUserName={formUserName} />
+                    <OIDCLoginOptions />
+                </>
             )}
         </FormContainer>
     )