@logora/debate 0.1.0 → 0.1.1

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

@@ -1,20 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

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

@@ -1,53 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,29 +0,0 @@
----
-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

@@ -1,125 +0,0 @@
-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

@@ -1,21 +0,0 @@
-@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

@@ -1,40 +0,0 @@
-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
-    }
-};