CloudSQLAdminPanel/public/scr/components/signin.js

SPA_RESOLVE_INIT = function ($el, $router) {
    const html = document.querySelector('html');
    const body = document.querySelector('body');

    html.className = 'index';
    body.className = 'mdui-theme-primary-blue mdui-theme-accent-light-blue index';
    mdui.JQ($el).empty();

    mdui.JQ($el).append(`
                <header class="mdui-appbar mdui-shadow-0">
                    <div class="mdui-toolbar mdui-color-theme">
                        <a class="mdui-typo-headline" href="#">CloudSQL Admin Panel</a>
                        <div class="mdui-toolbar-spacer"></div>
                        <a class="mdui-btn mdui-ripple mdui-ripple-white" href="#/signin">登陆</a>
                        <a class="mdui-btn mdui-ripple mdui-ripple-white" href="#/signup">注册</a>
                    </div>
                </header>
                <main style="height: 85%;">
                    <div class="mdui-container main-section">
                        <h2 class="mdui-typo-display-1 main-section-tittle">用户登录</h2>
                        <div class="mdui-container mdui-col-md-8 mdui-center main-sub-section">
                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row">
                                <i class="mdui-icon material-icons">person</i>
                                <input class="mdui-textfield-input" name="userid" type="text" placeholder="用户名/邮箱" />
                            </div>
                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row">
                                <i class="mdui-icon material-icons">lock</i>
                                <input class="mdui-textfield-input" name="password" type="password" placeholder="密码" />
                            </div>
                            <div class="mdui-col-md-6 mdui-center mdui-textfield main-input-row captcha-row">
                                <img src="http://admin.cloudsql.1473.cn/v1/captcha?${new Date().getTime()}">
                                <input class="mdui-textfield-input" name="captcha" type="text" placeholder="验证码" />
                            </div>
                            <div class="mdui-col-md-6 mdui-center mdui-typo main-a-row">
                                <a href="#/signup">还没有账户，点击注册</a>
                            </div>
                            <div class="mdui-col-md-6 mdui-center main-button-row">
                                <button class="mdui-btn mdui-btn-block mdui-color-theme-accent">登陆</button>
                            </div>
                        </div>
                    </div>
                </main>
                <footer>
                    <div class="footer-copyright">Copyright © 2016 - 2017 <a href="/">CloudSQL</a> All rights reserved.</div>
                </footer>
            `)

    //验证码刷新逻辑
    const captchaImg = document.querySelector('.captcha-row img');

    Utils.handleEvent('click', {
        onElement: captchaImg,
        withCallback: function () {
            this.src = `http://admin.cloudsql.1473.cn/v1/captcha?${new Date().getTime()}`; //加入当前时间以避免缓存
        }
    });

    /* captchaImg.addEventListener('click', function () {
        this.src = `http://admin.cloudsql.1473.cn/v1/captcha?${new Date().getTime()}`; //加入当前时间以避免缓存
    }, false); */

    //登陆逻辑
    const submitButton = document.querySelector('.main-button-row button');

    Utils.handleEvent('load', {
        onElement: submitButton,
        withCallback: function () {
            let signInUrl = 'http://admin.cloudsql.1473.cn/v1/signin',
                userId = document.querySelector('input[name=userid]').value,
                password = document.querySelector('input[name=password]').value,
                captchaCode = document.querySelector('input[name=captcha]').value,
                postData = `userId=${userId}&password=${password}&captcha=${captchaCode}`;

            Utils.ajaxPost(signInUrl, postData, function (response) {
                if (response.status == 'signedin') {
                    window.location.hash = response.url;
                } else {
                    mdui.snackbar({
                        message: response.info
                    });
                }
            })
        }
    });
}