From 5a7e15419e97fcd07a1a6edf3fa5958be80fe877 Mon Sep 17 00:00:00 2001
From: Ting-Jun Wang <levi900227@gmail.com>
Date: Sat, 16 Jan 2021 22:34:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=E7=82=BA=E8=87=AA?=
 =?UTF-8?q?=E8=A8=82=E7=99=BB=E5=85=A5Facebook=E6=8C=89=E9=88=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html   | 13 ++++++++-----
 js/index.vue | 21 +++++++++++++++++----
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index d08ce62..206c0c9 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
 
 
 
-
+        <div id='main'>
         <!-- Navigation-->
         <nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
             <div class="container">
@@ -32,9 +32,10 @@
                 <div class="collapse navbar-collapse" id="navbarResponsive">
                     <ul class="navbar-nav ml-auto">
                         <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="https://github.com/snsd0805/NCNU_Course">Github</a></li>
-                        <li class="nav-item mx-0 mx-lg-1">
-                            <div class="fb-login-button" data-width="" data-size="small" data-button-type="login_with" data-layout="rounded" data-auto-logout-link="true" data-use-continue-as="true"></div>
-                        </li>
+                        
+                        <li v-if="token==''" class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#">Facebook登入</a></li>
+                        <li v-if="token!=''" class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#" v-on:click="logout()">登出Facebook—{{user}}</a></li>
+
                     </ul>
                 </div>
             </div>
@@ -52,7 +53,8 @@
                     <div class="divider-custom-line"></div>
                 </div>
                 <div class="divider-custom">
-                    <div class=><button class="btn btn-info" @click="saveCourseTable()">儲存</button></div>
+                    <div v-if="token!=''"><button class="btn btn-info" @click="saveCourseTable()">儲存</button></div>
+                    <div v-if="token==''"><button class="btn btn-info" @click="saveCourseTable()">儲存(必須登入Facebook帳號)</button></div>
                 </div>
                 <div class="row">
                     <div class="col-lg-3">
@@ -112,6 +114,7 @@
                 </div>
             </div>
         </div>
+        </div>
 
         
         <!-- Copyright Section-->
diff --git a/js/index.vue b/js/index.vue
index a9f3dda..bf0d402 100644
--- a/js/index.vue
+++ b/js/index.vue
@@ -1,11 +1,12 @@
 var vm = new Vue({
-    el: "#table",
+    el: "#main",
     data: {
         'courses': [],
         'selectCourses': [],
         'departments': [],
         'selectDepartment': '',
         'foundName': "",
+        "user": "",
         'token': ""
     },
     created() {
@@ -47,6 +48,17 @@ var vm = new Vue({
             })
     },
     methods: {
+        'login': function(){
+            FB.login(function(){
+                vm.getCourseTable()
+            })
+        },
+        'logout': function(){
+            FB.logout(function(response) {
+                vm.user = ""
+                vm.token = ""
+            });
+        },
         'getCourseTable': function(){
             FB.getLoginStatus(function(response) {
                 vm.statusChangeCallback(response);
@@ -55,6 +67,9 @@ var vm = new Vue({
         'statusChangeCallback': function(response){
             if(response.status == "connected"){
                 this.token = response.authResponse.accessToken
+
+                FB.api('/me', function(response){vm.user = response.name})
+
                 fetch('https://api.snsd0805.com/courseTable?token='+this.token)
                     .then(function(response){
                         return response.json()
@@ -94,9 +109,7 @@ var vm = new Vue({
                     })
 
             }else{
-                FB.login(function(response){
-                    vm.getCourseTable()
-                })
+                this.login()
             }
         },
         'getTime': function(timeString){