yeungalan
/
OAuth-SSO


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
							<!DOCTYPE html>
<html>

<head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

    <!-- Site Properties -->
    <title>Login</title>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha256-t8GepnyPmw9t+foMh3mKNvcorqNHamSKtKRxxpUEgFI=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q=" crossorigin="anonymous" />
    <style type="text/css">
        body {
            background-color: #e3eaed;
        }
        
        body>.grid {
            height: 100%;
        }
        
        .image {
            margin-top: -100px;
        }
        
        .column {
            max-width: 450px;
        }
        
        .background-top {
            width: 100%;
            height: 290px;
            background-color: #0079ad;
            border-bottom: 1px solid #fff;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -100;
        }
    </style>
</head>

<body>
    <div class="background-top"> </div>

    <div class="ui middle aligned center aligned grid">
        <div class="column" id="login">
            <h2 class="ui teal image header">
                <img src="asset/cuhk.png" class="image" style="width:100%">
            </h2>
            <form class="ui large form" action="/chkLogin" method="GET">
                <div class="ui segment">
                    <div class="field">
                        <h3 class="ui header">Login to {{service-name}}</h3>
                        <p style="text-align: left">
                            Login with<br> Student: Student-ID@link.cuhk.edu.hk<br>Staff: alias@cuhk.edu.hk<br>
                        </p>
                    </div>
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="email" placeholder="E-mail address">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input type="password" name="password" placeholder="Password">
                        </div>
                    </div>
                    <div class="ui fluid large blue submit button" v-html="$t('message.login')"></div>
                </div>

                <div class="ui error message"></div>

            </form>

            <div class="ui message">
                <img class="ui small image" src="asset/{{service-image}}">
            </div>

            <div class="ui dropdown">
                <div class="text">English (en-US)</div>
                <i class="dropdown icon"></i>
                <div class="menu">
                    <div class="item">English (en-US)</div>
                    <div class="item">中文 (zh-TW)</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const messages = {
        en: {
            message: {
                login: 'login',
            }
        },
        tw: {
            message: {
                login: '登入',
            }
        },
    }

    const i18n = new VueI18n({
        locale: 'tw',
        messages,
    })
    new Vue({
        i18n
    }).$mount('#login')


    $(document)
        .ready(function() {
            $('.ui.form')
                .form({
                    fields: {
                        email: {
                            identifier: 'email',
                            rules: [{
                                type: 'empty',
                                prompt: 'Please enter your e-mail'
                            }, {
                                type: 'email',
                                prompt: 'Please enter a valid e-mail'
                            }]
                        },
                        password: {
                            identifier: 'password',
                            rules: [{
                                type: 'empty',
                                prompt: 'Please enter your password'
                            }, {
                                type: 'length[6]',
                                prompt: 'Your password must be at least 6 characters'
                            }]
                        }
                    }
                });
        });

    $('.ui.dropdown')
        .dropdown();
</script>

</html>