@logora/debate 0.1.0

package/src/components/auth/providers/AuthProviderFactory.js

@@ -0,0 +1,20 @@
+import { FormAuth } from './FormAuth';
+import { PasswordAuth } from './PasswordAuth';
+import { JWTAuth } from './JWTAuth';
+import { OAuth2ServerAuth } from './OAuth2ServerAuth';
+
+export class AuthProviderFactory {
+    static create = (authType, provider, assertion, socialProvider) => {
+        if(authType === "oauth2_server") {
+            return new OAuth2ServerAuth(provider, assertion, "oauth2_server");
+        } else if(authType === "social" && socialProvider === "form") {
+            return new FormAuth(provider, assertion);
+        } else if(authType === "social" && socialProvider === "password") {
+            return new PasswordAuth(provider, assertion);
+        } else if(authType === "social") {
+            return new OAuth2ServerAuth(provider, assertion, socialProvider);
+        } else {
+            return new JWTAuth(provider, assertion);
+        }
+    }
+}

package/src/components/auth/providers/FormAuth.js

@@ -0,0 +1,36 @@
+import { AuthProvider } from './AuthProvider';
+
+export class FormAuth extends AuthProvider {
+  constructor(providerName, userData) {
+    super();
+    this.providerName = providerName;
+    this.userData = userData;
+  }
+
+  shouldInitAuth() {
+    return !!this.userData;
+  }
+
+  getSessionId = () => {
+    return null;
+  }
+
+  isSameUser(currentSessionId) {
+    return true;
+  }
+
+  getAssertion() {
+    let objJsonStr = JSON.stringify(this.userData);
+    return btoa(objJsonStr);
+  }
+
+  getAuthorizationParams() {
+    return { 
+      grant_type: 'assertion', 
+      assertion: this.getAssertion(), 
+      assertion_type: 'form', 
+      provider: this.providerName, 
+      session_id: this.getSessionId() 
+    };
+  }
+}

package/src/components/auth/providers/JWTAuth.js

@@ -0,0 +1,35 @@
+import { AuthProvider } from './AuthProvider';
+
+export class JWTAuth extends AuthProvider {
+    constructor(providerName, jwtToken) {
+        super();
+        this.providerName = providerName;
+        this.jwtToken = jwtToken;
+    }
+    
+    shouldInitAuth() {
+        return !!this.jwtToken;
+    }
+
+    isSameUser(currentSessionId) {
+        return currentSessionId === this.getSessionId();
+    }
+
+    getSessionId() {
+        if(!this.jwtToken) {
+            return null;
+        } else {
+            return this.jwtToken.split('.')[2];
+        }
+    }
+    
+    getAuthorizationParams() {
+        return { 
+            grant_type: 'assertion', 
+            assertion: this.jwtToken, 
+            assertion_type: 'jwt', 
+            provider: this.providerName, 
+            session_id: this.getSessionId() 
+        };
+    }
+}

package/src/components/auth/providers/OAuth2ServerAuth.js

@@ -0,0 +1,47 @@
+import { AuthProvider } from './AuthProvider';
+
+export class OAuth2ServerAuth extends AuthProvider {
+  constructor(providerName, assertion, socialProviderName) {
+    super();
+    this.providerName = providerName;
+    this.assertion = assertion || this.getAuthorizationCode();
+    this.socialProviderName = socialProviderName;
+  }
+
+  shouldInitAuth() {
+    return !!this.assertion;
+  }
+
+  getSocialProvider = () => {
+    return this.socialProviderName;
+  }
+
+  isSameUser(currentSessionId) {
+    return true;
+  }
+
+  getSessionId() {
+    return null;
+  }
+
+  getAuthorizationCode() {
+    if(typeof window !== 'undefined') {
+      const urlParams = new URLSearchParams(window.location.search);
+      const code = urlParams.get('code');
+      if(code) {
+        return code;
+      }
+    }
+    return false;
+  }
+
+  getAuthorizationParams() {
+    return { 
+      grant_type: 'assertion', 
+      assertion: this.assertion, 
+      assertion_type: this.getSocialProvider(), 
+      provider: this.providerName, 
+      session_id: this.getSessionId() 
+    };
+  }
+}

package/src/components/auth/providers/PasswordAuth.js

@@ -0,0 +1,31 @@
+import { AuthProvider } from './AuthProvider';
+
+export class PasswordAuth extends AuthProvider {
+  constructor(providerName, userData) {
+    super();
+    this.providerName = providerName;
+    this.userData = userData;
+  }
+
+  shouldInitAuth() {
+    return !!this.userData;
+  }
+
+  getSessionId = () => {
+    return null;
+  }
+
+  isSameUser(currentSessionId) {
+    return true;
+  }
+
+  getAuthorizationParams() {
+    return { 
+      grant_type: 'password', 
+      username: this.userData.email, 
+      password: this.userData.password, 
+      provider: this.providerName, 
+      session_id: this.getSessionId() 
+    };
+  }
+}

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

@@ -0,0 +1 @@
+export { AuthProviderFactory as default } from "./AuthProviderFactory";

package/src/components/auth/providers/tests/AuthProviderFactory.test.jsx

@@ -0,0 +1,53 @@
+import { AuthProviderFactory } from '../AuthProviderFactory';
+import { OAuth2ServerAuth } from '../OAuth2ServerAuth';
+import { FormAuth } from '../FormAuth';
+import { PasswordAuth } from '../PasswordAuth';
+import { JWTAuth } from '../JWTAuth';
+
+describe("AuthProviderFactory", () => {
+    describe("create", () => {
+        it('should return OAuth2ServerAuth with correct params', () => {
+            const oAuth2ServerAuth = AuthProviderFactory.create("oauth2_server", "provider", "assertion");
+
+            expect(oAuth2ServerAuth instanceof OAuth2ServerAuth).toBeTruthy();
+            const authParams = oAuth2ServerAuth.getAuthorizationParams();
+            expect(authParams.grant_type).toBe("assertion");
+            expect(authParams.assertion_type).toBe("oauth2_server");
+        });
+
+        it('should return PasswordAuth with correct params', () => {
+            const passwordAuth = AuthProviderFactory.create("social", "provider", "assertion", "password");
+
+            expect(passwordAuth instanceof PasswordAuth).toBeTruthy();
+            const authParams = passwordAuth.getAuthorizationParams();
+            expect(authParams.grant_type).toBe("password");
+        });
+
+        it('should return FormAuth with correct params', () => {
+            const formAuth = AuthProviderFactory.create("social", "provider", "assertion", "form");
+
+            expect(formAuth instanceof FormAuth).toBeTruthy();
+            const authParams = formAuth.getAuthorizationParams();
+            expect(authParams.grant_type).toBe("assertion");
+            expect(authParams.assertion_type).toBe("form");
+        });
+
+        it('should return OAuth2ServerAuth with correct params', () => {
+            const oAuth2ServerAuth = AuthProviderFactory.create("social", "provider", "assertion", "random-provider");
+
+            expect(oAuth2ServerAuth instanceof OAuth2ServerAuth).toBeTruthy();
+            const authParams = oAuth2ServerAuth.getAuthorizationParams();
+            expect(authParams.grant_type).toBe("assertion");
+            expect(authParams.assertion_type).toBe("random-provider");
+        });
+
+        it('should return JWTAuth by default with correct params', () => {
+            const jwtAuth = AuthProviderFactory.create("jwt", "provider", "assertion");
+
+            expect(jwtAuth instanceof JWTAuth).toBeTruthy();
+            const authParams = jwtAuth.getAuthorizationParams();
+            expect(authParams.grant_type).toBe("assertion");
+            expect(authParams.assertion_type).toBe("jwt");
+        });
+    });
+});

package/src/components/auth/providers/tests/FormAuth.test.jsx

@@ -0,0 +1,45 @@
+import { FormAuth } from '../FormAuth';
+
+describe("FormAuth", () => {
+	it('should return correct default values', () => {
+		const formAuth = new FormAuth("provider", "userData");
+		
+		expect(formAuth.getSessionId()).toBeNull();
+		expect(formAuth.isSameUser("random")).toBe(true);
+	});
+
+	describe("shouldInitAuth", () => {
+		it('should return true if userData present', () => {
+			const formAuth = new FormAuth("provider", "userData");
+			
+			expect(formAuth.shouldInitAuth()).toBe(true);
+		});
+
+		it('should return true if userData null', () => {
+			const formAuth = new FormAuth("provider", null);
+			
+			expect(formAuth.shouldInitAuth()).toBe(false);
+		});
+
+		it('should return true if userData empty', () => {
+			const formAuth = new FormAuth("provider", "");
+			
+			expect(formAuth.shouldInitAuth()).toBe(false);
+		});
+	});
+
+	describe("getAuthorizationParams", () => {
+		it('should return correct params', () => {
+			const userData = {"data": "mydata"};
+			const userDataStr = JSON.stringify(userData);
+			const formAuth = new FormAuth("provider", userData);
+			
+			const authorizationParams = formAuth.getAuthorizationParams();
+			
+			expect(authorizationParams.grant_type).toBe("assertion");
+			expect(authorizationParams.assertion).toBe(btoa(userDataStr));
+			expect(authorizationParams.assertion_type).toBe("form");
+			expect(authorizationParams.session_id).toBe(null);
+		});
+	});
+});

package/src/components/auth/providers/tests/JWTAuth.test.jsx

@@ -0,0 +1,57 @@
+import { JWTAuth } from '../JWTAuth';
+
+describe('JWTAuth', () => {
+	const jwtToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
+
+	describe("shouldInitAuth", () => {
+		it('should return true if token present', () => {
+			const jwtAuth = new JWTAuth("provider", "token");
+			
+			expect(jwtAuth.shouldInitAuth()).toBe(true);
+		});
+
+		it('should return true if token null', () => {
+			const jwtAuth = new JWTAuth("provider", null);
+			
+			expect(jwtAuth.shouldInitAuth()).toBe(false);
+		});
+
+		it('should return true if token empty', () => {
+			const jwtAuth = new JWTAuth("provider", "");
+			
+			expect(jwtAuth.shouldInitAuth()).toBe(false);
+		});
+	});
+	
+	describe("isSameUser", () => {
+		it('should return true if same session id', () => {
+			const jwtAuth = new JWTAuth("provider", jwtToken);
+			
+			expect(jwtAuth.isSameUser("SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c")).toBe(true);
+		});
+
+		it('should return false if empty token', () => {
+			const jwtAuth = new JWTAuth("provider", null);
+			
+			expect(jwtAuth.isSameUser("random")).toBe(false);
+		});
+
+		it('should return false if wrong signature', () => {
+			const jwtAuth = new JWTAuth("provider", jwtToken);
+			
+			expect(jwtAuth.isSameUser("random")).toBe(false);
+		});
+	});
+
+	describe("getAuthorizationParams", () => {
+		it('should return correct params', () => {
+			const jwtAuth = new JWTAuth("provider", jwtToken);
+			const authorizationParams = jwtAuth.getAuthorizationParams();
+			
+			expect(authorizationParams.grant_type).toBe("assertion");
+			expect(authorizationParams.assertion_type).toBe("jwt");
+			expect(authorizationParams.assertion).toBe(jwtToken);
+			expect(authorizationParams.session_id).toBe("SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c");
+		});
+	});
+});

package/src/components/auth/providers/tests/OAuth2ServerAuth.test.jsx

@@ -0,0 +1,78 @@
+import { OAuth2ServerAuth } from '../OAuth2ServerAuth';
+
+describe('OAuth2ServerAuth', () => {
+	describe("shouldInitAuth", () => {
+		it('should return true if code present in URL', () => {
+			const assertion = "random-assertion";
+
+			delete window.location;
+			window.location = { search: `?code=${assertion}` };
+
+			const oauth2ServerAuth = new OAuth2ServerAuth("provider", null);
+			
+			expect(oauth2ServerAuth.shouldInitAuth()).toBe(true);
+		});
+
+		it('should return true if assertion passed as argument', () => {
+			const oauth2ServerAuth = new OAuth2ServerAuth("provider", "assertion");
+			
+			expect(oauth2ServerAuth.shouldInitAuth()).toBe(true);
+		});
+
+		it('should return true if assertion null', () => {
+			window.location = {}
+			const oauth2ServerAuth = new OAuth2ServerAuth("provider", null);
+			
+			expect(oauth2ServerAuth.shouldInitAuth()).toBe(false);
+		});
+
+		it('should return true if assertion empty', () => {
+			window.location = {}
+			const oauth2ServerAuth = new OAuth2ServerAuth("provider", "");
+			
+			expect(oauth2ServerAuth.shouldInitAuth()).toBe(false);
+		});
+	});
+
+	describe("isSameUser", () => {
+		it('should return always return true', () => {
+			const oauth2ServerAuth = new OAuth2ServerAuth("provider", "random-id");
+			
+			expect(oauth2ServerAuth.isSameUser()).toBe(true);
+		});
+	});
+
+	describe("getAuthorizationParams", () => {
+		it('should return correct params', () => {
+			const assertion = "random-assertion";
+
+			delete window.location;
+			window.location = { search: `?code=${assertion}` };
+		 
+			const socialProvider = "my-social-network";
+			const oauth2ServerAuth = new OAuth2ServerAuth("provider", assertion, socialProvider);
+			const authorizationParams = oauth2ServerAuth.getAuthorizationParams();
+			
+			expect(authorizationParams.grant_type).toBe("assertion");
+			expect(authorizationParams.assertion_type).toBe(socialProvider);
+			expect(authorizationParams.assertion).toBe(assertion);
+			expect(authorizationParams.session_id).toBe(null);
+		});
+	});
+
+	describe("code parameter handling", () => {
+		it('should not duplicate code parameter', () => {
+			const assertion = "new-code";
+			const existingCode = "old-code";
+
+			delete window.location;
+			window.location = { search: `?code=${existingCode}` };
+
+			const oauth2ServerAuth = new OAuth2ServerAuth("provider", assertion);
+			const urlParams = new URLSearchParams(window.location.search);
+			
+			expect(urlParams.getAll('code').length).toBe(1);
+			expect(urlParams.get('code')).toBe(existingCode);
+		});
+	});
+});

package/src/components/auth/providers/tests/PasswordAuth.test.jsx

@@ -0,0 +1,43 @@
+import { PasswordAuth } from '../PasswordAuth';
+
+describe("PasswordAuth", () => {
+	it('should return correct default values', () => {
+		const passwordAuth = new PasswordAuth("provider", "userData");
+		
+		expect(passwordAuth.getSessionId()).toBeNull();
+		expect(passwordAuth.isSameUser("random")).toBe(true);
+	});
+
+	describe("shouldInitAuth", () => {
+		it('should return true if userData present', () => {
+			const passwordAuth = new PasswordAuth("provider", "userData");
+			
+			expect(passwordAuth.shouldInitAuth()).toBe(true);
+		});
+
+		it('should return true if userData null', () => {
+			const passwordAuth = new PasswordAuth("provider", null);
+			
+			expect(passwordAuth.shouldInitAuth()).toBe(false);
+		});
+
+		it('should return true if userData empty', () => {
+			const passwordAuth = new PasswordAuth("provider", "");
+			
+			expect(passwordAuth.shouldInitAuth()).toBe(false);
+		});
+	});
+
+	describe("getAuthorizationParams", () => {
+		it('should return correct params', () => {
+			const userData = {email: "myusername", password: "mypassword"};
+			const passwordAuth = new PasswordAuth("provider", userData);
+			const authorizationParams = passwordAuth.getAuthorizationParams();
+			
+			expect(authorizationParams.grant_type).toBe("password");
+			expect(authorizationParams.username).toBe(userData.email);
+			expect(authorizationParams.password).toBe(userData.password);
+			expect(authorizationParams.session_id).toBe(null);
+		});
+	});
+});

package/src/components/auth/signup_form/SignupForm.docs.mdx

@@ -0,0 +1,29 @@
+---
+description: A simple signup form.
+labels: ['auth', 'signup', 'form']
+---
+
+A signup form with email and password inputs.
+
+### Component usage
+
+```js
+import { SignupForm } from '@logora/debate.auth.signup_form';
+```
+
+```js
+    <IntlProvider locale="en">
+        <SignupForm 
+            onSubmit={(first_name, last_name, email, password, password_confirmation, accepts_provider_email) => console.log(email) }
+            providerName={"my company"}
+            error={false}
+        />
+    </IntlProvider>
+```
+
+### Properties
+| **Name**      | **Type** | **Required** | **Default** | **Description** |
+| ----------- | ----------- | :-----------: | ----------- | ----------- |
+| <font color='#4646c6'>onSubmit</font> | <font color="#397300">function</font> | &check; | - | <font color="grey">*callback function to get submitted email and password*</font> |
+| <font color='#4646c6'>providerName</font> | <font color="#397300">string</font> | &check; | - | <font color="grey">*provider name displayed in consent checkbox label*</font> |
+| <font color='#4646c6'>error</font> | <font color="#397300">boolean</font> | &cross; | - | <font color="grey">*if true, will show error message*</font> |

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

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import { useIntl } from 'react-intl';
+import useSessionStorageState from '@rooks/use-sessionstorage-state';
+import { Button } from '@logora/debate/action/button';
+import { TextInput } from '@logora/debate/input/text_input';
+import { Toggle } from "@logora/debate/input/toggle";
+import { EMAIL_CONSENT_STORAGE_KEY } from '@logora/debate/auth/use_auth';
+import cx from 'classnames';
+import styles from './SignupForm.module.scss';
+
+export const SignupForm = ({ onSubmit, providerName, error = false }) => {
+    const [email, setEmail] = useState("");
+    const [firstName, setFirstName] = useState("");
+    const [lastName, setLastName] = useState("");
+    const [password, setPassword] = useState("");
+    const [confirmPassword, setConfirmPassword] = useState("");
+    const [emailConsent, setEmailConsent] = useSessionStorageState(EMAIL_CONSENT_STORAGE_KEY, false);
+    const [passwordError, setPasswordError] = useState("");
+    const intl = useIntl();
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        if (validatePassword(password, confirmPassword)) {
+            if (onSubmit) {
+                onSubmit(firstName, lastName, email, password, confirmPassword, emailConsent);
+            }
+        }
+    }
+
+    const validatePassword = (password, confirmPassword) => {
+        if (password === confirmPassword) { 
+            return true 
+        }
+        setPasswordError(intl.formatMessage({ id: "auth_signup_form_password_error", defaultMessage: "Password and confirmation are not matching." }))
+        return false
+    }
+
+    return (
+        <>
+            <form onSubmit={handleSubmit} className={styles.signUpForm}>
+                <div className={styles.formGroup}>
+                    <TextInput 
+                        type={"text"} 
+                        name={"first_name"} 
+                        aria-label={intl.formatMessage({ id: "auth.signup_form.first_name.aria_label", defaultMessage: "First name" })}
+                        placeholder={intl.formatMessage({ id:"auth_signup_form_first_name_placeholder", defaultMessage: "First name" })} 
+                        onChange={(e) => setFirstName(e.target.value)}
+                        error={error}
+                        required
+                        data-testid={"first-name-input"}
+                    />
+                </div>
+                <div className={styles.formGroup}>
+                    <TextInput 
+                        type={"text"} 
+                        name={"last_name"}
+                        aria-label={intl.formatMessage({ id: "auth.signup_form.last_name.aria_label", defaultMessage: "Last name" })}
+                        placeholder={intl.formatMessage({ id:"auth_signup_form_last_name_placeholder", defaultMessage: "Last name" })}
+                        error={error}
+                        onChange={(e) => setLastName(e.target.value)}
+                        data-testid={"last-name-input"}
+                    />
+                </div>
+                <div className={styles.formGroup}>
+                    <TextInput 
+                        type={"email"} 
+                        name={"email"} 
+                        aria-label={intl.formatMessage({ id: "auth.signup_form.email.aria_label", defaultMessage: "Email" })}
+                        placeholder={intl.formatMessage({ id:"auth_signup_form_email_placeholder", defaultMessage: "Email" }) } 
+                        error={error}
+                        required
+                        onChange={(e) => setEmail(e.target.value)} 
+                        data-testid={"email-input"}
+                    />
+                </div>
+                <div className={styles.formGroup}>
+                    <TextInput 
+                        type={"password"} 
+                        name={"password"} 
+                        aria-label={intl.formatMessage({ id: "auth.signup_form.password.aria_label", defaultMessage: "Password" })}
+                        placeholder={intl.formatMessage({ id:"auth_signup_form_password_placeholder", defaultMessage: "Password"}) }
+                        error={error || passwordError} 
+                        message={passwordError && passwordError}
+                        required
+                        onChange={(e) => setPassword(e.target.value)} 
+                        data-testid={"password-input"}
+                    />
+                </div>
+                <div className={styles.formGroup}>
+                    <TextInput 
+                        type={"password"} 
+                        name={"password_confirmation"} 
+                        aria-label={intl.formatMessage({ id: "auth.signup_form.password_confirmation.aria_label", defaultMessage: "Confirm password" })}
+                        placeholder={intl.formatMessage({ id:"auth_signup_form_password_confirmation_placeholder", defaultMessage: "Confirm password" })}
+                        error={error || passwordError} 
+                        required
+                        message={error ? 
+                                        intl.formatMessage({ id:"auth_signup_form_error", defaultMessage: "An error occurred while signing up. Please check your input and try again." })
+                                : passwordError ?
+                                        passwordError
+                                : null}
+                        onChange={(e) => setConfirmPassword(e.target.value)} 
+                        data-testid={"password-confirmation-input"}
+                    />
+                </div>
+                <div className={styles.formGroup}>
+                    <Toggle 
+                        type={"checkbox"} 
+                        name={"accepts_provider_email"} 
+                        style={{ fontSize: 18 }}
+                        checked={emailConsent} 
+                        label={intl.formatMessage({ id:"auth_signup_form_accepts_email_label", defaultMessage: "I agree to receive emails from the editor" }, { variable: providerName } )}
+                        onInputChanged={(_e) => setEmailConsent(!emailConsent)} 
+                        data-testid={"accepts-email-input"}
+                    />
+                </div>
+                <div className={cx(styles.formGroup, styles.formSubmitGroup)}>
+                    <Button className={styles.formSubmitButton} role="button" type="submit" handleClick={() => null}>
+                        { intl.formatMessage({ id:"auth_signup_form_sign_up", defaultMessage: "Sign up" }) }
+                    </Button>
+                </div>
+            </form>
+        </>
+    );
+}

package/src/components/auth/signup_form/SignupForm.module.scss

@@ -0,0 +1,21 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+.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);
+}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { SignupForm } from './SignupForm';
+
+const noop = () => false;
+
+export default {
+    title: 'Auth/Signup Form',
+    component: SignupForm,
+    args: {
+        onSubmit: noop,
+        providerName: 'Debate Inc.',
+        error: false
+    },
+    argTypes: {
+        onSubmit: {
+            control: false
+        },
+        providerName: {
+            control: 'text'
+        },
+        error: {
+            control: 'boolean'
+        }
+    },
+    render: (args) => (
+        <IntlProvider locale="en">
+            <SignupForm {...args} />
+        </IntlProvider>
+    )
+};
+
+export const DefaultSignupForm = {};
+
+export const SignupFormWithError = {
+    args: {
+        providerName: 'My company',
+        error: true
+    }
+};