@logora/debate 0.1.0

package/src/components/auth/signup_form/SignupForm.test.jsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SignupForm } from './SignupForm';
+
+describe('SignupForm', () => {
+    it('should render form with correct inputs', () => {
+        render(
+            <IntlProvider locale="en">
+                <SignupForm 
+                    onSubmit={(first_name, last_name, email, password, password_confirmation, accepts_provider_email) => false }
+                    providerName={"my company"}
+                    error={false}
+                />
+            </IntlProvider>
+        );
+
+        expect(screen.getAllByRole("button")).toHaveLength(1);
+
+        const firstNameInput = screen.getByTestId("first-name-input");
+        expect(firstNameInput.tagName).toBe("INPUT");
+        expect(firstNameInput.name).toBe("first_name");
+        expect(firstNameInput.required).toBeTruthy();
+
+        const lastNameInput = screen.getByTestId("last-name-input");
+        expect(lastNameInput.tagName).toBe("INPUT");
+        expect(lastNameInput.name).toBe("last_name");
+        expect(lastNameInput.required).toBeFalsy();
+        
+        const emailInput = screen.getByTestId("email-input");
+        expect(emailInput.tagName).toBe("INPUT");
+        expect(emailInput.name).toBe("email");
+        expect(emailInput.required).toBeTruthy();
+
+        const passwordInput = screen.getByTestId("password-input");
+        expect(passwordInput.tagName).toBe("INPUT");
+        expect(passwordInput.name).toBe("password");
+        expect(passwordInput.required).toBeTruthy();
+
+        const confirmPasswordInput = screen.getByTestId("password-confirmation-input");
+        expect(confirmPasswordInput.tagName).toBe("INPUT");
+        expect(confirmPasswordInput.name).toBe("password_confirmation");
+        expect(confirmPasswordInput.required).toBeTruthy();
+
+        const acceptsEmailInput = screen.getByTestId("accepts-email-input");
+        expect(screen.getByText("I agree to receive emails from the editor")).toBeTruthy();
+    });
+
+    it('should render form with error', () => {
+        render(
+            <IntlProvider locale="en">
+                <SignupForm 
+                    onSubmit={(first_name, last_name, email, password, password_confirmation, accepts_provider_email) => false }
+                    providerName={"my company"}
+                    error={true}
+                />
+            </IntlProvider>
+        );
+        expect(screen.getAllByRole("button")).toHaveLength(1);
+
+        expect(screen.getByText("An error occurred while signing up. Please check your input and try again.")).toBeTruthy();
+    });
+
+    it('should trigger callback when submitting function', 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();
+
+        render(
+            <IntlProvider locale="en">
+                <SignupForm 
+                    onSubmit={onSubmitCallback}
+                    providerName={"my company"}
+                    error={false}
+                />
+            </IntlProvider>
+        );
+
+        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);
+        expect(onSubmitCallback).toHaveBeenCalledWith(firstName, lastName, email, password, passwordConfirmation, acceptsEmail);
+    });
+
+    it('should render password error', async () => {
+        const email = "test@test.com";
+        const firstName = "My first name";
+        const lastName = "My last name";
+        const password = "my-password";
+        const passwordConfirmation = "my-password-but-not-the-same";
+        const onSubmitCallback = vi.fn();
+
+        render(
+            <IntlProvider locale="en">
+                <SignupForm 
+                    onSubmit={onSubmitCallback}
+                    providerName={"my company"}
+                    error={false}
+                />
+            </IntlProvider>
+        );
+
+        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(screen.getAllByText("Password and confirmation are not matching.")).toBeTruthy();
+    });
+});

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

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

package/src/components/auth/social_auth_form/SocialAuthForm.docs.mdx

@@ -0,0 +1,33 @@
+---
+description: A form to login or signup by Facebook, Google or email.
+labels: ['auth', 'form', 'login', 'social', 'oauth2']
+---
+
+Component to login or signup by Facebook, Google or email. Provides a consent checkbox and forgot password link.
+
+A callback function _onSubmit_ is available to retrieve the form submit data.
+
+### Component usage
+
+```js
+import { SocialAuthForm } from '@logora/debate.auth.social_auth_form';
+```
+
+```js
+    <MemoryRouter>
+        <IntlProvider locale="en">
+            <SocialAuthForm 
+                onSubmit={(data, authType, lastStep, consent) => console.log(data) }
+                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"} 
+                error={false}
+            />
+        </IntlProvider>
+    </MemoryRouter>
+```

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

@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
+import useSessionStorageState from '@rooks/use-sessionstorage-state';
+import { EMAIL_CONSENT_STORAGE_KEY } from '@logora/debate/auth/use_auth';
+import { FacebookLoginButton } from '@logora/debate/auth/facebook_login_button';
+import { GoogleLoginButton } from '@logora/debate/auth/google_login_button';
+import { LoginForm } from "@logora/debate/auth/login_form";
+import { SignupForm } from "@logora/debate/auth/signup_form";
+import { Toggle } from "@logora/debate/input/toggle";
+import { Icon } from '@logora/debate/icons/icon';
+import styles from "./SocialAuthForm.module.scss";
+
+export const SocialAuthForm = ({ lastStep, providerName, logoUrl, termsUrl, privacyUrl, forgotPasswordUrl, oAuthRedirectUri, facebookClientId, googleClientId, error = false, onSubmit }) => {
+	const [mainMenu, setMainMenu] = useState(!(lastStep === "LOGIN" || lastStep === "SIGNUP"));
+	const [loginStep, setLoginStep] = useState(lastStep !== "SIGNUP");
+	const [emailConsent, setEmailConsent] =  useSessionStorageState(EMAIL_CONSENT_STORAGE_KEY, false);
+	const intl = useIntl();
+
+	const handleSignUp = (first_name, last_name, email, password, password_confirmation, accepts_provider_email) => {
+		const data = {
+			uid: (typeof crypto !== "undefined" && crypto.randomUUID) ? crypto.randomUUID() : "0000-0000-0000-0000",
+			first_name: first_name,
+			last_name: last_name,
+			email: email,
+			password: password,
+			accepts_provider_email: accepts_provider_email,
+			receives_newsletter_email: accepts_provider_email,
+		};
+		onSubmit(data, "form", "SIGNUP");
+	};
+
+	const handleLogin = (email, password) => {
+		const data = {
+			email: email,
+			password: password,
+		};
+		onSubmit(data, "password", "LOGIN");
+	};
+
+	const handleAuthorizationCode = (code, provider) => {
+		onSubmit(code, provider, "SOCIAL");
+	};
+
+	const displayTerms = () => {
+		return (
+			<div className={styles.formFooterTerms}>
+				<FormattedMessage
+					id='auth.social_auth_form.terms_text'
+					values={{
+						var1: (chunks) => (
+							<a className={styles.termsLink} target='_blank' href={termsUrl} rel="noreferrer">
+								{chunks}
+							</a>
+						),
+						var2: (chunks) => (
+							<a className={styles.termsLink} target='_blank' href={privacyUrl} rel="noreferrer">
+								{chunks}
+							</a>
+						),
+					}}
+					defaultMessage={"By clicking on \"Subscribe\", you confirm that you accept the <var1>General Conditions of Use</var1> and our <var2>Privacy Policy</var2> which informs you of the methods of processing your personal data as well as your rights over this data."}
+				/>
+			</div>
+		)
+	}
+
+	const displayFooter = () => {
+		return (
+			<>
+				<div className={styles.formFooter}>
+					<div className={styles.formFooterRow}>
+						<div>{ intl.formatMessage({ id: loginStep ? "auth.social_auth_form.no_account" : "auth.social_auth_form.already_account", defaultMessage: loginStep ? "No account yet ?" : "Already have an account ?"})}</div>&nbsp;
+						<div className={styles.formNavigation} onClick={() => setLoginStep(!loginStep)}>
+							{ intl.formatMessage({ id: loginStep ? "auth.social_auth_form.signup" : "auth.social_auth_form.login", defaultMessage: loginStep ? "Sign up" : "Sign in" })}
+						</div>
+					</div>
+				</div>
+				{ !loginStep && displayTerms() }
+			</>
+		)
+	}
+
+	return (
+		<div className={styles.authFormContent}>
+			{ mainMenu ?
+				<>
+					{ logoUrl &&
+						<img
+							className={styles.socialLoginLogo}
+							src={logoUrl}
+							width={200}
+							height={50}
+							role="img"
+							alt={`Logo ${providerName}`}
+						/>
+					}
+					<div className={styles.socialLoginText}>
+						{ intl.formatMessage({ id: "auth.social_auth_form.menu_title", defaultMessage: "Create your account in one click to vote and start debating !" }) }
+					</div>
+					<FacebookLoginButton 
+						text={intl.formatMessage({ id: "auth.social_auth_form.facebook_login", defaultMessage: "Sign in with Facebook" })}
+						facebookClientId={facebookClientId}
+						redirectUri={oAuthRedirectUri} 
+						onCode={handleAuthorizationCode}
+					/>
+					<GoogleLoginButton 
+						text={intl.formatMessage({ id: "auth.social_auth_form.google_login", defaultMessage: "Sign in with Google" })}
+						googleClientId={googleClientId}
+						redirectUri={oAuthRedirectUri} 
+						onCode={handleAuthorizationCode} 
+					/>
+					<div className={styles.mailLoginButton} onClick={() => setMainMenu(false)}>
+						<Icon name="mail" height={25} width={25} />
+						<div className={styles.textMailLoginButton}>
+							{ intl.formatMessage({ id: "auth.social_auth_form.mail_login", defaultMessage: "Sign in with email" }) }
+						</div>
+					</div>
+					{ !loginStep &&
+						<div className={styles.checkboxContainer}>
+							<Toggle 
+								type={"checkbox"} 
+								name={"accepts_emails"} 
+								style={{ fontSize: 18 }}
+								checked={emailConsent} 
+								label={intl.formatMessage({ id: "auth.social_auth_form.accepts_emails_label", defaultMessage: "I agree to receive emails from the editor" }, { variable: providerName } )}
+								onInputChanged={(_e) => setEmailConsent(!emailConsent)} 
+							/>
+						</div>
+					}
+					{ error && lastStep === "SOCIAL" ? (
+						<div className={styles.errorGroup}>{intl.formatMessage({ id: "auth.social_auth_form.error", defaultMessage: "An error occurred during sign in. Please try again in a few moments." })}</div>
+					) : null}
+					{ displayFooter() }
+				</>
+			:
+				<>
+					<div className={styles.formTitleContainer}>
+						<div className={styles.formBackArrow} onClick={() => setMainMenu(true)} data-testid={"back-button"}>
+							<Icon name="arrow" height={25} width={25} />&nbsp;{ intl.formatMessage({ id: "auth.social_auth_form.back_to_menu", defaultMessage: "Back to menu" }) }
+						</div>
+						<div className={styles.formTitle}>
+							{ intl.formatMessage({ id: loginStep ? "auth.social_auth_form.login_title" : "auth.social_auth_form.signup_title", defaultMessage: loginStep ? "Sign in to enter the debate space" : "Get your arguments ready" }) }
+						</div>
+					</div>
+					{ !loginStep ?
+						<>
+							<div className={styles.signUpSubtitle}>
+								{ intl.formatMessage({ id: "auth.social_auth_form.signup_subtitle", defaultMessage: "Sign up in a few clicks to start debating" }, { provider: providerName }) }
+							</div>
+							<SignupForm 
+								onSubmit={handleSignUp} 
+								providerName={providerName}
+								error={error && lastStep === "SIGNUP"}
+							/>
+						</>
+					:
+						<div className={styles.loginFormContainer}>
+							<LoginForm 
+								onSubmit={handleLogin} 
+								error={error && lastStep === "LOGIN"}
+								forgotPasswordUrl={forgotPasswordUrl}
+							/>
+						</div>
+					}
+					{ displayFooter() }
+				</>
+			}
+		</div>
+	);
+}

package/src/components/auth/social_auth_form/SocialAuthForm.module.scss

@@ -0,0 +1,141 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.socialLoginLogo {
+	width: 200px !important;
+	height: 50px !important;
+	object-fit: contain;
+	margin-bottom: 25px;
+	align-self: center;
+}
+
+.socialLoginText {
+	margin-bottom: 25px;
+	text-align: center;
+}
+
+.formTitleContainer {
+	display: flex;
+	flex-direction: column;
+	@include spacing.mb(2, xs);
+}
+
+.formTitle {
+	display: flex !important;
+	flex-direction: row !important;
+	justify-content: center !important;
+	align-items: center !important;
+	font-size: theme.$font-size-large;
+}
+
+.formBackArrow {
+	display: flex !important;
+	flex-direction: row !important;
+	justify-content: flex-start !important;
+	align-items: center !important;
+	font-size: theme.$font-size-normal;
+	color: theme.$text-secondary;
+	cursor: pointer;
+	svg {
+		fill: theme.$text-secondary;
+	}
+	&:hover {
+		opacity: 0.9;
+	}
+	@include spacing.mb(4, xs);
+}
+
+.signUpSubtitle {
+	font-size: theme.$font-size-small;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	@include spacing.mb(2, xs);
+}
+
+.authFormContent {
+	display: flex !important;
+	flex-direction: column !important;
+	justify-content: center !important;
+}
+
+.loginFormContainer {
+	@include spacing.mx(5, xs);
+}
+
+.formFooter {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: theme.$font-size-small;
+	.formFooterRow {
+		display: flex;
+		flex-direction: row;
+		margin-bottom: 5px;
+	}
+}
+
+.formFooterTerms {
+	@include spacing.mt(3, xs);
+	font-size: theme.$font-size-small;
+	text-align: center;
+}
+
+.termsLink {
+	color: theme.$call-primary !important;
+}
+
+.formNavigation {
+	color: theme.$text-primary !important;
+	cursor: pointer;
+}
+
+
+.mailLoginButton {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	align-self: center;
+	border: theme.$box-border;
+	border-radius: theme.$box-border-radius;
+	cursor: pointer;
+	width: 300px !important;
+	height: 50px !important;
+	margin-bottom: 15px;
+	@include spacing.p(3, xs);
+	&:hover {
+		box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.05);
+	}
+	svg {
+		height: 35px;
+		width: 35px;
+		border-right: 1px solid theme.$background-color-secondary;
+		@include spacing.pr(2, xs);
+	}
+}
+
+.textMailLoginButton {
+	width: 100%;
+	text-align: left;
+	@include spacing.pl(3, xs);
+}
+
+.checkboxContainer {
+	display: flex !important;
+	justify-content: center !important;
+	@include spacing.px(3, xs);
+	@include spacing.pt(2, xs);
+	@include spacing.pb(4, xs);
+}
+
+.errorGroup {
+	color: theme.$cancel-primary;
+	display: flex !important;
+	align-items: center !important;
+	text-align: center;
+	@include spacing.mb(2, xs);
+}

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { MemoryRouter } from "react-router-dom";
+import { IntlProvider } from 'react-intl';
+import { SocialAuthForm } from './SocialAuthForm';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const noop = () => false;
+
+const meta = {
+    title: 'Auth/Social Auth Form',
+    component: SocialAuthForm,
+    args: {
+        onSubmit: noop,
+        lastStep: null,
+        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'
+    },
+    argTypes: {
+        onSubmit: {
+            control: false
+        },
+        lastStep: {
+            control: 'select',
+            options: [null, 'LOGIN', 'SIGNUP']
+        },
+        facebookClientId: {
+            control: 'text'
+        },
+        googleClientId: {
+            control: 'text'
+        },
+        oAuthRedirectUri: {
+            control: 'text'
+        },
+        logoUrl: {
+            control: 'text'
+        },
+        providerName: {
+            control: 'text'
+        },
+        termsUrl: {
+            control: 'text'
+        },
+        privacyUrl: {
+            control: 'text'
+        },
+        forgotPasswordUrl: {
+            control: 'text'
+        }
+    },
+    render: (args) => (
+        <MemoryRouter>
+            <IconProvider library={regularIcons}>
+                <IntlProvider locale="en">
+                    <SocialAuthForm {...args} />
+                </IntlProvider>
+            </IconProvider>
+        </MemoryRouter>
+    )
+};
+
+export default meta;
+
+const renderStory = (overrides = {}) => meta.render({ ...meta.args, ...overrides });
+
+export const DefaultSocialAuthForm = (props) => renderStory(props);
+
+export const SocialAuthFormWithoutLogo = (props) => renderStory({
+    logoUrl: null,
+    ...props
+});
+
+export const SocialAuthFormLoginForm = (props) => renderStory({ lastStep: 'LOGIN', ...props });
+
+export const SocialAuthFormSignupForm = (props) => renderStory({ lastStep: 'SIGNUP', ...props });