Initial conversion to react-basics.

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;
+}

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>
-            </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 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>
+          <SubmitButton variant="primary" className={styles.button} disabled={isLoading}>
+            Log in
+          </SubmitButton>
+        </FormButtons>
+      </Form>
+    </>
   );
 }