@logora/debate 0.1.0

package/src/components/auth/auth_modal/AuthModal.stories.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { MemoryRouter } from "react-router-dom";
+import { IntlProvider } from 'react-intl';
+import { dataProvider, DataProviderContext } from '@logora/debate/data/data_provider';
+import { ModalProvider } from '@logora/debate/dialog/modal';
+import { ConfigProvider } from '@logora/debate/data/config_provider';
+import { AuthProvider } from '@logora/debate/auth/use_auth';
+import { AuthModal } from './AuthModal';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+const httpClient = {
+    get: () => null,
+    post: () => null,
+    patch: () => null
+};
+
+const config = {
+    shortname: "myapp",
+    auth: {
+        type: "social"
+    }
+};
+
+export default {
+    title: 'Auth/Auth Modal',
+    component: AuthModal,
+    args: {
+        authType: 'social',
+        hideBelowButton: false,
+        onHideModal: null
+    },
+    argTypes: {
+        authType: {
+            control: 'select',
+            options: ['social', 'sso']
+        },
+        hideBelowButton: {
+            control: 'boolean'
+        },
+        onHideModal: {
+            control: false
+        }
+    },
+    render: ({ authType, hideBelowButton, ...args }) => {
+        const data = dataProvider(httpClient, 'https://mock.example.api');
+        const currentConfig = {
+            ...config,
+            auth: {
+                type: authType,
+                hideBelowButton
+            }
+        };
+
+        return (
+            <div style={{ width: '400px', height: '300px' }}>
+                <MemoryRouter>
+                    <ConfigProvider config={currentConfig}>
+                        <IconProvider library={regularIcons}>
+                            <IntlProvider locale="en">
+                                <DataProviderContext.Provider value={{ dataProvider: data }}>
+                                    <AuthProvider>
+                                        <ModalProvider>
+                                            <AuthModal {...args} />
+                                        </ModalProvider>
+                                    </AuthProvider>
+                                </DataProviderContext.Provider>
+                            </IntlProvider>
+                        </IconProvider>
+                    </ConfigProvider>
+                </MemoryRouter>
+            </div>
+        );
+    }
+};
+
+export const DefaultAuthModal = {};
+
+export const AuthModalSSO = {
+    args: {
+        authType: 'sso'
+    }
+};
+
+export const AuthModalSSOHideBelowButton = {
+    args: {
+        authType: 'sso',
+        hideBelowButton: true
+    }
+};

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

@@ -0,0 +1 @@
+export { AuthModal as default } from './AuthModal';

package/src/components/auth/facebook_login_button/FacebookIcon.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const FacebookIcon = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="88.428 12.828 107.543 207.085" {...props}>
+        <path d="M158.232 219.912v-94.461h31.707l4.747-36.813h-36.454V65.134c0-10.658 2.96-17.922 18.245-17.922l19.494-.009V14.278c-3.373-.447-14.944-1.449-28.406-1.449-28.106 0-47.348 17.155-47.348 48.661v27.149H88.428v36.813h31.788v94.461l38.016-.001z" fill="#3c5a9a"/>
+    </svg>
+)

package/src/components/auth/facebook_login_button/FacebookLoginButton.docs.mdx

@@ -0,0 +1,34 @@
+---
+description: A button to login to Facebook with the OAuth2 protocol.
+labels: ['auth', 'oauth2', 'facebook']
+---
+
+import { FacebookLoginButton } from './FacebookLoginButton';
+import { MemoryRouter } from "react-router-dom";
+
+A button component to login to Facebook with OAuth2.
+
+When clicking on the button, a popup will appear that will ask the user to login to Facebook. User will be
+redirected to _redirectUri_ afterwards if login is successful, with authorization code.
+
+Two scopes are requested :
+- email
+- public_profile
+
+### Component usage
+
+```js
+import { FacebookLoginButton } from '@logora/debate.auth.facebook_login_button';
+```
+
+```js
+    <MemoryRouter>
+        <FacebookLoginButton 
+            text={"Sign in with Facebook"}
+            facebookClientId={"facebook-client-id"}
+            redirectUri={"https://auth.redirect/}
+            onCode={(code) => console.log(code)}
+            onClose={closeCallbackFunction}
+        />
+    </MemoryRouter>
+```

package/src/components/auth/facebook_login_button/FacebookLoginButton.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { OAuth2Button } from '@logora/debate/auth/oauth2_button';
+import { FacebookIcon } from "./FacebookIcon";
+import styles from './FacebookLoginButton.module.scss';
+
+export const FacebookLoginButton = ({ text, facebookClientId, redirectUri, onCode, onClose}) => {
+  return (
+    <OAuth2Button 
+      authDialogUrl={"https://www.facebook.com/v9.0/dialog/oauth"}
+      clientId={facebookClientId}
+      scope={"email,public_profile"}
+      onCode={onCode}
+      onClose={onClose}
+      provider={"facebook"}
+      redirectUri={redirectUri}
+    >
+      <div className={styles.facebookButton}>
+        <FacebookIcon height={35} width={35} className={styles.icon} />&nbsp;
+        <span>
+          { text }
+        </span>
+      </div>
+    </OAuth2Button>
+  );
+}

package/src/components/auth/facebook_login_button/FacebookLoginButton.module.scss

@@ -0,0 +1,32 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.facebookButton {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  align-self: center;
+  width: 300px !important;
+  height: 50px !important;
+  margin-bottom: 15px;
+  border: theme.$box-border;
+  border-radius: theme.$box-border-radius;
+  cursor: pointer;
+  @include spacing.p(3, xs);
+  &:hover{
+    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.05);
+  }
+  span {
+    @include spacing.pl(2, xs);
+  }
+}
+
+.icon {
+  fill: #4267B2 !important;
+  fill-rule: evenodd;
+  height: 25px;
+  width: 35px;
+  border-right: 1px solid theme.$background-color-secondary;
+  @include spacing.pr(2, xs);
+}

package/src/components/auth/facebook_login_button/FacebookLoginButton.stories.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { MemoryRouter } from "react-router-dom";
+import { FacebookLoginButton } from './FacebookLoginButton';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+export default {
+    title: 'Auth/Facebook Login Button',
+    component: FacebookLoginButton,
+    args: {
+        text: 'Sign in with Facebook',
+        facebookClientId: 'client-id',
+        redirectUri: 'https://auth.redirect/uri'
+    },
+    argTypes: {
+        text: {
+            control: 'text'
+        },
+        facebookClientId: {
+            control: 'text'
+        },
+        redirectUri: {
+            control: 'text'
+        }
+    },
+    render: (args) => (
+        <MemoryRouter>
+            <IconProvider library={regularIcons}>
+                <FacebookLoginButton {...args} />
+            </IconProvider>
+        </MemoryRouter>
+    )
+};
+
+export const DefaultFacebookLoginButton = {};

package/src/components/auth/facebook_login_button/FacebookLoginButton.test.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FacebookLoginButton } from './FacebookLoginButton';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+Object.defineProperty(window, 'location', {
+	value: {
+	  origin: 'http://example.fr',
+	  href: 'http://example.fr/path-name',
+	}
+});
+
+const spyWindowOpen = vi.spyOn(window, 'open');
+spyWindowOpen.mockImplementation(vi.fn());
+
+describe('FacebookLoginButton', () => {
+	it('should render button with the correct text', () => {
+		const facebookLoginButton = render(
+			<MemoryRouter>
+				<IconProvider library={regularIcons}>
+					<FacebookLoginButton 
+						text={"Sign in with Facebook"}
+						facebookClientId={"client-id"}
+						redirectUri={"https://auth.redirect/uri"}
+					/>
+				</IconProvider>
+			</MemoryRouter>
+		);
+		const renderedButton = facebookLoginButton.getByText(/Sign in with Facebook/i);
+		expect(renderedButton).toBeTruthy();
+	});
+
+	it('should open popup with correct link on click', async () => {
+		spyWindowOpen.mockClear();
+
+		const authDialogUrl = "https://www.facebook.com/v9.0/dialog/oauth";
+		const clientId = "facebook-client-id";
+		const scope = "email,public_profile";
+		const redirectUri = "https://auth.redirect/uri";
+
+		const facebookLoginButton = render(
+			<MemoryRouter initialEntries={["/path-name"]}>
+				<IconProvider library={regularIcons}>
+					<FacebookLoginButton 
+						text={"Sign in with Facebook"}
+						facebookClientId={clientId}
+						redirectUri={redirectUri}
+					/>
+				</IconProvider>
+			</MemoryRouter>
+		);
+		const renderedButton = screen.getByText(/Sign in with Facebook/i);
+		expect(renderedButton).toBeTruthy();
+
+		let expectedUrl = new URL(authDialogUrl);
+		expectedUrl.searchParams.append("client_id", clientId);
+		expectedUrl.searchParams.append("redirect_uri", redirectUri);
+		expectedUrl.searchParams.append("scope", scope);
+		expectedUrl.searchParams.append("state", window.btoa(window.location.href));
+
+		await userEvent.click(renderedButton);
+		expect(spyWindowOpen).toHaveBeenCalledTimes(1);
+		expect(spyWindowOpen).toHaveBeenLastCalledWith(expectedUrl.href, "", "width=500,height=500,left=262,top=107.2");
+	});
+});

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

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

package/src/components/auth/google_login_button/GoogleIcon.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const GoogleIcon = (props) => (
+    <svg viewBox="0 0 256 262" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" {...props}>
+        <path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/>
+        <path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/>
+        <path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/>
+        <path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/>
+    </svg>
+)

package/src/components/auth/google_login_button/GoogleLoginButton.docs.mdx

@@ -0,0 +1,43 @@
+---
+description: A button to login to Google with the OAuth2 protocol.
+labels: ['auth', 'oauth2', 'google']
+---
+
+import { GoogleLoginButton } from './GoogleLoginButton';
+import { MemoryRouter } from "react-router-dom";
+
+A button component to login to Google with OAuth2.
+
+When clicking on the button, a popup will appear that will ask the user to login to Google. User will be
+redirected to _redirectUri_ afterwards if login is successful, with authorization code.
+
+Two scopes are requested :
+- https://www.googleapis.com/auth/userinfo.email 
+- https://www.googleapis.com/auth/userinfo.profile
+
+### Component usage
+
+```js
+import { GoogleLoginButton } from '@logora/debate.auth.google_login_button';
+```
+
+```js
+    <MemoryRouter>
+        <GoogleLoginButton 
+            text={"Sign in with Google"}
+            googleClientId={"google-client-id"}
+            redirectUri={"https://auth.redirect/}
+            onCode={(code) => console.log(code)}
+            onClose={closeCallbackFunction}
+        />
+    </MemoryRouter>
+```
+
+### Properties
+| **Name**      | **Type** | **Required** | **Default** | **Description** |
+| ----------- | ----------- | :-----------: | ----------- | ----------- |
+| <font color='#4646c6'>text</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*button text*</font> |
+| <font color='#4646c6'>googleClientId</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*google oauth2 client ID*</font> |
+| <font color='#4646c6'>redirectUri</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*oauth2 redirect URI*</font> |
+| <font color='#4646c6'>onCode</font> | <font color="#397300">function</font> | &check; | - | <font color="grey">*callback triggered if auth is successful. onCode takes one argument, which is the oauth2 authorization code*</font> |
+| <font color='#4646c6'>onClose</font> | <font color="#397300">function</font> | &cross; | - | <font color="grey">*callback triggered if popup is closed by user*</font> |

package/src/components/auth/google_login_button/GoogleLoginButton.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { OAuth2Button } from '@logora/debate/auth/oauth2_button';
+import { GoogleIcon } from "./GoogleIcon";
+import styles from './GoogleLoginButton.module.scss';
+
+export const GoogleLoginButton = ({ text, googleClientId, redirectUri, onCode, onClose, className }) => {
+    return (
+        <OAuth2Button 
+            authDialogUrl={"https://accounts.google.com/o/oauth2/v2/auth"}
+            clientId={googleClientId}
+            responseType={"code"}
+            scope={"https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"}
+            onCode={onCode}
+            onClose={onClose}
+            provider={"google"}
+            redirectUri={redirectUri}
+            className={className}
+        >
+            <div className={styles.container}>
+                <GoogleIcon height={35} width={35} className={styles.icon} />&nbsp;
+                <span>
+                    { text }
+                </span>
+            </div>
+        </OAuth2Button>
+    )
+}

package/src/components/auth/google_login_button/GoogleLoginButton.module.scss

@@ -0,0 +1,28 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.container {
+	display: flex !important;
+	flex-direction: row !important;
+	justify-content: flex-start !important;
+	align-items: center !important;
+	align-self: center;
+	margin-bottom: 15px;
+	border: theme.$box-border;
+	border-radius: theme.$box-border-radius;
+	width: 300px;
+	height: 50px;
+	padding: 1em;
+	cursor: pointer;
+	&:hover {
+		box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.05);
+	}
+}
+
+.icon {
+	height: 35px;
+	width: 35px;
+	border-right: 1px solid theme.$background-color-secondary;
+	@include spacing.mr(2, xs);
+	@include spacing.pr(3, xs);
+}

package/src/components/auth/google_login_button/GoogleLoginButton.stories.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { MemoryRouter } from "react-router-dom";
+import { GoogleLoginButton } from './GoogleLoginButton';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+export default {
+    title: 'Auth/Google Login Button',
+    component: GoogleLoginButton,
+    args: {
+        text: 'Sign in with Google',
+        googleClientId: 'client-id',
+        redirectUri: 'https://auth.redirect/uri'
+    },
+    argTypes: {
+        text: {
+            control: 'text'
+        },
+        googleClientId: {
+            control: 'text'
+        },
+        redirectUri: {
+            control: 'text'
+        }
+    },
+    render: (args) => (
+        <MemoryRouter>
+            <IconProvider library={regularIcons}>
+                <GoogleLoginButton {...args} />
+            </IconProvider>
+        </MemoryRouter>
+    )
+};
+
+export const DefaultGoogleLoginButton = {};

package/src/components/auth/google_login_button/GoogleLoginButton.test.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { GoogleLoginButton } from './GoogleLoginButton';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+Object.defineProperty(window, 'location', {
+	value: {
+	  origin: 'http://example.fr',
+	  href: 'http://example.fr/path-name',
+	}
+});
+
+const spyWindowOpen = vi.spyOn(window, 'open');
+spyWindowOpen.mockImplementation(vi.fn());
+
+describe('GoogleLoginButton', () => {
+	it('should render button with the correct text', () => {
+		const googleLoginButton = render(
+			<MemoryRouter>
+				<IconProvider library={regularIcons}>
+					<GoogleLoginButton 
+						text={"Sign in with Google"}
+						googleClientId={"client-id"}
+						redirectUri={"https://auth.redirect/uri"}
+					/>
+				</IconProvider>
+			</MemoryRouter>
+		);
+		const renderedButton = googleLoginButton.getByText(/Sign in with Google/i);
+		expect(renderedButton).toBeTruthy();
+	});
+
+	it('should open popup with correct link on click', async () => {
+		spyWindowOpen.mockClear();
+
+		const authDialogUrl = "https://accounts.google.com/o/oauth2/v2/auth";
+		const clientId = "google-client-id";
+		const scope = "https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile";
+		const redirectUri = "https://auth.redirect/uri";
+
+		const googleLoginButton = render(
+			<MemoryRouter initialEntries={["/path-name"]}>
+				<IconProvider library={regularIcons}>
+					<GoogleLoginButton 
+						text={"Sign in with Google"}
+						googleClientId={clientId}
+						redirectUri={redirectUri}
+					/>
+				</IconProvider>
+			</MemoryRouter>
+		);
+		const renderedButton = screen.getByText(/Sign in with Google/i);
+		expect(renderedButton).toBeTruthy();
+
+		let expectedUrl = new URL(authDialogUrl);
+		expectedUrl.searchParams.append("client_id", clientId);
+		expectedUrl.searchParams.append("redirect_uri", redirectUri);
+		expectedUrl.searchParams.append("scope", scope);
+		expectedUrl.searchParams.append("response_type", "code");
+		expectedUrl.searchParams.append("state", window.btoa(window.location.href));
+
+		await userEvent.click(renderedButton);
+		expect(spyWindowOpen).toHaveBeenCalledTimes(1);
+		expect(spyWindowOpen).toHaveBeenLastCalledWith(expectedUrl.href, "", "width=500,height=500,left=262,top=107.2");
+	});
+});

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

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

package/src/components/auth/login_form/LoginForm.docs.mdx

@@ -0,0 +1,24 @@
+---
+description: A simple login form.
+labels: ['auth', 'login', 'form', 'login-form']
+---
+
+A login form with email and password inputs.
+
+### Component usage
+
+```js
+import { LoginForm } from '@logora/debate.auth.login_form';
+```
+
+```js
+    <MemoryRouter>
+        <IntlProvider locale="en">
+            <LoginForm 
+                onSubmit={(email, password) => console.log(email) }
+                error={false}
+                forgotPasswordUrl={"http://example.com/forgot_password"}
+            />
+        </IntlProvider>
+    </MemoryRouter>
+```

package/src/components/auth/login_form/LoginForm.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import { useIntl } from "react-intl";
+import { useLocation } from 'react-router';
+import { Button } from '@logora/debate/action/button';
+import { TextInput } from '@logora/debate/input/text_input';
+import styles from "./LoginForm.module.scss";
+import cx from "classnames";
+
+export const LoginForm = ({ onSubmit, forgotPasswordUrl, error = false }) => {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const intl = useIntl();
+	const location = useLocation();
+
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		if(onSubmit) {
+			onSubmit(email, password);
+		}
+	};
+
+	const getUrlWithRedirect = () => {
+		const baseUrl = new URL(forgotPasswordUrl);
+		baseUrl.searchParams.append("redirect_url", encodeURIComponent(window?.location.origin + location.pathname + location.hash + location.search));
+		return baseUrl.href;
+	};
+
+	return (
+		<form onSubmit={handleSubmit} className={styles.loginForm}>
+			<div className={styles.formGroup}>
+				<TextInput
+					type={"email"}
+					name={"email"}
+					required
+					placeholder={intl.formatMessage({ id: "auth_login_form_email_placeholder", defaultMessage: "Email" })}
+					onChange={(e) => setEmail(e.target.value)}
+					error={error}
+					data-testid={"email-input"}
+				/>
+			</div>
+			<div className={styles.formGroup}>
+				<TextInput
+					type={"password"}
+					name={"password"}
+					required
+					placeholder={intl.formatMessage({ id: "auth_login_form_password_placeholder", defaultMessage: "Password" })}
+					onChange={(e) => setPassword(e.target.value)}
+					error={error}
+					message={error && intl.formatMessage({ id: "auth_login_form_error", defaultMessage: "An error occurred while signing in, please try again" })}
+					data-testid={"password-input"}
+				/>
+			</div>
+			{ forgotPasswordUrl &&
+				<a href={getUrlWithRedirect()} target='_blank' role="link" className={styles.forgotPassword}>
+					{ intl.formatMessage({ id: "auth_login_form_forgot_password", defaultMessage: "Forgot password ?" }) }
+				</a>
+			}
+			<div className={cx(styles.formSubmitGroup)}>
+				<Button className={styles.formSubmitButton} type='submit' role="button" handleClick={() => null}>
+					{ intl.formatMessage({ id: "auth_login_form_sign_in", defaultMessage: "Sign in" }) }
+				</Button>
+			</div>
+		</form>
+	);
+}

package/src/components/auth/login_form/LoginForm.module.scss

@@ -0,0 +1,36 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.loginForm {
+	@include spacing.my(3, xs);
+	@include spacing.my(4, sm);
+}
+
+.formGroup {
+	@include spacing.my(3, xs);
+}
+
+.formSubmitGroup {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	@include spacing.my(4, xs);
+}
+
+.formSubmitButton {
+	border: theme.$box-border;
+	box-shadow: theme.$box-shadow;
+	border-radius: theme.$box-border-radius;
+	background-color: theme.$call-primary !important;
+	height: calc(2.25em + 2px);
+}
+
+.forgotPassword {
+	color: theme.$call-primary !important;
+	cursor: pointer;
+	width: 100%;
+	display: block;
+	text-align: right;
+	font-size: theme.$font-size-small;
+	@include spacing.mt(2, xs);
+}