yeungalan
/
OAuth-SSO


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!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">
                <div class="ui segment">
                    <div class="field">
                        <h3 class="ui header" style="text-align: left">Error!</h3>
                        <p style="text-align: left">An error occurred. Contact your administrator for more information.<br>Error message :</p>
                        <p style="text-align: left">
                            {{error}}
                        </p>
                        <br><br><br><br><br>
                    </div>
                </div>

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

            </form>

            <div class="ui message">
                <img class="ui small image" src="asset/matlab.svg">
            </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')
</script>

</html>