🙆

JWT Authentication【19Login Test】

2022/10/21に公開約3,700字2件のコメント

JWT Authentication【19Login Test】

YouTube: https://youtu.be/PFlW4uvzttU

src/pages/Login.tsx
import { SyntheticEvent, useState } from 'react'
import { LockClosedIcon } from '@heroicons/react/20/solid'
import { useAuthContext } from '../context/authContext'

export default function Login() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const { login, user } = useAuthContext()

  const handleSubmit = (e: SyntheticEvent) => {
    e.preventDefault()
    login(email, password)
    // alert(JSON.stringify({ email: email, password: password }))
  }

  console.log(user)
  return (
    <>
      <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div className="w-full max-w-md space-y-8">
          <div>
            <img
              className="mx-auto h-12 w-auto"
              src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
              alt="Your Company"
            />
            <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
              Login to your account
            </h2>
          </div>
          <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
            <input type="hidden" name="remember" defaultValue="true" />
            <div className="-space-y-px rounded-md shadow-sm">
              <div>
                <label htmlFor="email-address" className="sr-only">
                  Email address
                </label>
                <input
                  id="email-address"
                  name="email"
                  type="email"
                  autoComplete="email"
                  required
                  className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
                  placeholder="Email address"
                  value={email}
                  onChange={(e) => {
                    setEmail(e.target.value)
                  }}
                />
              </div>
              <div>
                <label htmlFor="password" className="sr-only">
                  Password
                </label>
                <input
                  id="password"
                  name="password"
                  type="password"
                  autoComplete="current-password"
                  required
                  className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
                  placeholder="Password"
                  value={password}
                  onChange={(e) => {
                    setPassword(e.target.value)
                  }}
                />
              </div>
            </div>
            <div>
              <button
                type="submit"
                className="group relative flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
              >
                <span className="absolute inset-y-0 left-0 flex items-center pl-3">
                  <LockClosedIcon
                    className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
                    aria-hidden="true"
                  />
                </span>
                Login
              </button>
            </div>
          </form>
        </div>
      </div>
    </>
  )
}

Discussion

いつも投稿いただきありがとうございます!
Zennをよりご活用いただくため、2点ご案内をさせてください。

その1: Youtubeは、URLを行頭から記述することで記事に動画を埋め込むことができます。

https://youtu.be/PFlW4uvzttU

↓ 以下のように表示されます。

https://youtu.be/PFlW4uvzttU

その2: Zennの記事は検索サイトからの流入が多いです。ある程度の文章があったほうが検索サイトに載りやすく、ページを訪れた人にも興味を持ってもらえると思います。

ご参考になれば幸いです。

いつもお世話になっております!
アドバイスありがとうございます!!

ログインするとコメントできます