Remix - 表单&接口入参校验

import React from 'react';
import { Button, Checkbox, Form, Input } from 'antd';

const onFinish = (values: any) => {
  console.log('Success:', values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const App: React.FC = () => (
  <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="Username"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="Password"
      name="password"
      rules={[{ required: true, message: 'Please input your password!' }]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
      <Checkbox>Remember me</Checkbox>
    </Form.Item>

    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item>
  </Form>
);

export default App;

import React from "react";
import { IconBrandGithub, IconBrandTwitter } from "@tabler/icons-react";
import { Link, Form } from "@remix-run/react";
import type { ActionArgs } from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { parseFormAny, useZorm } from "react-zorm";
import { z } from "zod";

import LoginLayout from "~/components/user-layout";
import FormInner from "~/components/form/form-inner";
import Input from "~/components/input";
import Button from "~/components/button";
import Checkbox from "~/components/checkbox";
import { loginUser, setAuthSession } from "~/modules/auth";
import { authCookie } from "~/integrations/supabase";

const LoginSchema = z.object({
  email: z
    .string({ required_error: "Email is required" })
    .email({ message: "Invalid email" }),
  password: z
    .string({ required_error: "Password is required" })
    .min(8, { message: "Password must be at least 8 characters" }),
  remember: z.optional(z.boolean()),
});

export async function action({ request }: ActionArgs) {
  const formData = await request.formData();
  const result = await LoginSchema.safeParseAsync(parseFormAny(formData));
  let session = await authCookie.getSession(request.headers.get("Cookie"));

  if (!result.success) {
    return json({ errors: result.error }, { status: 400 });
  }

  const { accessToken, refreshToken, error } = await loginUser(
    result.data.email,
    result.data.password
  );

  if (error || !accessToken || !refreshToken) {
    return json({ formError: error || "Something went wrong" }, 403);
  }

  session = setAuthSession(session, accessToken, refreshToken);

  return redirect("/", {
    headers: {
      "Set-Cookie": await authCookie.commitSession(session),
    },
  });
}

const Login: React.FC = () => {
  const zo = useZorm("NewQuestionWizardScreen", LoginSchema);

  const renderFooter = () => (
    <>
      <div className="hr-text">or</div>
      <div className="card-body">
        <div className="row">
          <div className="col">
            <Button
              href="#"
              icon={<IconBrandGithub className="text-github" />}
              block
            >
              Login with Github
            </Button>
          </div>
          <div className="col">
            <Button
              href="#"
              icon={<IconBrandTwitter className="text-twitter" />}
              block
            >
              Login with Twitter
            </Button>
          </div>
        </div>
      </div>
    </>
  );

  return (
    <LoginLayout
      title="Login to your account"
      footer={renderFooter()}
      description={
        <>
          Don't have account yet? <Link to="/sign-up">Sign up</Link>
        </>
      }
    >
      <Form ref={zo.ref} method="post" replace>
        <FormInner
          label="Email address"
          required
          error={zo.errors.email()?.message}
        >
          <Input
            name={zo.fields.email()}
            type="email"
            placeholder="your@email.com"
          />
        </FormInner>
        <FormInner
          label="Password"
          required
          labelSuffix={<Link to="/forgot-password">I forgot password</Link>}
          error={zo.errors.password()?.message}
        >
          <Input
            name={zo.fields.password()}
            type="password"
            placeholder="Your password"
          />
        </FormInner>
        <div className="mb-2">
          <Checkbox name={zo.fields.remember()}>
            Remember me on this device
          </Checkbox>
        </div>
        <div className="form-footer">
          <Button buttonType="submit" type="primary" block>
            Sign in
          </Button>
        </div>
      </Form>
    </LoginLayout>
  );
};

export default Login;