---
title: パスワード変更画面
screen: ./change-password.png?highlight=[[11,7,204,33],[92,52,222,50],[91,120,274,41],[91,162,275,40],[145,215,183,53]]
---

# 概要

パスワードを変更するための画面。
ユーザーが任意のタイミングで変更するための画面ではなく、パスワード期限切れ後にログインした際に強制的に変更させるための画面。

```uiflows
[ログイン画面](./index.html)
期限切れパスワードでログイン
==> パスワード変更画面

[パスワード変更画面]
正しいパスワード変更
==> ログイン画面へ自動遷移前にアクセスしようとした画面
==> 商品画面
設定ルール違反で変更
==> パスワード変更画面（設定ルール違反）

[商品画面](../product/index.html)
```

# 基本仕様

-   HTML の form の入力欄の入力値が送信される。
-   入力チェックは、フロントエンドでは入力済みかどうかだけ判別し、保存してログインボタンの有効/無効状態を切り替える。
-   サーバーサイドでのエラー時は、サーバーサイドから返されたエラーメッセージを表示する

# 機能一覧

-   [1.コンテンツタイトル](#1.コンテンツタイトル)
-   [2.パスワード設定ルール](#2.パスワード設定ルール)
-   [3.新パスワード入力欄](#3.新パスワード入力欄)
-   [4.新パスワード確認用入力欄](#4.新パスワード確認用入力欄)
-   [5.保存してログインボタン](#5.保存してログインボタン)

# 機能詳細

## 1.コンテンツタイトル

この画面のタイトルを表示する。

## 2.パスワード設定ルール

パスワードの設定ルールを表示する。

## 3.新パスワード入力欄

新しいパスワードを入力させる欄。

### input 要素の属性値

| 属性名 | 値         |
| :----- | :--------- |
| `type` | `password` |
| `name` | `password` |

## 4.新パスワード確認用入力欄

新しいパスワードを設定する際に、ミスを減らすために同じものをもう一度入力させる欄。

-   type 属性を`password`とし、入力された文字列をマスキングする。

### input 要素の属性値

| 属性名 | 値            |
| :----- | :------------ |
| `type` | `password`    |
| `name` | `newPassword` |

## 5.保存してログインボタン

入力した内容をサーバーに送り、保存するボタン。

```uiflows
[保存してログインボタン]
クリック
==> HTML Form送信
```

### input 要素の属性値

| 属性名 | 値       |
| :----- | :------- |
| `type` | `submit` |

### 設定ルール

英字・数字・記号をすべて含んだ、半角 8 文字以上の文字列