From 57dfffcc9d9649fab359687c18329353a497f417 Mon Sep 17 00:00:00 2001
From: lee-soo-heon <sooheon45@uengine.org>
Date: Fri, 27 Sep 2019 14:50:44 +0900
Subject: [PATCH] login btn

---
 package-lock.json                       | 26 +++++++++
 package.json                            |  3 +
 public/index.html                       |  2 +
 src/components/marketing/ProductAds.vue | 13 +++--
 src/components/oauth/Login.vue          | 78 +++++++++++++------------
 5 files changed, 80 insertions(+), 42 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eecf995..3fc53fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,11 +37,37 @@
       "resolved": "https://registry.npmjs.org/@chenfengyuan/vue-number-input/-/vue-number-input-1.1.1.tgz",
       "integrity": "sha512-e4h1FOSn81qntfHbtHIeyg9hhSuzVUyEJWzJdliGKaGufHuJSe+aEFgMluD76cptGbzX+ta9ZLg4T8uEZj9VGw=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz",
+      "integrity": "sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q=="
+    },
     "@fortawesome/fontawesome-free": {
       "version": "5.11.2",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.11.2.tgz",
       "integrity": "sha512-XiUPoS79r1G7PcpnNtq85TJ7inJWe0v+b5oZJZKb0pGHNIV6+UiNeQWiFGmuQ0aj7GEhnD/v9iqxIsjuRKtEnQ=="
     },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.25",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz",
+      "integrity": "sha512-MotKnn53JKqbkLQiwcZSBJVYtTgIKFbh7B8+kd05TSnfKYPFmjKKI59o2fpz5t0Hzl35vVGU6+N4twoOpZUrqA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.25"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.11.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz",
+      "integrity": "sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.25"
+      }
+    },
+    "@fortawesome/vue-fontawesome": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.7.tgz",
+      "integrity": "sha512-YCw2Q2m4fxzyFsPOH3uDYMoJztTD+pT+AAyse4LFpbdrBg+r8ueaVT8BFnXEjrGwMDJJeXrwJ5AOC6q/JWBI4w=="
+    },
     "@hapi/address": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz",
diff --git a/package.json b/package.json
index 437a42e..ae9bd6f 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,9 @@
   },
   "dependencies": {
     "@chenfengyuan/vue-number-input": "^1.1.1",
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/vue-fontawesome": "^0.1.7",
     "axios": "^0.19.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "jwt-decode": "^2.2.0",
diff --git a/public/index.html b/public/index.html
index a5a9aa4..18bcc8f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,6 +14,8 @@
     <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+    <script src="https://use.fontawesome.com/0a7be99bc1.js"></script>
+
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
   </head>
diff --git a/src/components/marketing/ProductAds.vue b/src/components/marketing/ProductAds.vue
index 64cd587..6fbe18f 100644
--- a/src/components/marketing/ProductAds.vue
+++ b/src/components/marketing/ProductAds.vue
@@ -1,7 +1,9 @@
 <template>
        <v-card flat width="30%" height="30%">
                 <transition-group  tag="div">
-                    <div v-for="i in [currentIndex]" :key="i">
+                    <div
+                            v-for="i in [currentIndex]" :key="i"
+                    >
                         <product
                                 v-model=currentProduct
                         ></product>
@@ -20,14 +22,15 @@
             };
         },
 
-        mounted: function() {
-            this.startSlide();
-            this.getProdList();
+        mounted() {
+                this.startSlide();
+                this.getProdList();
+
         },
 
         methods: {
             startSlide: function() {
-                this.timer = setInterval(this.next, 4000);
+                this.timer = setInterval(this.next, 1500);
             },
             next: function() {
                 this.currentIndex += 1;
diff --git a/src/components/oauth/Login.vue b/src/components/oauth/Login.vue
index ca6b610..5322593 100644
--- a/src/components/oauth/Login.vue
+++ b/src/components/oauth/Login.vue
@@ -30,24 +30,44 @@
         </v-card-text>
 
         <v-card-actions style="padding-bottom: 10px;">
-            <v-btn block  color="green" @click="login">Login</v-btn>
+            <v-btn block color="green" style="color: white" @click="login">Login</v-btn>
         </v-card-actions>
+        <v-row no-gutters>
+            <v-col cols="8"
+                   md="5"
+                   style="margin-top: 10px;">
+                <v-divider></v-divider>
+            </v-col>
+            <v-col cols="12"
+                   md="2"
+                   align="center"
+                   style="color: lightgrey">
+                or
+            </v-col>
+            <v-col cols="8"
+                   md="5"
+                   style="margin-top: 10px;">
+                <v-divider></v-divider>
+            </v-col>
+        </v-row>
+
 
-        <v-divider></v-divider>
         <v-card flat>
-            <v-col  justify="center" align="center" >
+            <v-col justify="center" align="center">
                 <v-btn
                         color="#3c82f7"
-                        style="width: 200px; font-size: 13px; color: white; "
+                        style="width: 250px; font-size: 13px; color: white;background: #CF5541; justify-content: start; "
                         @click="snsLogin('google')">
-                    Sign in with Google
+                    <i class="fab fa-google"  style="font-size: 25px; color: white" ></i>
+                    &nbsp; Login in with Google
                 </v-btn>
                 <div class="pa-2"></div>
                 <v-btn
                         color="#4267b2"
-                        style="width: 200px; font-size: 13px; color: white; "
-                        @click="snsLogin('faceBook')">
-                    Sign in with Facebook
+                        style="width: 250px; font-size: 13px; color: white; justify-content: start;"
+                        @click="snsLogin('facebook')">
+                    <i class="fab fa-facebook-square" style="font-size: 30px"></i>
+                    &nbsp; Login in with Facebook
                 </v-btn>
             </v-col>
         </v-card>
@@ -55,7 +75,8 @@
 </template>
 
 <script>
-    import { mdbBtn } from 'mdbvue';
+    import {mdbBtn} from 'mdbvue';
+
     export default {
         components: {
             mdbBtn
@@ -81,27 +102,27 @@
                 let userId = me.userId;
                 let userPw = me.userPw;
                 localStorage.setItem('userId', userId)
-                me.$store.dispatch('login', { userId , userPw } )
-                    .then(function() {
-                        me.$emit('success',false);
+                me.$store.dispatch('login', {userId, userPw})
+                    .then(function () {
+                        me.$emit('success', false);
                     })
-                    // .catch(({message}) => this.msg = message)
+                // .catch(({message}) => this.msg = message)
             },
-            snsLogin(who){
+            snsLogin(who) {
 
-                var me =this
+                var me = this
                 var app = me.$getComponents('App')
 
-                if(who == 'google'){
+                if (who == 'google') {
                     app.snackbar = true;
                     app.snackbarColor = 'error'
                     app.snackbarMessage = 'Google 로그인 서비스는 준비중입니다.'
-                    app.snackbarPosition=false
-                }else if(who=='facebook'){
+                    app.snackbarPosition = false
+                } else if (who == 'facebook') {
                     app.snackbar = true;
                     app.snackbarColor = 'info'
                     app.snackbarMessage = 'FaceBook 로그인 서비스는 준비중입니다.'
-                    app.snackbarPosition=false
+                    app.snackbarPosition = false
                 }
 
             },
@@ -111,7 +132,7 @@
 </script>
 
 <style>
-    .login-button{
+    .login-button {
         display: inline-block;
         padding: 4px 8px;
         border-radius: 3px;
@@ -120,22 +141,5 @@
         box-shadow: 0 3px 0 #0f69ff;
     }
 
-    .g-signin-button {
-        padding: 4px 8px;
-        border-radius: 3px;
-        background-color: #3c82f7;
-        color: #ffffff;
-        width: 200px;
-    }
-
-    .fb-signin-button {
-        /* This is where you control how the button looks. Be creative! */
-        display: inline-block;
-        padding: 4px 8px;
-        border-radius: 3px;
-        background-color: #4267b2;
-        color: #fff;
-        width: 200px;
-    }
 
 </style>
\ No newline at end of file