焼け石に肉

新米プログラマの学習記録日記です。Scalaに興味があるので、ScalaとPlay Frameworkの勉強メモを残していこうと思います。

【Play Framework】Play FrameworkとReactで何か作ってみる Part3【React】

前回の続きです。

ログイン画面を作成し、ログイン処理まで実装しました。
このログイン画面のフォームをReactで生成してみました。

ログイン画面イメージ

f:id:julius_hs:20180330003727j:plain


ボタンやテキスト間の幅が狭いですが、細かいデザインは一旦無視しています。
メールアドレスとパスワードの入力と、ログイン保持のチェックボックスを配置しています。
ログインボタン下のテキストとリンクは、Reactでは生成していません。

login.scala.html

@import b3.vertical.fieldConstructor

@(loginForm: Form[Login], rememberme: Form[Boolean])(implicit messages: Messages, flash: Flash, request: RequestHeader)

@main(Messages("Login"), None) {
<div class="centeritems mdl-grid">
    <div class="mdl-layout-spacer"></div>
        <div class="mdl-cell mdl-cell--4-col">
            <h1>@Messages("LogIn")</h1>

            @loginForm.globalError.map { error =>
                <div class="alert alert-warning" role="alert">
                    @error.message
                </div>
            }

            <!-- ここにフォームを描画 -->
            <div id="signIn"></div>

            <div>
                <p>@Messages("AreYouNewUser") <a href="@routes.SignUpController.index()">@Messages("SignUp")</a></p>
            </div>
        </div>
    <div class="mdl-layout-spacer"></div>
</div>

<script type="text/javascript">
    $('#loginSubmit').click(function(){
        var label = $('label.mdl-js-checkbox');
        var hasClass = label.hasClass('is-checked')

        if(hasClass){
            $('input.mdl-checkbox__input').val(true)
        } else {
            $('input.mdl-checkbox__input').val(false)
        }

    });
</script>

<script type="text/jsx">
var FormApp = React.createClass({
    getInitialState: function () {
        return {
            data: {
                email: '',
                password: '',
                rememberMe: ''
            }
        };
    },

    handleChange: function (event) {
        var data = this.state.data;

        switch (event.target.name) {
            case 'email':
            data.email = event.target.value;
            break;
            case 'password':
            data.password = event.target.value;
            break;
            case 'rememberMe':
            data.password = event.target.value;
            break;
        }

        this.setState({
            data: data
        });
    },

    render: function () {
        return (
            @b3.formCSRF(routes.AuthController.login()) {
                <div>
                    <div className="mdl-textfield mdl-js-textfield">
                        <input name="@loginForm("email").id" className="mdl-textfield__input" type="text" value={this.state.email} onChange={this.handleChange} />
                        <label className="mdl-textfield__label" >@Messages("Email")</label>
                    </div>
                </div>
                <div>
                    <div className="mdl-textfield mdl-js-textfield">
                        <input name="@loginForm("password").id" className="mdl-textfield__input" type="password" value={this.state.password} onChange={this.handleChange} />
                        <label className="mdl-textfield__label" >@Messages("Password")</label>
                    </div>
                </div>
                <div>
                    <div>
                        <label className = "mdl-checkbox mdl-js-checkbox">
                            <input name="@rememberme("rememberme").id" type = "checkbox" value={this.state.password} onChange={this.handleChange} className = "mdl-checkbox__input" />
                            <span className = "mdl-checkbox__label">@Messages("RememberMe")</span>
                        </label>
                    </div>
                </div>

                <button id="loginSubmit" type="submit" className="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                    @Messages("LogIn")
                </button>

            }
        );
    }

});

React.render(<FormApp />, document.getElementById('signIn'));
</script>
}


Playのビューテンプレートの話は省略して、Reactを使用している部分を説明します。

script type="text/jsx" 以下で、フォームを作成し、フォームを描画しています。

Reactの書き方はものすごく汚い状態になってしまっているので改善の余地はありますが、とりあえず、Reactで生成することはできました。


次回も、Reactを使ったビューについて書きたいと思います。