From 69b45fab869d4b59c47c69169371bd6ef66cf740 Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Fri, 15 Mar 2024 13:43:01 +0100 Subject: [PATCH 1/2] feat: add OIDC providers --- i18n/en.pot | 10 +++- i18n/fr.po | 6 +++ src/components/index.js | 1 + src/components/oidc-login-options.js | 52 ++++++++++++++++++++ src/components/oidc-login-options.module.css | 10 ++++ src/pages/login.js | 6 ++- 6 files changed, 82 insertions(+), 3 deletions(-) create mode 100644 src/components/oidc-login-options.js create mode 100644 src/components/oidc-login-options.module.css diff --git a/i18n/en.pot b/i18n/en.pot index 917a76b..2470ddc 100644 --- a/i18n/en.pot +++ b/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-13T14:28:23.404Z\n" -"PO-Revision-Date: 2024-03-13T14:28:23.404Z\n" +"POT-Creation-Date: 2024-03-15T10:33:03.828Z\n" +"PO-Revision-Date: 2024-03-15T10:33:03.828Z\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." @@ -89,6 +89,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 "I agree" msgstr "I agree" diff --git a/i18n/fr.po b/i18n/fr.po index 2ee1eae..52159cd 100644 --- a/i18n/fr.po +++ b/i18n/fr.po @@ -204,3 +204,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" diff --git a/src/components/index.js b/src/components/index.js index 5af7f2f..053a9fb 100644 --- a/src/components/index.js +++ b/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' diff --git a/src/components/oidc-login-options.js b/src/components/oidc-login-options.js new file mode 100644 index 0000000..35ea1fb --- /dev/null +++ b/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 }) => ( +
+ +
+) + +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 ( +
+ {oidcProviders.map((oidc) => ( + + ))} +
+ ) +} diff --git a/src/components/oidc-login-options.module.css b/src/components/oidc-login-options.module.css new file mode 100644 index 0000000..ca40133 --- /dev/null +++ b/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'; +} \ No newline at end of file diff --git a/src/pages/login.js b/src/pages/login.js index 4caa5a9..66e4fd3 100644 --- a/src/pages/login.js +++ b/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 && ( - + <> + + + )} ) From 2327aa255586f9d2609c64345b62d4c2cfe91654 Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Mon, 18 Mar 2024 19:45:22 +0100 Subject: [PATCH 2/2] fix: update icon sizing --- i18n/en.pot | 8 ++++---- src/components/oidc-login-options.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/i18n/en.pot b/i18n/en.pot index 9bc9117..c4ab789 100644 --- a/i18n/en.pot +++ b/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-15T10:33:03.828Z\n" -"PO-Revision-Date: 2024-03-15T10:33:03.828Z\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." @@ -204,7 +204,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." diff --git a/src/components/oidc-login-options.js b/src/components/oidc-login-options.js index 35ea1fb..1065f72 100644 --- a/src/components/oidc-login-options.js +++ b/src/components/oidc-login-options.js @@ -12,7 +12,7 @@ const loginTextStrings = { const SVGIcon = ({ baseUrl, endpoint }) => (
- +
)