#はじめに
前回に引き続き、ユーザー登録機能を実装していきます。

①ユーザー登録希望者がユーザー登録ページから申請する。
　→アカウントはこの時点で作成されるが、まだ無効の状態。ログインできない。
②申請内容がSNS管理者にメールで通知される。
③申請内容をSNS管理者がチェックする。
　→管理者が問題ないと判断すればアカウントを有効化する。
④アカウントが有効化されると申請者に通知される。

~~今回でようやく①の部分が完成します！！~~
完成しませんでした( ﾉД`)ｼｸｼｸ…「まだ無効の状態」を判定するフラグの設定はまた後日…（執筆後追記）

#作り方（続き）
前回で入力フォームの配置が完了しました。
今回は入力フォームに入力された情報でユーザー登録（サインアップ）処理を行うところまで紹介します。

##確認ポップアップ
全ての項目の入力が完了したら、その内容を確認できるポップアップを表示させたいと思います。
ポップアップの作り方は湯婆婆を実装したときに紹介したので、そちらを参照してください。
ポップアップの名前は「Popup 入力内容確認」にしておきます。

完成図はこんな感じです。

見ればわかるInsert Dyanamic dataフル活用！
「OK」ボタンは後で使うので、一応配置しておきます。

初見の機能だけ解説します。
生年月日のところで出てくる「:formatted as 2021年01月30日」の部分です。
「Date/TimePicker」で取得した日付情報は「Jan 30,2021 12:00 am」というような形式で認識されています。
時間の情報はデフォルトで12:00 amが設定されるようです。
なので、単に「Date/TimePicker 生年月日's value」と入れておくとそのままの形で出てきてしまい、え、Janって何月だっけ？時間まで入力した覚えないんだけど？とユーザーを困らせてしまいます。

そのままの形式で出てこられても困る…そんなときに役に立つのが「:formatted as」です。
今回は「yyyy年mm月dd日」形式で出したいと思います。

「Date/TimePicker 生年月日's value」の後にさらに「:formatted as mm/dd/yy」を選択します（mm/dd/yyの部分には作業日の年月日が反映されています）。
Data Formattingウィンドウが出てきたところで、「Format type」を「Custom」に切り替えます。
さらに「Custom format」に「yyyy年mm月dd日」と入力します。

終わり！！

##「確認」ボタンの作成
ポップアップの外をクリックしてユーザー登録ページの編集画面に戻り、「確認」ボタンを配置します。
「確認」ボタンを押すと先ほど作ったポップアップが表示されるイメージです。

ただボタンを作ってWorkflow設定して、、でもいいんですが、それだと入力必須の項目が入力されていない状態でもポップアップに遷移できてしまいます。
それを防ぐため、「すべての項目を入力したら現れるボタン」にしたいと思います。
前回警告文を作ったときの要領と同じです。

###とりあえずボタンを作る
ボタンを作り、名前を「Button 確認」にしておきます。
また、「This element is visible on page load」のチェックを外しておきます。

###Conditional設定
「Conditional」タブに移動し、こんな感じで設定します。

とりあえず「（入力フォーム）is valid」にしとけばいいんですが笑、ポイントはパスワードのところです。
「Input パスワード's value is valid」と「Input パスワード's value is Input パスワード（確認用）'s value」という2つの条件を入れています。
「Input パスワード's value is Input パスワード（確認用）'s value」は前回パスワードのところで作った警告文の条件の逆ですね。
これによって、前回作った警告文がちゃんと消えないと「確認」ボタンが表示されないようになります。

###Workflow設定
「Appearance」タブに戻り、「Start/Edit workflow」をクリックします。
Workflow編集画面に飛ぶので、「When Button 確認 is clicked」の下の「Click here to add an action...」からElement Actions > Showを選択し、「Popup 入力内容確認」が表示されるように設定します。

この辺りの設定は湯婆婆のときもやりましたね。

それではPreviewを確認してみましょう。
お～～～いい感じ！！
「OK」ボタンをぽちっとな。・・・何も起こらないようだ。

##ユーザー登録（サインアップ）処理
「OK」ボタンが押されるとユーザー登録処理がキックされるようにします。

###Workflow設定
わざわざDesign画面でポップアップ表示させて「OK」ボタン選択してそこからWorkflowに飛んで、、というのは手間なので（それでも全然いいです）、今回は直接Workflow画面から「OK」ボタンのWorkflowを設定します。

Click here to add an event... > Elements > An element is clickedを選択。
設定ウィンドウが出てくるので「Element」のプルダウンから「Button OK」を選択します。

####Sign the user up
下の「Click here to add an action...」からAccount > Sign the user upをクリックします。
また設定ウィンドウが出てくるので、まずはこんな感じで設定しておきます。

しかし、このままだと登録される情報はメールアドレスとパスワードのみになってしまいます。
というわけで、「Change another field」をクリックします。
「Click」と書いてある部分をクリックすると「Create a new field」と表示されるので、こんな感じで設定し、「CREATE」。

「Name」というフィールドをtext（文字列）型で作成しますよ～ということになります。

このField typeになんの意味があるの？と思われた方。
例えば、コンピュータにとってtext（文字列）の「1」とnumber（数字）の「1」は全く意味が異なることを理解してください。
「1+1」という計算をコンピュータにさせるとします。もし「1」が文字列として認識されているなら、計算結果は「1+1」になります。一方、「1」が数字として認識されているなら、計算結果は「2」になります。

さてさて、「Name = 」の表示がされたところで、「Name = Input 名前's value」と設定します。
Input 名前に入力された情報が、Nameフィールドの中に（文字列型で）格納されるよ～という設定になります。

他の入力フォームについても同様に設定していきましょう。
BirthdayのFirld typeはdate、それ以外はtextでOKです。

終わり！！

####ページ遷移
ユーザー登録のWorkflowは設定しましたが、ユーザー登録はあくまで内部的な処理です。
画面遷移などを行わない限り、ユーザーからは何も起こっていないように見えます。

というわけで、簡単にユーザー登録後に画面遷移をさせます。
まずは新規ページの作成（説明は省略します）。
ページ名は「after_signup」にしました。

編集が終わったら「user_registration」ページに戻り、Workflow画面にいきます。
※Workflowはページ単位での設定になります。「user_registration」ページに戻らずにWorkflow画面に言った場合、「あれ？？さっき作ったWorkflow全部消えてない？？」と焦る羽目になります。

「When Button OK is clicked」配下のWorkflowを追加したいので、先ほど作った「Sign the user up」の横の「Click here to add an action...」をクリック。
Navigation > Go to page...をクリックし、Destinationのプルダウンから「after_signup」を選択します。

終わり！！

##indexページからのページ遷移
index > user_registrationへのページ遷移設定をしていなかった！！~~完全に忘れていました。~~

「ユーザー登録」ボタンが押されたらユーザー登録ページに遷移するようにします。
先ほどの手順と同様です。

#終わりに
ユーザー登録部分の処理は以上になります！
お疲れ様でした！

次回はPreviewから実際にユーザー登録の一連の流れをテストし、処理がきちんと行われているか検証するところから始めます。