<?php 
session_start(); session_unset(); session_destroy();
session_start(); 
?>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>入場簽到系統</title>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    	<link rel="shortcut icon" href="./images/icon.png" type="image/x-icon">
    	<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
		<link href="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.min.css" rel="stylesheet">
		  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		  <script src="https://unpkg.com/vue-toasted"></script>
		  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
		  <script
		  src="https://code.jquery.com/jquery-3.3.1.min.js"
		  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
		  crossorigin="anonymous"></script>

		  <style>
		  	.loading {
		  		position: fixed;
		  		top: 0;
		  		left: 0;
		  		height: 100vh;
		  		width: 100vw;
		  		background: white;
		  		z-index: 1000;
		  	}
		  	[v-cloak] {
		  		display:none;
		  	}
		  	#app {
		  		background-image: linear-gradient(to bottom right, #ef4a66, #c81933); 
		  		width: 100vw;
		  		min-height: 100vh;
		  	}
		  	.logo {
		  		/*background-image: linear-gradient(to bottom right, rgba(255,255,255,0.1) 0%, rgba(100,100,100,0.05) 10%, rgba(255,255,255,0.1) 30%, rgba(255,255,255,0.25) 70%, rgba(255,255,255,0.4) 85%, rgba(255,255,255,0.6) 100%);*/
		  		background-color: white;
		  		box-shadow: 0px 1px 3px 0px rgba(0,0,0,.5),
		  								2px 3px 7px -1px rgba(0,0,0,.087),
		  								1px 1px 6px 2px rgba(0,0,0,.026),
		  								1px 2px 7px 3px rgba(0,0,0,.035);
		  		border-radius: 50%;
		  		transition: .3s all ease;
		  		-webkit-animation-name: roll; /* Safari 4.0 - 8.0 */
				  -webkit-animation-duration: .3s; /* Safari 4.0 - 8.0 */
				  -webkit-animation-timing-function: ease-out; /* Safari 4.0 - 8.0 */
				  -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
				  animation-name: roll;
				  animation-duration: .3s;
				  animation-timing-function: ease-out;
				  animation-delay: 1s;
		  	}
		  	.theme--light.v-text-field--solo>.v-input__control>.v-input__slot {
		  		border-radius: 50px;
		  	}
		  	@keyframes roll {
		  		0% {transform: rotate(0deg);}
		  		20% {transform: rotate(-3deg);}
		  		40% {transform: rotate(10deg);}
		  		60% {transform: rotate(-5deg);}
		  		80% {transform: rotate(5deg);}
		  		100% {transform: rotate(0deg);}
		  	}
		  	@-webkit-keyframes roll {
		  		0% {transform: rotate(0deg);}
		  		20% {transform: rotate(-3deg);}
		  		40% {transform: rotate(5deg);}
		  		60% {transform: rotate(-5deg);}
		  		80% {transform: rotate(5deg);}
		  		100% {transform: rotate(0deg);}
		  	}
			</style>
	</head>

	<body>
	<div v-cloak class="cloak">
		<div class="subheading">抱歉！你的瀏覽器已停用了JavaScript功能，請啟用JavaScript後重新整理頁面。</div>
	</div>
    <div id="app">
      <div id="qrcode">
	    <v-container grid-list-xl fluid pt-5>
	      <v-layout row wrap text-xs-center mt-5>
	        <v-flex xs12>
		        <v-avatar size="250px" class="logo text-xs-center"> 
	        		<v-img class="mx-auto" aspect-ratio="1" width="100%" cover src="./images/icon.png" alt="LOGO">
		        </v-avatar>
          </v-flex>

          <v-flex xs12 sm8 md6 lg4 offset-sm2 offset-md3 offset-lg4>
            <h1 class="headline font-weight-bold white--text pb-2" style="text-shadow: 1px 1px 3px #666;">入場簽到系統</h1>
            <v-text-field
		          prepend-inner-icon="person" 
		          v-model="login.username" 
		          label="用戶名稱"
		          placeholder="用戶名稱"
		          autocomplete="username"
		          class="pb-2"
		          solo
		          required
		          hide-details
		          @keypress.enter="focusPassword"
		        ></v-text-field>
		        <v-text-field 
		          prepend-inner-icon="lock" 
		          v-model="login.password" 
		          label="輸入密碼"
		          placeholder="輸入密碼"
		          autocomplete="current-password"
		          class="pb-2"
		          type="password"
		          solo
		          required
		          hide-details
		          ref="password"
		          @keypress.enter="userLogin"
		        ></v-text-field>
		        <v-btn color='white' round style="color: #c81933; height: 42px" block :loading="login.loading" @click="userLogin">登入</v-btn>
	        </v-flex>
	      </v-layout>
	      <v-layout row wrap>
	        <v-flex xs12>
	          <!-- <div class="subheading mb-2" v-html="$t('message.scanner.instructions')"></div> -->
	          <!-- <div class="subheading mb-2" v-html="$t('message.scanner.findCode')"></div> -->
	        </v-flex>
	      </v-layout>
	      
	    </v-container>
	  </div>
	</div>
		<!-- vue script -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vuetify@1.x/dist/vuetify.js"></script>
		<script>
		"use strict";
		(function() {
	  	Vue.use(Toasted);
			var app = new Vue({
			  el: '#app',
			  data: {
			  	login: {
			  		username: null,
			  		password: null,
			  		loading: false,
			  	}
			  },
			  methods: {
			  	focusPassword () {
			  		this.$refs.password.focus();
			  	},
			  	userLogin () {
			  		this.login.loading = true;
						this.$vuetify.goTo(0);
						$.post('https://redirect.1ticks.com/redirect/public/api/sanrio_hkha/login', {
							username: this.login.username,
	            password: this.login.password
	          }).then((res) => {
							if (res.result === 'success') {
								this.login.loading = true;
								console.log(res.data);
								$.post("./setSession.php", {
									_dt: Date.now(),
									_t: res.data.token,
									_i: res.data.id
								}).then(response => {
									console.log(response);
									location.assign("./scanner.php");
									this.login.loading = false;
								});
							}
						}).catch(err => {
							this.login.loading = false;
							if (err.status === 403) {
			        	swal("登入失敗", "帳號電郵或密碼不正確。", 'error');
							} else {
								console.error(err);
			        	swal("登入錯誤", "未知錯誤 - "+err.message, 'error');
							}
						});
			  	},
			  }
			});
		})();
		</script>
	</body>
</html>
