Dev (#1702)

* Initial Typescript models.

* Re-add realtime data

* get distinct sessions for session metrics

* Add queries for new schema.

* Fix Typo.

* Add some api/team endpoints.

* Fix destructure error.

* Fix getWebsites call.

* Ignore typescript build errors.

* Fix enum issue.

* add clickhouse route to deleteWebsite

* Fix Website auth.

* Updated lint-staged config.

* Add permission checks.

* Add user role api.

* Fix error when updating website.

* Fix isAdmin check.  Fix Schema.

* Initial conversion to react-basics.

* Remove user/team transfer from website update.

* delete website in relational query

* Fix login secure token creation.

* Add event type to event.

* Allow user to be added to team with role.

* Updated login form.

* Add Role to TeamUser.

* Add database migration.

* Refactored permissions check. Updated redis lib.

* Feat/um 114 roles and permissions (#1683)

* Auth checkpoint.

* Merge branch 'dev' into feat/um-114-roles-and-permissions

* Add 02 migration.

* Added lib/types.

* Updated schema.

* Updated roles and permissions logic.

* Implement react-basics styles. Fix queries.

* Update website details layout.

* Add 01 migration.

* Fix admin create.

* Update react-basics.

Co-authored-by: Francis Cao <franciscao@gmail.com>
Co-authored-by: Mike Cao <mike@mikecao.com>
Co-authored-by: Mike Cao <moocao@gmail.com>

components/forms/DatePickerForm.module.css

@@ -16,7 +16,7 @@
 .calendars > div + div {
   margin-left: 20px;
   padding-left: 20px;
-  border-left: 1px solid var(--gray300);
+  border-left: 1px solid var(--base300);
 }
 
 .filter {

components/forms/EventDataForm.module.css

@@ -3,7 +3,7 @@
 }
 
 .form {
-  border-right: 1px solid var(--gray300);
+  border-right: 1px solid var(--base300);
   width: 420px;
 }
 
@@ -12,7 +12,7 @@
 }
 
 .filters + .filters {
-  border-top: 1px solid var(--gray300);
+  border-top: 1px solid var(--base300);
   min-height: 250px;
 }
 

components/forms/Form.module.css

@@ -0,0 +1,63 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  width: 300px;
+  margin: 0 auto;
+}
+
+.header {
+  font-size: 24px;
+  font-weight: 700;
+  text-align: center;
+  margin: 30px auto;
+}
+
+.info {
+  text-align: center;
+  padding: 30px 0;
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  font-size: 14px;
+  text-align: center;
+  margin: 30px auto;
+}
+
+.footer a {
+  font-weight: 600;
+}
+
+.buttons {
+  justify-content: center;
+}
+
+.button {
+  flex: 1;
+  justify-content: center;
+}
+
+.error {
+  width: 600px;
+  margin: 0 auto 30px;
+  background: var(--base50);
+  padding: 16px;
+  color: var(--red400);
+  border: 1px solid var(--red400);
+  border-radius: 5px;
+  text-align: center;
+}
+
+.success {
+  width: 600px;
+  margin: 60px auto;
+  background: var(--base50);
+  padding: 16px;
+  color: var(--green400);
+  border: 1px solid var(--green400);
+  border-radius: 5px;
+  text-align: center;
+}

components/forms/LoginForm.js

@@ -1,113 +1,57 @@
-import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Formik, Form, Field } from 'formik';
-import { setItem } from 'next-basics';
-import { useRouter } from 'next/router';
-import Button from 'components/common/Button';
-import FormLayout, {
+import { useMutation } from '@tanstack/react-query';
+import {
+  Form,
+  FormInput,
   FormButtons,
-  FormError,
-  FormMessage,
-  FormRow,
-} from 'components/layout/FormLayout';
-import Icon from 'components/common/Icon';
-import useApi from 'hooks/useApi';
-import { AUTH_TOKEN } from 'lib/constants';
+  TextField,
+  PasswordField,
+  SubmitButton,
+  Icon,
+} from 'react-basics';
+import { useRouter } from 'next/router';
+import { useApi } from 'next-basics';
 import { setUser } from 'store/app';
+import { setAuthToken } from 'lib/client';
 import Logo from 'assets/logo.svg';
-import styles from './LoginForm.module.css';
-
-const validate = ({ username, password }) => {
-  const errors = {};
-
-  if (!username) {
-    errors.username = <FormattedMessage id="label.required" defaultMessage="Required" />;
-  }
-  if (!password) {
-    errors.password = <FormattedMessage id="label.required" defaultMessage="Required" />;
-  }
-
-  return errors;
-};
+import styles from './Form.module.css';
 
 export default function LoginForm() {
-  const { post } = useApi();
   const router = useRouter();
-  const [message, setMessage] = useState();
+  const { post } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post('/auth/login', data));
 
-  const handleSubmit = async ({ username, password }) => {
-    const { ok, status, data } = await post('/auth/login', {
-      username,
-      password,
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async ({ token, user }) => {
+        setAuthToken(token);
+        setUser(user);
+
+        await router.push('/websites');
+      },
     });
-
-    if (ok) {
-      const { user, token } = data;
-
-      setItem(AUTH_TOKEN, token);
-
-      setUser(user);
-
-      await router.push('/');
-
-      return null;
-    } else {
-      setMessage(
-        status === 401 ? (
-          <FormattedMessage
-            id="message.incorrect-username-password"
-            defaultMessage="Incorrect username/password."
-          />
-        ) : (
-          data
-        ),
-      );
-    }
   };
 
   return (
-    <FormLayout className={styles.login}>
-      <Formik
-        initialValues={{
-          username: '',
-          password: '',
-        }}
-        validate={validate}
-        onSubmit={handleSubmit}
-      >
-        {() => (
-          <Form>
-            <div className={styles.header}>
-              <Icon icon={<Logo />} size="xlarge" className={styles.icon} />
-              <h1 className="center">umami</h1>
-            </div>
-            <FormRow>
-              <label htmlFor="username">
-                <FormattedMessage id="label.username" defaultMessage="Username" />
-              </label>
-              <div>
-                <Field name="username" type="text" />
-                <FormError name="username" />
-              </div>
-            </FormRow>
-            <FormRow>
-              <label htmlFor="password">
-                <FormattedMessage id="label.password" defaultMessage="Password" />
-              </label>
-              <div>
-                <Field name="password" type="password" />
-                <FormError name="password" />
-              </div>
-            </FormRow>
-            <FormButtons>
-              <Button type="submit" variant="action">
-                <FormattedMessage id="label.login" defaultMessage="Login" />
-              </Button>
-            </FormButtons>
-            <FormMessage>{message}</FormMessage>
-          </Form>
-        )}
-      </Formik>
-    </FormLayout>
+    <>
+      <div className={styles.header}>
+        <Icon size="xl">
+          <Logo />
+        </Icon>
+        <p>umami</p>
+      </div>
+      <Form className={styles.form} onSubmit={handleSubmit} error={error}>
+        <FormInput name="username" label="Username" rules={{ required: 'Required' }}>
+          <TextField autoComplete="off" />
+        </FormInput>
+        <FormInput name="password" label="Password" rules={{ required: 'Required' }}>
+          <PasswordField />
+        </FormInput>
+        <FormButtons>
+          <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
+            Log in
+          </SubmitButton>
+        </FormButtons>
+      </Form>
+    </>
   );
 }