datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

package/src/app/pages/LoginPage/LoginForm.jsx

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import '../../../styles/login.css';
+import LoadingIcon from '../../icons/LoadingIcon';
+import logo from '../Root/assets/dj-logo.png';
+import GitHubLoginButton from './assets/sign-in-with-github.png';
+import GoogleLoginButton from './assets/sign-in-with-google.png';
+import * as Yup from 'yup';
+
+const githubLoginURL = new URL('/github/login/', process.env.REACT_APP_DJ_URL);
+const googleLoginURL = new URL('/google/login/', process.env.REACT_APP_DJ_URL);
+
+const LoginSchema = Yup.object().shape({
+  username: Yup.string()
+    .min(2, 'Must be at least 2 characters')
+    .required('Username is required'),
+  password: Yup.string().required('Password is required'),
+});
+
+export default function LoginForm({ setShowSignup }) {
+  const [, setError] = useState('');
+
+  // Add the path that the user was trying to access in order to properly redirect after auth
+  githubLoginURL.searchParams.append('target', window.location.pathname);
+  googleLoginURL.searchParams.append('target', window.location.pathname);
+
+  const handleBasicLogin = async ({ username, password }) => {
+    const data = new FormData();
+    data.append('username', username);
+    data.append('password', password);
+    await fetch(`${process.env.REACT_APP_DJ_URL}/basic/login/`, {
+      method: 'POST',
+      body: data,
+      credentials: 'include',
+    }).catch(error => {
+      setError(error ? JSON.stringify(error) : '');
+    });
+    window.location.reload();
+  };
+
+  return (
+    <Formik
+      initialValues={{
+        username: '',
+        password: '',
+        target: window.location.pathname,
+      }}
+      validationSchema={LoginSchema}
+      onSubmit={(values, { setSubmitting }) => {
+        setTimeout(() => {
+          handleBasicLogin(values);
+          setSubmitting(false);
+        }, 400);
+      }}
+    >
+      {({ isSubmitting }) => (
+        <Form>
+          <div className="logo-title">
+            <img src={logo} alt="DJ Logo" width="75px" height="75px" />
+            <h2>DataJunction</h2>
+          </div>
+          <div>
+            <Field type="text" name="username" placeholder="Username" />
+          </div>
+          <div>
+            <ErrorMessage
+              className="form-error"
+              name="username"
+              component="span"
+            />
+          </div>
+          <div>
+            <Field type="password" name="password" placeholder="Password" />
+          </div>
+          <div>
+            <ErrorMessage
+              className="form-error"
+              name="password"
+              component="span"
+            />
+          </div>
+          <div>
+            <p>
+              Don't have an account yet?{' '}
+              <a onClick={() => setShowSignup(true)}>Sign Up</a>
+            </p>
+          </div>
+          <button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? <LoadingIcon /> : 'Login'}
+          </button>
+          <div>
+            <p>Or</p>
+          </div>
+          {process.env.REACT_ENABLE_GITHUB_OAUTH === 'true' ? (
+            <div>
+              <a href={githubLoginURL.href}>
+                <img
+                  src={GitHubLoginButton}
+                  alt="Sign in with GitHub"
+                  width="200px"
+                />
+              </a>
+            </div>
+          ) : (
+            ''
+          )}
+          {process.env.REACT_ENABLE_GOOGLE_OAUTH === 'true' ? (
+            <div>
+              <a href={googleLoginURL.href}>
+                <img
+                  src={GoogleLoginButton}
+                  alt="Sign in with Google"
+                  width="200px"
+                />
+              </a>
+            </div>
+          ) : (
+            ''
+          )}
+        </Form>
+      )}
+    </Formik>
+  );
+}

package/src/app/pages/LoginPage/SignupForm.jsx

@@ -0,0 +1,156 @@
+import { useState } from 'react';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import '../../../styles/login.css';
+import logo from '../Root/assets/dj-logo.png';
+import LoadingIcon from '../../icons/LoadingIcon';
+import GitHubLoginButton from './assets/sign-in-with-github.png';
+import GoogleLoginButton from './assets/sign-in-with-google.png';
+import * as Yup from 'yup';
+
+const githubLoginURL = new URL('/github/login/', process.env.REACT_APP_DJ_URL);
+const googleLoginURL = new URL('/google/login/', process.env.REACT_APP_DJ_URL);
+
+const SignupSchema = Yup.object().shape({
+  email: Yup.string().email('Invalid email').required('Email is required'),
+  signupUsername: Yup.string()
+    .min(3, 'Must be at least 2 characters')
+    .max(20, 'Must be less than 20 characters')
+    .required('Username is required'),
+  signupPassword: Yup.string().required('Password is required'),
+});
+
+export default function SignupForm({ setShowSignup }) {
+  const [, setError] = useState('');
+
+  // Add the path that the user was trying to access in order to properly redirect after auth
+  githubLoginURL.searchParams.append('target', window.location.pathname);
+  googleLoginURL.searchParams.append('target', window.location.pathname);
+
+  const handleBasicSignup = async ({
+    email,
+    signupUsername,
+    signupPassword,
+  }) => {
+    const data = new FormData();
+    data.append('email', email);
+    data.append('username', signupUsername);
+    data.append('password', signupPassword);
+    await fetch(`${process.env.REACT_APP_DJ_URL}/basic/user/`, {
+      method: 'POST',
+      body: data,
+      credentials: 'include',
+    }).catch(error => {
+      setError(error ? JSON.stringify(error) : '');
+    });
+    const loginData = new FormData();
+    loginData.append('username', signupUsername);
+    loginData.append('password', signupPassword);
+    await fetch(`${process.env.REACT_APP_DJ_URL}/basic/login/`, {
+      method: 'POST',
+      body: data,
+      credentials: 'include',
+    }).catch(error => {
+      setError(error ? JSON.stringify(error) : '');
+    });
+    window.location.reload();
+  };
+
+  return (
+    <Formik
+      initialValues={{
+        email: '',
+        signupUsername: '',
+        signupPassword: '',
+        target: window.location.pathname,
+      }}
+      validationSchema={SignupSchema}
+      onSubmit={(values, { setSubmitting }) => {
+        setTimeout(() => {
+          handleBasicSignup(values);
+          setSubmitting(false);
+        }, 400);
+      }}
+    >
+      {({ isSubmitting }) => (
+        <Form>
+          <div className="logo-title">
+            <img src={logo} alt="DJ Logo" width="75px" height="75px" />
+            <h2>DataJunction</h2>
+          </div>
+          <div>
+            <Field type="text" name="email" placeholder="Email" />
+          </div>
+          <div>
+            <ErrorMessage
+              className="form-error"
+              name="email"
+              component="span"
+            />
+          </div>
+          <div>
+            <Field type="text" name="signupUsername" placeholder="Username" />
+          </div>
+          <div>
+            <ErrorMessage
+              className="form-error"
+              name="signupUsername"
+              component="span"
+            />
+          </div>
+          <div>
+            <Field
+              type="password"
+              name="signupPassword"
+              placeholder="Password"
+            />
+          </div>
+          <div>
+            <ErrorMessage
+              className="form-error"
+              name="signupPassword"
+              component="span"
+            />
+          </div>
+          <div>
+            <p>
+              Have an account already?{' '}
+              <a onClick={() => setShowSignup(false)}>Login</a>
+            </p>
+          </div>
+          <button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? <LoadingIcon /> : 'Sign Up'}
+          </button>
+          <div>
+            <p>Or</p>
+          </div>
+          {process.env.REACT_ENABLE_GITHUB_OAUTH === 'true' ? (
+            <div>
+              <a href={githubLoginURL.href}>
+                <img
+                  src={GitHubLoginButton}
+                  alt="Sign in with GitHub"
+                  width="200px"
+                />
+              </a>
+            </div>
+          ) : (
+            ''
+          )}
+          {process.env.REACT_ENABLE_GOOGLE_OAUTH === 'true' ? (
+            <div>
+              <a href={googleLoginURL.href}>
+                <img
+                  src={GoogleLoginButton}
+                  alt="Sign in with Google"
+                  width="200px"
+                />
+              </a>
+            </div>
+          ) : (
+            ''
+          )}
+        </Form>
+      )}
+    </Formik>
+  );
+}

package/src/app/pages/LoginPage/__tests__/index.test.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { LoginPage } from '../index';
+
+describe('LoginPage', () => {
+  const original = window.location;
+
+  beforeAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: { reload: jest.fn() },
+    });
+  });
+
+  afterAll(() => {
+    Object.defineProperty(window, 'location', {
+      configurable: true,
+      value: original,
+    });
+  });
+
+  beforeEach(() => {
+    fetch.resetMocks();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('displays error messages when fields are empty and form is submitted', async () => {
+    const { getByText, queryAllByText } = render(<LoginPage />);
+    fireEvent.click(getByText('Login'));
+
+    await waitFor(() => {
+      expect(getByText('DataJunction')).toBeInTheDocument();
+      expect(getByText('Username is required')).toBeInTheDocument();
+      expect(getByText('Password is required')).toBeInTheDocument();
+    });
+  });
+
+  it('calls fetch with correct data on login', async () => {
+    const username = 'testUser';
+    const password = 'testPassword';
+
+    const { getByText, getByPlaceholderText } = render(<LoginPage />);
+    fireEvent.change(getByPlaceholderText('Username'), {
+      target: { value: username },
+    });
+    fireEvent.change(getByPlaceholderText('Password'), {
+      target: { value: password },
+    });
+    fireEvent.click(getByText('Login'));
+
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith(
+        `${process.env.REACT_APP_DJ_URL}/basic/login/`,
+        expect.objectContaining({
+          method: 'POST',
+          body: expect.any(FormData),
+          credentials: 'include',
+        }),
+      );
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+
+  it('calls fetch with correct data on signup', async () => {
+    const email = 'testEmail@testEmail.com';
+    const username = 'testUser';
+    const password = 'testPassword';
+
+    const { getByText, getByPlaceholderText } = render(<LoginPage />);
+    fireEvent.click(getByText('Sign Up'));
+    fireEvent.change(getByPlaceholderText('Email'), {
+      target: { value: email },
+    });
+    fireEvent.change(getByPlaceholderText('Username'), {
+      target: { value: username },
+    });
+    fireEvent.change(getByPlaceholderText('Password'), {
+      target: { value: password },
+    });
+    fireEvent.click(getByText('Sign Up'));
+
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith(
+        `${process.env.REACT_APP_DJ_URL}/basic/user/`,
+        expect.objectContaining({
+          method: 'POST',
+          body: expect.any(FormData),
+          credentials: 'include',
+        }),
+      );
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+});

package/src/app/pages/LoginPage/index.jsx

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import '../../../styles/login.css';
+import SignupForm from './SignupForm';
+import LoginForm from './LoginForm';
+
+export function LoginPage() {
+  const [showSignup, setShowSignup] = useState(false);
+  return (
+    <div className="container login">
+      {showSignup ? (
+        <SignupForm setShowSignup={setShowSignup} />
+      ) : (
+        <LoginForm setShowSignup={setShowSignup} />
+      )}
+    </div>
+  );
+}

package/src/app/pages/NamespacePage/AddNamespacePopover.jsx

@@ -0,0 +1,85 @@
+import { useContext, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+import AddItemIcon from '../../icons/AddItemIcon';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export default function AddNamespacePopover({ namespace }) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [popoverAnchor, setPopoverAnchor] = useState(false);
+
+  const addNamespace = async ({ namespace }, { setSubmitting, setStatus }) => {
+    setSubmitting(false);
+    const response = await djClient.addNamespace(namespace);
+    if (response.status === 200 || response.status === 201) {
+      setStatus({ success: 'Saved' });
+    } else {
+      setStatus({
+        failure: `${response.json.message}`,
+      });
+    }
+    window.location.reload();
+  };
+
+  return (
+    <>
+      <button
+        className="edit_button"
+        aria-label="AddNamespaceTogglePopover"
+        tabIndex="0"
+        onClick={() => {
+          setPopoverAnchor(!popoverAnchor);
+        }}
+      >
+        <AddItemIcon />
+      </button>
+      <div
+        className="popover"
+        role="dialog"
+        aria-label="AddNamespacePopover"
+        style={{
+          display: popoverAnchor === false ? 'none' : 'block',
+          width: '200px !important',
+          textTransform: 'none',
+          fontWeight: 'normal',
+        }}
+      >
+        <Formik
+          initialValues={{
+            namespace: namespace + '.',
+          }}
+          onSubmit={addNamespace}
+        >
+          {function Render({ isSubmitting, status, setFieldValue }) {
+            return (
+              <Form>
+                {displayMessageAfterSubmit(status)}
+                <span data-testid="add-namespace">
+                  <ErrorMessage name="namespace" component="span" />
+                  <label htmlFor="namespace">Namespace</label>
+                  <Field
+                    type="text"
+                    name="namespace"
+                    id="namespace"
+                    placeholder="New namespace"
+                    default={namespace}
+                  />
+                </span>
+                <button
+                  className="add_node"
+                  type="submit"
+                  aria-label="SaveNamespace"
+                  aria-hidden="false"
+                  style={{ marginTop: '1rem' }}
+                >
+                  Save
+                </button>
+              </Form>
+            );
+          }}
+        </Formik>
+      </div>
+    </>
+  );
+}