ファイルをアップロード・ダウンロードできるWebアプリを公開しました

1
import type { ComponentProps, FC } from "react";
2
import { useState, useCallback } from "react"
3
import { useFormContext } from "react-hook-form";
4
import { twMerge } from "tailwind-merge";
5
import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/outline";
6

7
export type InputProps = Omit<ComponentProps<"input">, "type"> & {
8
  id: string;
9
  label: string;
10
  validation?: RegisterOptions;
11
  helperText?: string;
12
};
13

14
export const PasswordInput: FC<InputProps> = (props) => {
15
  const { label, placeholder = "", helperText = "", id, disabled, readOnly, validation, ...rest } = props;
16

17
  const { register, formState: { errors } } = useFormContext();
18
  const [showPassword, setShowPassword] = useState(false);
19
  const togglePassword = useCallback(() => {
20
    setShowPassword((prev) => !prev);
21
  }, []);
22

23
  let stateClass;
24
  if (readOnly || disabled) {
25
    stateClass = "bg-gray-100 focus:ring-0 cursor-not-allowed border-gray-300 focus:border-gray-300";
26
  } else if (errors[id]) {
27
    stateClass = "focus:ring-red-500 border-red-500 focus:border-red-500";
28
  } else {
29
    stateClass = "focus:ring-primary-500 border-gray-300 focus:border-primary-500";
30
  }
31
  const className = twMerge("block w-full rounded-md shadow-sm", stateClass);
32
  const isError = !!Object.entries(errors).length && !!errors[id]
33

34
  return (
35
    <div>
36
      <label htmlFor={id} className="block text-sm font-normal text-gray-700">
37
        {label}
38
      </label>
39
      <div className="relative mt-1">
40
        <input
41
          {...register(id, validation)} {...rest}
42
          type={showPassword ? "text" : "password"}
43
          name={id} id={id}
44
          readOnly={readOnly} disabled={disabled}
45
          className={className} placeholder={placeholder} aria-describedby={id}
46
        />
47

48
        <button
49
          onClick={(e) => {
50
            e.preventDefault();
51
            togglePassword();
52
          }}
53
          type="button"
54
          className="focus:ring-primary-500 absolute inset-y-0 right-0 mr-3 flex items-center rounded-lg p-1 focus:outline-none focus:ring"
55
        >
56
          {showPassword ? (
57
            <EyeSlashIcon className="h-6 w-6 cursor-pointer text-gray-500 hover:text-gray-600" />
58
          ) : (
59
            <EyeIcon className="h-6 w-6 cursor-pointer text-gray-500 hover:text-gray-600" />
60
          )}
61
        </button>
62
      </div>
63
      <div className="mt-1">
64
        {helperText && <p className="text-xs text-gray-500">{helperText}</p>}
65
        {isError && <span className="text-sm text-red-500">{JSON.stringify(errors[id]?.message, null, 2)}</span>}
66
      </div>
67
    </div>
68
  );
69
};

1
import { FC, useEffect } from "react";
2
import { useNavigate } from "react-router-dom";
3
import { useCreateUserWithEmailAndPassword } from "react-firebase-hooks/auth";
4
import { FormProvider, useForm } from "react-hook-form";
5
import { z } from "zod";
6
import { zodResolver } from "@hookform/resolvers/zod";
7

8
import { auth } from "@/lib/firebase";
9
import { SignUpWithEmailAndPasswordSchema } from "@/lib/zod";
10
import { Input, PasswordInput, Button } from "@/components/Form";
11

12
const validEmail = import.meta.env.VITE_VALID_EMAIL_ADRESS;
13

14
const Signup: FC = () => {
15
  const navigate = useNavigate();
16
  const [createUserWithEmailAndPassword, user, loading, error] = useCreateUserWithEmailAndPassword(auth);
17
  const methods = useForm<z.infer<typeof SignUpWithEmailAndPasswordSchema>>({
18
    resolver: zodResolver(SignUpWithEmailAndPasswordSchema),
19
  });
20
  const { handleSubmit, setError } = methods;
21

22
  const onSubmit = handleSubmit((data) => {
23
    const { email, password } = data;
24
    if (email !== validEmail) {
25
      setError("email", { type: "custom", message: "メールアドレスまたはパスワードが間違っています" });
26
      setError("password", { type: "custom", message: "メールアドレスまたはパスワードが間違っています" });
27
      return;
28
    }
29

30
    createUserWithEmailAndPassword(email, password);
31
  });
32

33
  useEffect(() => {
34
    if (user) navigate("/admin");
35
  }, [user]);
36

37
  return (
38
    <FormProvider {...methods}>
39
      <form onSubmit={onSubmit} className="mx-auto max-w-lg rounded-lg border">
40
        <div className="flex flex-col gap-4 p-4 md:p-8">
41
          <Input id="email" label="Eメールアドレス" placeholder="[email protected]" validation={{ required: "required" }} />
42
          <PasswordInput id="password" label="パスワード" validation={{ required: "required" }} />
43
          <Button type="submit">サインアップ</Button>
44
        </div>
45
      </form>
46
    </FormProvider>
47
  );
48
};
49

50
export default Signup;