Initial conversion to react-basics.

2024-11-15 09:45:04 +01:00 · 2022-11-21 22:32:55 -08:00 · 2022-11-21 22:32:55 -08:00 · 2259ee8d76
commit 2259ee8d76
parent c0a18e13fa
10 changed files with 724 additions and 609 deletions
--- a/components/forms/Form.module.css
+++ b/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(--gray50);
+  padding: 16px;
+  color: var(--red400);
+  border: 1px solid var(--red400);
+  border-radius: 5px;
+  text-align: center;
+}
+
+.success {
+  width: 600px;
+  margin: 60px auto;
+  background: var(--gray50);
+  padding: 16px;
+  color: var(--green400);
+  border: 1px solid var(--green400);
+  border-radius: 5px;
+  text-align: center;
+}
--- a/components/forms/LoginForm.js
+++ b/components/forms/LoginForm.js
@ -1,113 +1,62 @@
-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 { useRef } from 'react';
+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 ref = useRef();

-  const handleSubmit = async ({ username, password }) => {
-    const { ok, status, data } = await post('/auth/login', {
-      username,
-      password,
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async ({ token, account }) => {
+        setAuthToken(token);
+        setUser(account);
+
+        await router.push('/websites');
+      },
+      onError: async () => {
+        ref.current.reset(undefined, { keepDirty: true, keepValues: true });
+      },
    });
-
-    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>
+        <Icon size="xl">
+          <Logo />
+        </Icon>
+        <p>umami</p>
      </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>
+      <Form ref={ref} 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>
-              <Button type="submit" variant="action">
-                <FormattedMessage id="label.login" defaultMessage="Login" />
-              </Button>
+          <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
+            Log in
+          </SubmitButton>
        </FormButtons>
-            <FormMessage>{message}</FormMessage>
      </Form>
-        )}
-      </Formik>
-    </FormLayout>
+    </>
  );
 }
--- a/lib/client.ts
+++ b/lib/client.ts
@ -0,0 +1,14 @@
+import { getItem, setItem, removeItem } from 'next-basics';
+import { AUTH_TOKEN } from './constants';
+
+export function getAuthToken() {
+  return getItem(AUTH_TOKEN);
+}
+
+export function setAuthToken(token) {
+  setItem(AUTH_TOKEN, token);
+}
+
+export function removeAuthToken() {
+  removeItem(AUTH_TOKEN);
+}
--- a/lib/middleware.js
+++ b/lib/middleware.js
@ -3,7 +3,7 @@ import debug from 'debug';
 import cors from 'cors';
 import { validate } from 'uuid';
 import { findSession } from 'lib/session';
-import { parseShareToken, getAuthToken } from 'lib/auth';
+import { getAuthToken, parseShareToken } from 'lib/auth';
 import { secret } from 'lib/crypto';
 import redis from 'lib/redis';
 import { getUser } from '../queries';
--- a/lib/redis.js
+++ b/lib/redis.js
@ -1,39 +1,39 @@
+import { createClient } from 'redis';
 import debug from 'debug';
-import Redis from 'ioredis';
-import { REDIS } from 'lib/db';

 const log = debug('umami:redis');
-export const DELETED = 'deleted';
+const REDIS = Symbol();

 let redis;
 const enabled = Boolean(process.env.REDIS_URL);

-function getClient() {
-  if (!enabled) {
+async function getClient() {
+  if (!process.env.REDIS_URL) {
    return null;
  }

-  const redis = new Redis(process.env.REDIS_URL, {
-    retryStrategy(times) {
-      log(`Redis reconnecting attempt: ${times}`);
-      return 5000;
-    },
-  });
+  const client = createClient({ url: process.env.REDIS_URL });
+  client.on('error', err => log(err));
+  await client.connect();

  if (process.env.NODE_ENV !== 'production') {
-    global[REDIS] = redis;
+    global[REDIS] = client;
  }

  log('Redis initialized');

-  return redis;
+  return client;
 }

 async function get(key) {
  await connect();

+  const data = await redis.get(key);
+
+  log({ key, data });
+
  try {
-    return JSON.parse(await redis.get(key));
+    return JSON.parse(data);
  } catch {
    return null;
  }
@ -53,7 +53,7 @@ async function del(key) {

 async function connect() {
  if (!redis && enabled) {
-    redis = global[REDIS] || getClient();
+    redis = global[REDIS] || (await getClient());
  }

  return redis;
--- a/package.json
+++ b/package.json
@ -57,6 +57,7 @@
  "dependencies": {
    "@fontsource/inter": "4.5.7",
    "@prisma/client": "4.5.0",
+    "@tanstack/react-query": "^4.16.1",
    "chalk": "^4.1.1",
    "chart.js": "^2.9.4",
    "classnames": "^2.3.1",
@ -74,7 +75,6 @@
    "formik": "^2.2.9",
    "fs-extra": "^10.0.1",
    "immer": "^9.0.12",
-    "ioredis": "^5.2.3",
    "ipaddr.js": "^2.0.1",
    "is-ci": "^3.0.1",
    "is-docker": "^3.0.0",
@ -88,15 +88,17 @@
    "node-fetch": "^3.2.8",
    "npm-run-all": "^4.1.5",
    "prop-types": "^15.7.2",
-    "react": "^17.0.0",
+    "react": "^18.2.0",
+    "react-basics": "^0.29.0",
    "react-beautiful-dnd": "^13.1.0",
-    "react-dom": "^17.0.0",
+    "react-dom": "^18.2.0",
    "react-intl": "^5.24.7",
    "react-simple-maps": "^2.3.0",
    "react-spring": "^9.4.4",
    "react-tooltip": "^4.2.21",
    "react-use-measure": "^2.0.4",
    "react-window": "^1.8.6",
+    "redis": "^4.5.0",
    "request-ip": "^3.3.0",
    "semver": "^7.3.6",
    "thenby": "^1.3.4",
--- a/pages/_app.js
+++ b/pages/_app.js
@ -1,14 +1,16 @@
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { IntlProvider } from 'react-intl';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import useLocale from 'hooks/useLocale';
 import useConfig from 'hooks/useConfig';
-import 'styles/variables.css';
-import 'styles/bootstrap-grid.css';
+import 'react-basics/dist/styles.css';
 import 'styles/index.css';
 import '@fontsource/inter/400.css';
 import '@fontsource/inter/600.css';

+const client = new QueryClient();
+
 export default function App({ Component, pageProps }) {
  const { locale, messages } = useLocale();
  const { basePath } = useRouter();
@ -22,6 +24,7 @@ export default function App({ Component, pageProps }) {
  }

  return (
+    <QueryClientProvider client={client}>
      <IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}>
        <Head>
          <link rel="icon" href={`${basePath}/favicon.ico`} />
@ -39,5 +42,6 @@ export default function App({ Component, pageProps }) {
          <Component {...pageProps} />
        </div>
      </IntlProvider>
+    </QueryClientProvider>
  );
 }
--- a/styles/index.css
+++ b/styles/index.css
@ -3,6 +3,7 @@ body {
  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
    Ubuntu, Cantrell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
+  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  padding: 0;
@ -12,9 +13,6 @@ body {
  display: flex;
  flex-direction: column;
  flex: 1;
-
-  font-size: var(--font-size-normal);
-  overflow-y: overlay;
 }

 body {
@ -70,38 +68,12 @@ h6 {
  margin: 0;
 }

-button,
-input,
-select {
-  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
-}
-
 a,
 a:active,
 a:visited {
  color: var(--primary400);
 }

-input[type='text'],
-input[type='password'],
-select,
-textarea {
-  color: var(--gray900);
-  background: var(--gray50);
-  padding: 4px 8px;
-  font-size: var(--font-size-normal);
-  line-height: 1.8;
-  border: 1px solid var(--gray500);
-  border-radius: 4px;
-  outline: none;
-  resize: none;
-  flex: 1;
-}
-
-input[type='checkbox'] + label {
-  margin-left: 10px;
-}
-
 label {
  flex: 1;
  margin-right: 20px;
@ -141,24 +113,3 @@ svg {
 #__modals {
  z-index: 10;
 }
-
-.container {
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.row {
-  margin-right: 0;
-  margin-left: 0;
-}
-.row > .col,
-.row > [class*='col-'] {
-  padding-right: 0;
-  padding-left: 0;
-}
-
-.center {
-  text-align: center;
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -23,6 +23,6 @@
    "noEmit": true,
    "jsx": "preserve"
  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "queries/admin/website/getAllWebsites.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
 }
--- a/yarn.lock
+++ b/yarn.lock