#はじめに
前回に引き続き、ユーザー登録機能を実装していきます。
①ユーザー登録希望者がユーザー登録ページから申請する。
→アカウントはこの時点で作成されるが、まだ無効の状態。ログインできない。
②申請内容がSNS管理者にメールで通知される。
③申請内容をSNS管理者がチェックする。
→管理者が問題ないと判断すればアカウントを有効化する。
④アカウントが有効化されると申請者に通知される。
今回で①の部分が完成します！！
完成しませんでした( ﾉД`)ｼｸｼｸ…道のりなげぇ～～～（執筆後追記）
#作り方（続き）
「入力フォームを追加」の続きから。
前回は Input、Date/TimePicker、Dropdown を使って、名前、メールアドレス、生年月日、学年の入力フォームを作成しました。
今回はパスワードから！
###パスワード
####パスワードポリシーの設定
入力フォームを作る前にパスワードポリシーを設定しましょう。
今回のパスワードポリシーはこんな感じにします。
■6文字以上
■1文字以上の数字を含める
■1文字以上の大文字アルファベットを含める
まず、Settings画面に移動し、Generalタブを選択します。
Privacy & Securityメニュー内の「Define a passeord policy」にチェックを入れると、こんな画面になります。
「Password minimum length」には「6」を入力し、「Require a number」と「Require a capital letter」にチェックを入れます。
これで今回のパスワードポリシーの設定は完了です！
ちなみに、一番下の「Require a non-alphanumeric character」にチェックを入れると、1文字以上の記号を含めることが必須になります。
####パスワードの入力フォームの作成
パスワードの入力フォームは「Input」を使います。
ドラッグアンドドロップし、名前を「Input パスワード」に変更。
「This input should not be empty」にチェックを入れ、Placeholderには「パスワードを入力してください」と書いておきます。
次に、Content formatを「Text」から「Password」に変更します。
こうすることで、ここに入力された情報をパスワードとして認識してくれます。
また、「Check the password while typing」にチェックを入れておきます。
すると、先ほど設定したパスワードポリシーを踏まえて、入力された文字がパスワードポリシーに反していないかチェックをしてくれます。すげえ！
今作った入力フォームをコピペして、パスワード（確認用）のところに配置します。
名前を「Input パスワード（確認用）」に変更しておきます。
####チェック機構の作成
ここでは、以下の観点からチェックを行い、NG判定が出れば警告文を表示するようにしたいと思います。
①「パスワード」に入力された内容がパスワードポリシーに反していないか
②「パスワード」で入力された内容と「パスワード（確認用）」で入力された内容が一致しているか
チェック機構の作り方は前回のメールアドレスのときと全く一緒なので、細かい説明は省略します。
まずは①の機能を実装します。
警告文を作り、「パスワード」の入力フォームの下に配置しておきます。
面倒であれば、新規作成するのではなく、メールアドレスのところで作った警告文をコピペしてもOKです笑。
今回は「パスワードは数字・大文字英字を各1文字以上含め、6文字以上に設定してください」と表示させます。
「This element is visible on page load」のチェックが外れていることを確認し、続いて「Conditional」タブに移動します。
「Define another condition」をクリックし、Whenの部分を「Input パスワード isn't valid」と設定します。
そこから「Select a property to change when true」のプルダウンから「This element is visible」を選択します。
チェックボックスが出てくるので、チェックを入れます。
終わり！！
続いて②の機能を実装します。
①と同様に警告文を作り、「パスワードが一致していません」と表示させるようにします。
「Conditional」タブのWhenの部分ですが、「Input パスワード's value is not Input パスワード（確認用）'s value」とします。
そのままですね笑。
これで②も完成！
Previewしてみるといい感じに動作していることが分かります。
###加入プラン
いくつかの選択肢の中から1つを選んでほしい！
そんなときに役に立つのが「Radio Buttons」です。
選択肢から1つ選ばせる系の機能として、前回紹介した「Dropdown」もあります。
個人的な感覚ですが、見栄えを考えると、選択肢が多い場合は「Dropdown」、片手で数えられるくらいなら「Radio Buttons」がいいのかなと思います。
というわけで作っていきましょう。
Design > Input forms > Radio Buttonsを選択し、ドラッグアンドドロップ。
名前は「RadioButtons 加入プラン」に変え、いつものように「This input should not be empty」にチェックを入れておきます。
今回はテスト的に「スタンダード」と「プレミアム」の二択から選んでもらえるようにしたいので、Choices(press Enter between each option)ボックスに「スタンダード(Enter)プレミアム」と入力します。
選択肢の作り方は「Dropdown」と同じですね。
##「ユーザー規約に同意しました」
ユーザー登録するときに必ずと言っていいほど出てくるチェックボックスを作ります。
「ユーザー規約に同意しました」の「ユーザー規約」のところにリンクが埋め込んであって、それをクリックするとユーザー規約ページに飛ぶみたいなパターン、よくありますよね。
今回はそれを作っていきます。
###下準備
ユーザー規約ページを作ります。
ページの作り方は前回触れていますので、参照してください。
「Page name」は「user_terms」としました。
こんな感じで作りました。適当です。
###チェックボックスの作成
user_registrationページに戻ります。
Design > Input forms > Checkboxを選択し、適当な場所にドラッグアンドドロップ。
名前を「Checkbox 規約同意」に変え、「This checkbox should be checked」にチェックを入れて終わり！
Labelの部分に「ユーザー規約に同意しました」といれてもいいんですが、それだとリンクを埋め込めないので（なぜか）、今回は別でテキストを用意します。
「...edit me...」は消しておきます。
###テキストの作成
Design > Input forms > Textからテキストを作成します。
テキストでは下記のように記述をすることで、任意の文字列にリンクを埋め込むことができます。
[u][url=（リンク先のURL）]文字列[/url][/u]
というわけで、とりあえずテキストに「[u][url=（リンク先のURL）]住民規約[/url][/u]に同意しました」と入れておきます。
（リンク先のURL）の部分を編集していきます。
外部のページであればそのURLを張り付けるだけでいいんですが、今回はアプリ内部のページに飛ばしたいので、少し工夫が必要です。
結論から言えば、設定はこんな感じになります。
「Website home URL」をInsert dynamic dataから入力し、その直後に、リンク先のページ名を記述します。
これで、アプリ内のページのリンクを埋め込むことができました。
しかし、今の状態では「住民規約」の部分に下線が引かれているだけで、リンクとして少し分かりづらくなっています。
Rich text editorから「住民規約」部分を選択し、青色に変えておきましょう。
終わり！！
#終わりに
今回はBubbleのInput forms機能のうち、新たに
・Radio Buttons
・Checkbox
の2つを使用しました。
これにて入力フォームの追加はすべて終了です！！
次回は「確認」ボタンの作成と確認用ポップアップの作成、Workflowの編集を行っていきます。
お楽しみに。