Bubbleの基本的な使い方（その6）ーパスワードリセット画面の作成

今回はノーコードツールBubbleを使って、パスワードリセット画面を作成します。
パスワードを忘れた方向けに、パスワードを１度リセットして再設定します。新しいパスワードを設定してログインできるまでをゴールとします。

パスワードをリセットする手順は下記のようになります。

①ログイン画面の「パスワードを忘れた方はこちら＞」をクリック。
②「パスワードのリセット画面」が表示されるので、メアドを入力する。
③メールを受信し、メール内のリンクをクリックすると「新しいパスワードの設定画面」に遷移するのでパスワードを設定。
④ログイン画面から新しいパスワードを入力してログイン

また、Bubbleでの作成手順は下記のようになります。

①ログイン画面のデザインを作成
②新パスワード設定画面のデザインを作成
　（ポップアップ表示、アラート表示もあわせて作成）
③上記画面のワークフローをそれぞれ設定

１．ログイン画面

１−１．テキストリンク追加

はじめにログイン画面に「パスワードを忘れた方はこちら＞」のテキストリンクを追加します。
loginページをデザインモードで開いてテキストを追加します。
作成したテキストリンクは後でワークフローを設定します。

１−２．ログイン画面にポップアップ表示追加

次に「パスワードを忘れた方はこちら＞」を押された時にポップアップ表示する画面をログイン画面内に作成します。
UI BuilderメニューのContainersからPopupを選択、画面内にドロッグしてポップアップを追加します。

＊デザイン画面上で通常Popupエレメントは非表示になっています。表示させたい場合は、Elements treeから目のアイコンを押して表示・非表示を切り替えます。

ポップアップの名称を「Popup A」から「Popup パスワードリセット」に変更します。
下記のようにタイトル・説明文・入力フォーム・ボタンを設置します。

１−３．ログイン画面にアラートメッセージ追加

「パスワードのリセット」画面で「メール送信」ボタンを押した時に表示される、アラートメッセージを追加します。
Visual Elementsから「Alert」を画面に追加して、下記のようにテキストを変更します。

２．新パスワード設定画面

２−１．新パスワード設定画面の作成

次に　パスワードリセットメール内のリンクをクリックした時に表示される、「新パスワード設定画面」を作成します。
あらかじめ用意されている「reset_pw」ページのデザイン画面を利用します。
デフォルトで作成されているヘッダー・フッターなど不要なエレメントは削除して、下記のように各エレメントを配置します。

２−１．Alert「新しいパスワードに変更しました」作成

パスワード変更画面の「確認」ボタンを押した時に表示するAlertを作成します。
下記の通りAlertエレメントを配置します。

３．ワークフロー設定

各デザイン画面にワークフローを設定していきます。

３−１．ワークフロー設定（パスワードを忘れた方はこちらのリンク）

まず、ログイン画面の「パスワードを忘れた方はこちら＞」リンクが押されたら、ポップアップ表示するようにワークフローを設定します。
「パスワードを忘れた方はこちら＞」のプロパティからワークフロー画面へ移動します。
Step1に「Show」を設定し、「Show」のプロパティでElementを「Popup パスワードリセット」画面に設定します。

３−２．ワークフロー設定（リセットメール送信）

次にログイン画面のポップアップ「パスワードのリセット」画面の「メール送信」ボタンが押された時のワークフローを設定します。
■STEP1：Send password reset email
■STEP2：Hide popup パスワードリセット
■STEP3：Show message in Alert パスワードリセットメールを送信しました。

■STEP1：Send password reset emailのプロパティーは下記を設定します。

３−３．ワークフロー設定（新パスワード設定・確認）

次に新パスワード設定画面の「確認」ボタンが押された時のワークフローです。
下記の通りReset passwordを設定し、Go to pageにloginページを指定します。

これで各ワークフローの設定が完了しました。
あとは下記の一連の流れを動作確認をして実装完了になります。

①ログイン画面の「パスワードを忘れた方はこちら＞」をクリック。
②「パスワードのリセット画面」が表示されるので、メアドを入力する。
③メールを受信し、メール内のリンクをクリックすると「新しいパスワードの設定画面」に遷移するのでパスワードを設定。
④ログイン画面から新しいパスワードを入力してログイン

今回はここまでです。
みなさんもパスワードリセット機能を実際に作成してBubbleアプリに実装してみてくださいね。

ちょっと気になった、更に知りたくなったという方は、
ぜひ、気軽に相談できるMentaをしております。

Mentaでメンターサポート
https://menta.work/user/22914

ストリートアカデミーで毎月講座も開催しています
https://www.street-academy.com/steachers/198346

また、Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san

webデザイナーもくもく制作サロンへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec

もくもく制作サロンの入会
サロンではチャットで制作の質問を受け付けたり、相談会を開いて直接現役のデザイナーになんでも聞けるコミュニティです。

月額500円となります。

入会条件
業界未経験、経験者、Webデザインエンジニアに興味がある方まで！
誰でも匿名参加OKです。

参加方法
こちらのWebデザイナーフリーランスマガジンの購読購入をいただき、下記にてSlackコミュニティにご招待させていただきます。

https://note.com/hamasan918/m/me6f7be9ad4d8