From c7a2ba06ae88177ae89cb0f4d72bba2de96975c0 Mon Sep 17 00:00:00 2001 From: Zainab Amir Date: Thu, 28 Mar 2024 12:10:31 +0500 Subject: [PATCH] feat: add social auth buttons (#3) Added a new component for social auth providers used on edX. This component can handle both login and registration page requirements. VAN-1883 --- example/index.scss | 2 + package-lock.json | 1 + package.json | 1 + src/common-ui/SocialAuthButtons/constants.jsx | 40 +++++++++ src/common-ui/SocialAuthButtons/index.jsx | 82 +++++++++++++++++++ src/common-ui/SocialAuthButtons/index.scss | 31 +++++++ src/common-ui/index.scss | 1 + src/common-ui/messages.js | 16 ++++ src/index.scss | 1 + webpack.dev.config.js | 5 ++ 10 files changed, 180 insertions(+) create mode 100644 src/common-ui/SocialAuthButtons/constants.jsx create mode 100644 src/common-ui/SocialAuthButtons/index.jsx create mode 100644 src/common-ui/SocialAuthButtons/index.scss create mode 100644 src/common-ui/index.scss create mode 100644 src/common-ui/messages.js diff --git a/example/index.scss b/example/index.scss index 333ca14e..6ebed12c 100644 --- a/example/index.scss +++ b/example/index.scss @@ -2,3 +2,5 @@ @import "@edx/brand/paragon/variables"; @import "@openedx/paragon/scss/core/core"; @import "@edx/brand/paragon/overrides"; + +@import "@edx/frontend-component-authn-edx"; diff --git a/package-lock.json b/package-lock.json index 8d3fe706..a7db8cd7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@fortawesome/free-solid-svg-icons": "5.15.4", "@fortawesome/react-fontawesome": "0.2.0", "@openedx/paragon": "^22.0.0", + "classnames": "^2.5.1", "core-js": "3.36.0", "react-redux": "7.2.9", "react-router": "6.22.3", diff --git a/package.json b/package.json index 74bd5796..f4cb6f83 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "@fortawesome/free-solid-svg-icons": "5.15.4", "@fortawesome/react-fontawesome": "0.2.0", "@openedx/paragon": "^22.0.0", + "classnames": "^2.5.1", "core-js": "3.36.0", "react-redux": "7.2.9", "react-router": "6.22.3", diff --git a/src/common-ui/SocialAuthButtons/constants.jsx b/src/common-ui/SocialAuthButtons/constants.jsx new file mode 100644 index 00000000..5cb3409e --- /dev/null +++ b/src/common-ui/SocialAuthButtons/constants.jsx @@ -0,0 +1,40 @@ +import React from 'react'; + +const socialLogos = { + Apple: ( + + + + ), + Facebook: ( + + + + + + + + + + + ), + Google: ( + + + + + + + + ), + Microsoft: ( + + + + + + + ), +}; + +export default socialLogos; diff --git a/src/common-ui/SocialAuthButtons/index.jsx b/src/common-ui/SocialAuthButtons/index.jsx new file mode 100644 index 00000000..b0dd2da6 --- /dev/null +++ b/src/common-ui/SocialAuthButtons/index.jsx @@ -0,0 +1,82 @@ +import React from 'react'; + +import { useIntl } from '@edx/frontend-platform/i18n'; +import { Button } from '@openedx/paragon'; +import classNames from 'classnames'; +import PropTypes from 'prop-types'; + +import socialLogos from './constants'; +import messages from '../messages'; +import './index.scss'; + +/** + * A reusable button component for social authentication providers (Facebook, Google, etc.). + * + * @param {boolean} inverseTextColor - Whether to use inverted text color (white for dark backgrounds). + * @param {string} providerName - Required. The name of the social authentication provider + * @param {boolean} showSigninText - Whether to display a sign-in or sign-up text based on the login page context. + * + * @returns {JSX.Element} The rendered SocialAuthButton component. + */ +const SocialAuthButton = ({ inverseTextColor, providerName, showSigninText }) => { + const { formatMessage } = useIntl(); + + return ( + + ); +}; + +SocialAuthButton.propTypes = { + inverseTextColor: PropTypes.bool, + providerName: PropTypes.string.isRequired, + showSigninText: PropTypes.bool, +}; + +SocialAuthButton.defaultProps = { + inverseTextColor: false, + showSigninText: true, +}; + +/** + * A component that renders a group of SocialAuthButton components for different social authentication providers. + * + * @param {boolean} isLoginPage - Whether the component is used on a login page. Affects the displayed text. + * + * @returns {JSX.Element} The rendered SocialAuthProviders component. + */ +const SocialAuthProviders = ({ isLoginPage }) => ( +
+ + + + +
+); + +SocialAuthProviders.propTypes = { + isLoginPage: PropTypes.bool, +}; + +SocialAuthProviders.defaultProps = { + isLoginPage: true, +}; + +export default SocialAuthProviders; diff --git a/src/common-ui/SocialAuthButtons/index.scss b/src/common-ui/SocialAuthButtons/index.scss new file mode 100644 index 00000000..61de7937 --- /dev/null +++ b/src/common-ui/SocialAuthButtons/index.scss @@ -0,0 +1,31 @@ +$white: #FFFFFF; +$black: #000000; +$facebook-blue: #1877F2; +$icon-and-text-gap: 15px; + +.social-auth-button_facebook { + gap: $icon-and-text-gap; + background-color: $facebook-blue; + + &.btn-tertiary:hover { + background-color: $facebook-blue; + } +} + +.social-auth-button_apple { + gap: $icon-and-text-gap; + background-color: $black; + + &.btn-tertiary:hover { + background-color: $black; + } +} + +.social-auth-button_google, .social-auth-button_microsoft { + gap: $icon-and-text-gap; + background-color: $white; + + &.btn-tertiary:hover { + background-color: $white; + } +} diff --git a/src/common-ui/index.scss b/src/common-ui/index.scss new file mode 100644 index 00000000..ee68419a --- /dev/null +++ b/src/common-ui/index.scss @@ -0,0 +1 @@ +@import "SocialAuthButtons"; diff --git a/src/common-ui/messages.js b/src/common-ui/messages.js new file mode 100644 index 00000000..1afa7519 --- /dev/null +++ b/src/common-ui/messages.js @@ -0,0 +1,16 @@ +import { defineMessages } from '@edx/frontend-platform/i18n'; + +const messages = defineMessages({ + socialAuthProviderSignupTitle: { + id: 'social.auth.provide.signup.title', + defaultMessage: 'Sign up with {providerName}', + description: 'Title that appears on the social sign up buttons i.e Sign up with Google', + }, + socialAuthProviderSigninTitle: { + id: 'social.auth.provide.signin.title', + defaultMessage: 'Sign in with {providerName}', + description: 'Title that appears on the social sign in buttons i.e Sign in with Google', + }, +}); + +export default messages; diff --git a/src/index.scss b/src/index.scss index e69de29b..5904ea72 100644 --- a/src/index.scss +++ b/src/index.scss @@ -0,0 +1 @@ +@import "common-ui"; diff --git a/webpack.dev.config.js b/webpack.dev.config.js index 9da035c9..bc6b4028 100644 --- a/webpack.dev.config.js +++ b/webpack.dev.config.js @@ -8,4 +8,9 @@ module.exports = createConfig('webpack-dev', { path: path.resolve(__dirname, 'example/dist'), publicPath: '/', }, + resolve: { + alias: { + '@edx/frontend-component-authn-edx': path.resolve(__dirname, 'src'), + }, + }, });