【SvelteKit + Flowbite-svelte + svelte-icons】よくあるパスワードフォームを実装する

はじめに

SvelteKit + Flowbite-svelte
でよくあるパスワードフォームの実装をしました。
よく使うと思うので、記事にしておき、使うときにコピペしようと思いますw

アイコンには svelte-icons を使っています。

完成イメージ

• 目のマークをクリックすると、パスワードが表示される

Flowbite-svelte導入

1. svelte-addでtailwindcssのインストール

   // npm
   $ npx svelte-add@latest tailwindcss
   
   // yarn
   $ yarn -s run svelte-add@latest tailwindcss
   
   // pnpm
   $ pnpm dlx svelte-add@latest tailwindcss
   

2. 依存関係含めインストール

   // npm
   $ npm i -D flowbite flowbite-svelte classnames @popperjs/core
   
   // yarn
   $ yarn add flowbite flowbite-svelte classnames @popperjs/core
   
   // pnpm
   $ pnpm i -D flowbite flowbite-svelte classnames @popperjs/core
   

svelte-icons導入

// npm
$ npm i -D svelte-icons

// yarn
$ yarn add svelte-icons

// pnpm
$ pnpm i -D svelte-icons

実装

先にソースコードから

+page.svelte

<script lang="ts">
  import { Heading, Input, Label } from "flowbite-svelte";
  import FaRegEyeSlash from 'svelte-icons/fa/FaRegEyeSlash.svelte'
  import FaRegEye from 'svelte-icons/fa/FaRegEye.svelte'
  let email = ''
  let password = ''
  let passwordFormType: 'password' | 'text' = 'password'
  let viewPassword = false

  const clickHandler = (): void => {
    viewPassword = !viewPassword
    if (viewPassword) passwordFormType = 'text'
    else passwordFormType = 'password'
  }
</script>

<div class="h-full w-4/5 mx-auto mt-10 p-5 border bg-gray-100 rounded-lg">
  <form action="login">
    <div class="text-center">
      <Heading tag="h3">SignIn</Heading>
    </div>
    <Label for="email">email</Label>
    <Input
      id="email"
      bind:value={email}
      type="email"
    />

    <Label for="password">password</Label>
    <Input
      id="password"
      bind:value={password}
      type={passwordFormType}
    >
      <button type="button" class="h-1/2" slot="right" on:click={clickHandler}>
        {#if viewPassword}
          <FaRegEye />
          {:else}
          <FaRegEyeSlash />
        {/if}
      </button>
    </Input>
  </form>
</div>

目のアイコンの表示

<Input></Input>コンポーネントのslot="right"にボタンを入れています。

<Input
  id="password"
  bind:value={password}
  type={passwordFormType}
>
  <button type="button" class="h-1/2" slot="right" on:click={clickHandler}>
    {#if viewPassword}
      <FaRegEye />
    {:else}
      <FaRegEyeSlash />
    {/if}
  </button>
</Input>

これによりフォームの右側に目のアイコンを表示させることができます。

パスワード表示 / 非表示

1. パスワードフォームのtypeを変数に持っておきます。
   • 初期値: 'password'
   • 例のソースコードではpasswordFormType
2. アイコンの切り替え用にflagも定義しておきます。
3. 先ほど表示させたボタンのon:click属性で1.2.で定めた値を書き換えます

一部抜粋

<script lang="ts">
  let password = ""
  let passwordFormType: "password" | "text" = "password"
  const clickHandler = () => {
    viewPassword = !viewPassword
    if (viewPassword) passwordFormType = 'text'
    else passwordFormType = 'password'
  }
</script>

<Input type={passwordFormType} bind:value={password} >
    <button
        type="button"
        class="h-1/2"
        slot="right"
        on:click={clickHandler}>

これでフォーム横のアイコンをクリックしたときに
パスワードフォームのtypeが切り替わり、表示非表示を切り替えることができるでしょう