@logora/debate 0.1.0

package/src/components/auth/social_auth_form/SocialAuthForm.test.jsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from "react-router-dom";
+import { IntlProvider } from 'react-intl';
+import { SocialAuthForm } from './SocialAuthForm';
+import { DefaultSocialAuthForm, SocialAuthFormWithoutLogo } from './SocialAuthForm.stories';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+describe('SocialAuthForm', () => {
+    it('should render with correct default', () => {
+        const component = render(
+            <DefaultSocialAuthForm />
+        )
+
+        expect(screen.getByRole("img")).toBeTruthy();
+        const facebookButton = screen.getByText(/Sign in with Facebook/i);
+        const googleButton = screen.getByText(/Sign in with Google/i);
+        const emailButton = screen.getByText(/Sign in with email/i);
+
+        expect(facebookButton).toBeTruthy();
+        expect(googleButton).toBeTruthy();
+        expect(emailButton).toBeTruthy();
+    });
+
+    it('should render without logo', () => {
+        const component = render(
+            <SocialAuthFormWithoutLogo />
+        )
+
+        expect(screen.queryByRole("img")).toBeNull();
+        const facebookButton = screen.getByText(/Sign in with Facebook/i);
+        const googleButton = screen.getByText(/Sign in with Google/i);
+        const emailButton = screen.getByText(/Sign in with email/i);
+
+        expect(facebookButton).toBeTruthy();
+        expect(googleButton).toBeTruthy();
+        expect(emailButton).toBeTruthy();
+    });
+
+    it('should handle login navigation', async () => {
+        const component = render(
+            <DefaultSocialAuthForm />
+        )
+        const emailButton = screen.getByText(/Sign in with email/i);
+        expect(emailButton).toBeTruthy();
+
+        await userEvent.click(emailButton);
+
+        expect(screen.getByText("Email")).toBeTruthy();
+        expect(screen.getByText("Password")).toBeTruthy();
+
+        const backButton = screen.getByText("Back to menu");
+        expect(backButton).toBeTruthy();
+
+        await userEvent.click(backButton);
+
+        const emailButton2 = screen.getByText(/Sign in with email/i);
+        expect(emailButton2).toBeTruthy();
+    });
+
+    it('should handle signup navigation', async () => {
+        const component = render(
+            <DefaultSocialAuthForm />
+        )
+
+        const signupButton = screen.getByText(/Sign up/i);
+        expect(signupButton).toBeTruthy();
+
+        await userEvent.click(signupButton);
+
+        const emailButton = screen.getByText(/Sign in with email/i);
+        expect(emailButton).toBeTruthy();
+
+        await userEvent.click(emailButton);
+
+        expect(screen.getByText("First name")).toBeTruthy();
+        expect(screen.getByText("Last name")).toBeTruthy();
+        expect(screen.getByText("Email")).toBeTruthy();
+        expect(screen.getByText("Password")).toBeTruthy();
+
+        const backButton = screen.getByText("Back to menu");
+        expect(backButton).toBeTruthy();
+
+        await userEvent.click(backButton);
+
+        expect(screen.getByText(/Sign in with email/i)).toBeTruthy();
+        expect(screen.getByText(/Already have an account ?/i)).toBeTruthy();
+    });
+
+    it('should trigger callback when logging in with correct data', async () => {
+        const email = "test@test.com";
+        const password = "password";
+        const onSubmitCallback = vi.fn();
+        const data = { email: email, password: password }
+
+        render(
+            <MemoryRouter>
+                <IconProvider library={regularIcons}>
+                    <IntlProvider locale="en">
+                        <SocialAuthForm 
+                            onSubmit={onSubmitCallback} 
+                            facebookClientId={"facebook-client-id"}
+                            googleClientId={"google-client-id"}
+                            oAuthRedirectUri={"https://redirect-uri.com"} 
+                            logoUrl={"https://picsum.photos/200"}
+                            providerName={"My company"}
+                            termsUrl={"https://example.com/terms"}
+                            privacyUrl={"https://example.com/privacy"}
+                            forgotPasswordUrl={"http://example.com/forgot_password"} 
+                            lastStep={"LOGIN"}
+                        />
+                    </IntlProvider>
+                </IconProvider>
+            </MemoryRouter>
+        )
+
+        const submitButton = screen.getByRole("button");
+        const emailInput = screen.getByTestId("email-input");
+        const passwordInput = screen.getByTestId("password-input");
+
+        await userEvent.type(emailInput, email);
+        await userEvent.type(passwordInput, password);
+
+        expect(submitButton).toBeTruthy();
+
+        await userEvent.click(submitButton);
+        expect(onSubmitCallback).toHaveBeenCalledTimes(1);
+        expect(onSubmitCallback).toHaveBeenCalledWith(data, "password", "LOGIN");
+    });
+
+    it('should trigger callback when signing up with correct data', async () => {
+        const email = "test@test.com";
+        const firstName = "My first name";
+        const lastName = "My last name";
+        const password = "my-password";
+        const passwordConfirmation = password;
+        const acceptsEmail = true;
+        const onSubmitCallback = vi.fn();
+        const data = {
+            first_name: firstName,
+            last_name: lastName,
+            email: email,
+            password: password,
+            accepts_provider_email: acceptsEmail,
+            receives_newsletter_email: acceptsEmail
+        }
+
+        const component = render(
+            <MemoryRouter>
+                <IconProvider library={regularIcons}>
+                    <IntlProvider locale="en">
+                        <SocialAuthForm 
+                            onSubmit={onSubmitCallback} 
+                            facebookClientId={"facebook-client-id"}
+                            googleClientId={"google-client-id"}
+                            oAuthRedirectUri={"https://redirect-uri.com"} 
+                            logoUrl={"https://picsum.photos/200"}
+                            providerName={"My company"}
+                            termsUrl={"https://example.com/terms"}
+                            privacyUrl={"https://example.com/privacy"}
+                            forgotPasswordUrl={"http://example.com/forgot_password"} 
+                            lastStep={"SIGNUP"}
+                        />
+                    </IntlProvider>
+                </IconProvider>
+            </MemoryRouter>
+        )
+
+        const submitButton = screen.getByRole("button");
+        const firstNameInput = screen.getByTestId("first-name-input");
+        const lastNameInput = screen.getByTestId("last-name-input");
+        const emailInput = screen.getByTestId("email-input");
+        const passwordInput = screen.getByTestId("password-input");
+        const confirmPasswordInput = screen.getByTestId("password-confirmation-input");
+        const acceptsEmailInput = screen.getByTestId("accepts-email-input");
+
+        await userEvent.type(firstNameInput, firstName);
+        await userEvent.type(lastNameInput, lastName);
+        await userEvent.type(emailInput, email);
+        await userEvent.type(passwordInput, password);
+        await userEvent.type(confirmPasswordInput, passwordConfirmation);
+        await userEvent.click(acceptsEmailInput);
+
+        expect(submitButton).toBeTruthy();
+
+        await userEvent.click(submitButton);
+        expect(onSubmitCallback).toHaveBeenCalledTimes(1);
+
+        const call = onSubmitCallback.mock.calls[0];
+        expect(call[0].first_name).toBe(firstName);
+        expect(call[0].last_name).toBe(lastName);
+        expect(call[0].email).toBe(email);
+        expect(call[0].password).toBe(password);
+        expect(call[0].accepts_provider_email).toBe(acceptsEmail);
+        expect(call[0].receives_newsletter_email).toBe(acceptsEmail);
+        expect(call[1]).toBe('form');
+        expect(call[2]).toBe('SIGNUP');
+    });
+});

package/src/components/auth/social_auth_form/index.js

@@ -0,0 +1 @@
+export { SocialAuthForm } from './SocialAuthForm';

package/src/components/auth/sso_form/SSOForm.docs.mdx

@@ -0,0 +1,39 @@
+---
+description: A component to enable user sign in with OAuth2.
+labels: ['auth', 'sso', 'single-sign-on', 'oauth2']
+---
+
+The SSOForm component is a React component that represents a Single Sign-On form. 
+
+It provides a form with sign up and sign in options, as well as additional features like displaying a logo, and displaying terms and email consent options. 
+
+The component supports internationalization using the react-intl library.
+
+### Component usage
+
+```js
+import { SSOForm } from '@logora/debate.auth.sso_form';
+```
+
+```js
+    <MemoryRouter>
+        <IntlProvider locale="en">
+            <IconProvider>
+                <SocialAuthForm 
+                    authType={"oauth2_server"}
+                    providerName={"My Website"}
+                    clientId={"oauth-client-id"}
+                    scope={"email"}
+                    oAuthRedirectUri={"https://redirect-uri.com"} 
+                    loginUrl={"https://example.com/login"}
+                    signupUrl={"https://example.com/signup"}
+                    redirectParameter={"customRedirect"}
+                    trackingParameters={{ tracking: "test" }}
+                    termsUrl={"https://example.com/terms"}
+                    showEmailConsent={true}
+                    showTerms={true}
+                />
+            </IconProvider>
+        </IntlProvider>
+    </MemoryRouter>
+```

package/src/components/auth/sso_form/SSOForm.jsx

@@ -0,0 +1,243 @@
+import React from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+import { useLocation } from "react-router";
+import useSessionStorageState from '@rooks/use-sessionstorage-state';
+import { EMAIL_CONSENT_STORAGE_KEY } from "@logora/debate/auth/use_auth";
+import { Icon } from "@logora/debate/icons/icon";
+import { Toggle } from "@logora/debate/input/toggle";
+import { Button } from "@logora/debate/action/button";
+import cx from "classnames";
+import styles from "./SSOForm.module.scss";
+
+export const SSOForm = ({
+	authType,
+	providerName,
+	loginUrl,
+	signupUrl,
+	termsUrl,
+	logoUrl,
+	clientId,
+	oAuthRedirectUri,
+	scope,
+	redirectParameter = "logora_redirect",
+	trackingParameters = {},
+	hideActions = false,
+	hideLoginButton = false,
+	showEmailConsent = false,
+	showTerms = false,
+	hideBelowButton = false,
+	error = false,
+}) => {
+	const [emailConsent, setEmailConsent] = showEmailConsent
+		? useSessionStorageState(EMAIL_CONSENT_STORAGE_KEY, false)
+		: [false, () => { }];
+	const intl = useIntl();
+	const location = useLocation();
+
+	const getLinkWithRedirect = (url) => {
+		if (typeof window !== "undefined") {
+			const redirectUrl = url === "CURRENT_LOCATION" ? window.location : url;
+			const parsedUrl = new URL(redirectUrl, window.location.origin);
+			const params = parsedUrl.searchParams;
+			const originalParams = new URLSearchParams(location.search);
+
+			if (params.has("code")) {
+				params.delete("code");
+			}
+
+			if (redirectParameter) {
+				params.append(redirectParameter, window.location.toString());
+			}
+			for (const [key, value] of Object.entries(trackingParameters)) {
+				let parsedValue = value;
+				if (parsedValue) {
+					const currentPath = location.pathname.slice(
+						0,
+						location.pathname.lastIndexOf("/"),
+					);
+					parsedValue = parsedValue.replace(
+						"{{UTM_CAMPAIGN}}",
+						originalParams.get("utm_campaign"),
+					);
+					parsedValue = parsedValue.replace(
+						"{{CURRENT_PATH}}",
+						decodeURIComponent(currentPath),
+					);
+				}
+				if (key === "metadata" && parsedValue) {
+					parsedValue = window.btoa(parsedValue);
+				}
+				params.append(key, encodeURIComponent(parsedValue));
+			}
+			parsedUrl.search = params.toString();
+			return parsedUrl.toString();
+		}
+		return "";
+	};
+
+	const getOAuthDialogUrl = (url) => {
+		const baseUrl = new URL(url);
+		baseUrl.searchParams.delete("code");
+		baseUrl.searchParams.append("client_id", clientId);
+		baseUrl.searchParams.append("redirect_uri", oAuthRedirectUri);
+		baseUrl.searchParams.append("scope", scope);
+		baseUrl.searchParams.append("response_type", "code");
+		if (typeof window !== "undefined") {
+			const parsedUrl = new URL(window.location.href);
+			parsedUrl.searchParams.delete("code");
+			baseUrl.searchParams.append("state", window.btoa(parsedUrl.toString()));
+		}
+
+		return baseUrl.href;
+	};
+
+	const getAuthLink = (url) => {
+		if (authType === "oauth2_server") {
+			return getOAuthDialogUrl(url);
+		}
+		return getLinkWithRedirect(url);
+	};
+
+	const loginLink = getAuthLink(loginUrl);
+	const signupLink = getAuthLink(signupUrl);
+
+	return (
+		<div className={styles.ssoForm}>
+			<div className={styles.logo}>
+				{logoUrl ? (
+					<img
+						height={100}
+						width={100}
+						className={styles.logoImage}
+						src={logoUrl}
+						alt={`Logo ${providerName}`}
+					/>
+				) : (
+					<Icon
+						name="next"
+						aria-hidden="true"
+						height={50}
+						width={50}
+						className={styles.loginIcon}
+					/>
+				)}
+			</div>
+			<div className={styles.mainText}>
+				<div className={styles.title}>
+					{intl.formatMessage({
+						id: "auth.sso_form.title",
+						defaultMessage: "Debate now !",
+					})}
+					<br />
+				</div>
+				{intl.formatMessage(
+					{
+						id: "auth.sso_form.subtitle",
+						defaultMessage: "Sign up right now and receive alerts by email.",
+					},
+					{ provider: providerName },
+				)}
+			</div>
+			{hideActions ? null : (
+				<>
+					<Button
+						data-tid={"link_signup"}
+						data-testid={"signup-button"}
+						className={styles.loginButton}
+						to={signupLink}
+						external
+						border={false}
+					>
+						{intl.formatMessage({
+							id: "auth.sso_form.signup",
+							defaultMessage: "Sign up",
+						})}
+					</Button>
+					{hideBelowButton ? null : (
+						<>
+
+							{hideLoginButton === true ? null : (
+								<div className={styles.cgu}>
+									{intl.formatMessage({
+										id: "auth.sso_form.already_account",
+										defaultMessage: "Already have an account ?",
+									})}
+									<a
+										className={styles.signupButton}
+										data-testid={"signin-link"}
+										data-tid={"link_login"}
+										rel="nofollow"
+										href={loginLink}
+									>
+										{intl.formatMessage({
+											id: "auth.sso_form.signin",
+											defaultMessage: "Sign in",
+										})}
+									</a>
+								</div>
+							)}
+							{showEmailConsent ? (
+								<div className={cx(styles.switchBox)}>
+									<Toggle
+										type={"checkbox"}
+										name={"accepts_provider_email"}
+										style={{ fontSize: 18 }}
+										checked={emailConsent}
+										label={intl.formatMessage(
+											{
+												id: "auth.sso_form.consent_label",
+												defaultMessage: "I agree to receive emails from the editor",
+											},
+											{ variable: providerName },
+										)}
+										onInputChanged={(_e) => setEmailConsent(!emailConsent)}
+										data-testid={"accepts-email-input"}
+									/>
+								</div>
+							) : null}
+							{error ? (
+								<div className={styles.error}>
+									{intl.formatMessage({
+										id: "auth.sso_form.error",
+										defaultMessage:
+											"An error occurred during sign in. Please try again in a few moments.",
+									})}
+								</div>
+							) : null}
+							{showTerms && (
+								<>
+									<div className={styles.cguButton}>
+										<FormattedMessage
+											id="auth.sso_form.terms"
+											defaultMessage="By clicking on « Sign up », I declare that I have read the <var1> General Conditions of Use </var1> of the debate space and accept them"
+											values={{
+												var1: (chunks) => (
+													<a
+														className={styles.termsTarget}
+														target="_blank"
+														href={termsUrl}
+														rel="noreferrer"
+													>
+														{chunks}
+													</a>
+												),
+											}}
+										/>
+									</div>
+									<div className={styles.cguButton}>
+										<FormattedMessage
+											id="auth.sso_form.data_terms"
+											defaultMessage={
+												"Your personal data are being processed by the Editor. For more information and to exercise your rights, see our personal data policy available on the site."
+											}
+										/>
+									</div>
+								</>
+							)}
+						</>
+					)}
+				</>
+			)}
+		</div>
+	);
+};

package/src/components/auth/sso_form/SSOForm.module.scss

@@ -0,0 +1,99 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+@use 'styles/display' as display;
+
+.ssoForm {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+}
+
+.logo {
+  align-self: center;
+  @include spacing.mt(0, sm);
+  @include spacing.mb(3, xs);
+}
+
+.logoImage {
+  object-fit: contain;
+  width: 100px !important;
+  max-height: 100px !important;
+}
+
+.loginIcon {
+  width: 120px;
+  height: 120px;
+  text-align: center;
+  fill-rule: evenodd;
+  fill: theme.$call-primary !important;
+
+  @include display.media-breakpoint-down(sm) {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+.mainText {
+  font-size: theme.$font-size-normal;
+  font-weight: theme.$font-weight-normal;
+  color: theme.$text-primary;
+  text-align: center;
+  @include spacing.mx(2, xs);
+  @include spacing.mx(4, sm);
+
+  @include display.media-breakpoint-down(sm) {
+    font-size: theme.$font-size-small;
+  }
+}
+
+.title {
+  font-weight: theme.$font-weight-bold;
+  @include spacing.mb(2, xs);
+}
+
+.loginButton {
+  @include spacing.my(3, xs);
+}
+
+.cgu {
+  color: theme.$text-secondary;
+  font-size: theme.$font-size-small;
+  font-weight: theme.$font-weight-normal;
+  width: 100%;
+  text-align: center;
+  @include spacing.mx(5, sm);
+  @include spacing.mx(3, xs);
+  @include spacing.my(2, xs);
+}
+
+.signupButton {
+  color: theme.$text-primary !important;
+  text-decoration: underline;
+  cursor: pointer;
+  @include spacing.ml(2, xs);
+}
+
+.cguButton {
+  text-align: center;
+  background: none;
+  font-size: theme.$font-size-extra-small;
+  color: theme.$text-secondary;
+  border: none;
+  font-weight: theme.$font-weight-normal;
+  @include spacing.mb(2, xs);
+  @include spacing.mt(2, xs);
+  @include spacing.p(0, xs);
+}
+
+.switchBox {
+  @include spacing.py(3, xs);
+}
+
+.error {
+  color: theme.$cancel-primary;
+  @include spacing.pb(2, xs);
+}
+
+.termsTarget {
+  color: theme.$call-primary !important;
+}

package/src/components/auth/sso_form/SSOForm.stories.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { MemoryRouter } from "react-router-dom";
+import { IntlProvider } from 'react-intl';
+import { SSOForm } from './SSOForm';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { faker } from '@faker-js/faker';
+
+const meta = {
+    title: 'Auth/Sso Form',
+    component: SSOForm,
+    args: {
+        authType: 'oauth2_server',
+        clientId: 'client-id',
+        scope: 'email',
+        oAuthRedirectUri: 'https://redirect-uri.com',
+        loginUrl: 'https://example.com/login',
+        signupUrl: 'https://example.com/signup',
+        redirectParameter: 'customRedirect',
+        trackingParameters: { test: 'OK' },
+        termsUrl: 'https://example.com/terms',
+        showEmailConsent: false,
+        showTerms: false,
+        hideActions: false,
+        hideBelowButton: false,
+        subtitle: null,
+        logoUrl: null,
+        providerName: null,
+        error: false
+    },
+    argTypes: {
+        authType: { control: 'text' },
+        clientId: { control: 'text' },
+        scope: { control: 'text' },
+        oAuthRedirectUri: { control: 'text' },
+        loginUrl: { control: 'text' },
+        signupUrl: { control: 'text' },
+        redirectParameter: { control: 'text' },
+        trackingParameters: { control: 'object' },
+        termsUrl: { control: 'text' },
+        showEmailConsent: { control: 'boolean' },
+        showTerms: { control: 'boolean' },
+        hideActions: { control: 'boolean' },
+        hideBelowButton: { control: 'boolean' },
+        subtitle: { control: 'text' },
+        logoUrl: { control: 'text' },
+        providerName: { control: 'text' },
+        error: { control: 'boolean' }
+    },
+    render: (args) => (
+        <MemoryRouter>
+            <IconProvider library={regularIcons}>
+                <IntlProvider locale="en">
+                    <SSOForm {...args} />
+                </IntlProvider>
+            </IconProvider>
+        </MemoryRouter>
+    )
+};
+
+export default meta;
+
+const renderStory = (overrides = {}) => meta.render({ ...meta.args, ...overrides });
+
+export const DefaultSSOForm = (props) => renderStory(props);
+
+
+export const SSOFormWithRedirect = (props) => renderStory({
+    authType: 'other',
+    redirectParameter: 'logora_redirect',
+    trackingParameters: {},
+    ...props
+});
+
+export const SSOFormWithLogoUrl = (props) => renderStory({
+    showEmailConsent: true,
+    logoUrl: faker.image.url(),
+    providerName: 'FSociety Inc.',
+    error: true,
+    ...props
+});
+
+export const SSOFormWithEmailConsent = (props) => renderStory({
+    showEmailConsent: true,
+    providerName: 'FSociety Inc.',
+    ...props
+});
+
+export const SSOFormWithTerms = (props) => renderStory({
+    showEmailConsent: true,
+    showTerms: true,
+    providerName: 'FSociety Inc.',
+    ...props
+});
+
+export const SSOFormWithError = (props) => renderStory({
+    showEmailConsent: true,
+    providerName: 'FSociety Inc.',
+    error: true,
+    ...props
+});
+
+export const SSOFormWithoutActions = (props) => renderStory({
+    subtitle: 'My awesome subtitle to give more info',
+    showEmailConsent: true,
+    providerName: 'FSociety Inc.',
+    hideActions: true,
+    ...props
+});
+
+export const SSOFormHideBelowButton = (props) => renderStory({
+    subtitle: 'My awesome subtitle to give more info',
+    showEmailConsent: true,
+    providerName: 'FSociety Inc.',
+    hideBelowButton: true,
+    ...props
+});