login btn

2019-09-27 14:50:44 +09:00
parent 040a0301ec
commit 57dfffcc9d
5 changed files with 80 additions and 42 deletions
--- 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",
--- 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",
--- 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>
--- 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;
--- 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>