Browse Source

login 기능 추가 및 login signup 리다이렉트 추가

kiboky 5 years ago
parent
commit
c5a9f31f57
2 changed files with 109 additions and 2 deletions
  1. 102 0
      client/pages/login.vue
  2. 7 2
      client/pages/signup.vue

+ 102 - 0
client/pages/login.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="registerPage">
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-4"></div>
+        <div class="col-sm-4">
+          <div class="text-center">
+            <nuxt-link to="#">
+              <img src="/img/logo-black.png" alt="">
+            </nuxt-link>
+          </div>
+          <div class="mt-4">
+            <div class="a-box a-spacing-extra-large">
+              <div class="a-blx-inner">
+                <h1 class="a-spacing-small">Login</h1>
+                <!--Your Email-->
+                <div class="a-row a-spacing-base">
+                  <label for="" class="a-form-label">Ypur Email</label>
+                  <input
+                    v-model="email"
+                    type="text"
+                    id="ap_customer_email"
+                    class="a-input-text form-control auth-autofocus auth-required-field auth-contract-verification-request-info"
+                  />
+                </div>
+                <!--Your Password-->
+                <div class="a-row a-spacing-base">
+                  <label for="" class="a-form-label">Ypur Password</label>
+                  <input
+                    v-model="password"
+                    type="password"
+                    id="ap_customer_password"
+                    class="a-input-text form-control auth-autofocus auth-required-field auth-contract-verification-request-info"
+                  />
+                  <div class="a-alert-container">
+                    <div class="a-alert-content">password must be at least 6 charteres</div>
+                  </div>
+                </div>
+                <!-- Button -->
+                <div class="a-row a-spacing-extra-large mb-4">
+                  <span class="a-button-primary">
+                    <span class="a-button-inner">
+                      <span @click="onLogin" class="a-button-text">Continuye</span>
+                    </span>
+                  </span>
+                  <div class="a-row a-spacing-top-medium a-size-small">
+                    <b>
+                      By create an accoutnm
+                      <a href="#">conditions of Use</a> and
+                      <a href="#">conditions of Use</a>
+                    </b>
+                  </div>
+                </div>
+                <h4/>
+                <div class="a-row">
+                  <b>
+                    don have an account?
+                    <nuxt-link to="/signup" class="a-link-emphasis">Sign up</nuxt-link>
+                  </b>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  middleware: 'auth',
+  auth: 'guest',
+
+  layout: 'none',
+
+  data () {
+    return {
+      email: '',
+      password: ''
+    }
+  },
+
+  methods: {
+    async onLogin () {
+      try {
+        this.$auth.loginWith('local', {
+          data: {
+            email: this.email,
+            password: this.password
+          }
+        })
+
+        this.$router.push('/')
+      } catch (err) {
+        console.log(err)
+      }
+    }
+  }
+}
+</script>

+ 7 - 2
client/pages/signup.vue

@@ -5,7 +5,9 @@
         <div class="col-sm-4"></div>
         <div class="col-sm-4">
           <div class="text-center">
-            <a href="#"><img src="/img/logo-black.png" alt=""></a>
+            <nuxt-link to="#">
+              <img src="/img/logo-black.png" alt="">
+            </nuxt-link>
           </div>
           <div class="mt-4">
             <div class="a-box a-spacing-extra-large">
@@ -63,7 +65,7 @@
                 <div class="a-row">
                   <b>
                     Aready habe an accouint?
-                    <nuxt-link to="/login" class="a-link-emphasis">Sign in</nuxt-link>
+                    <nuxt-link to="/login" class="a-link-emphasis">login</nuxt-link>
                   </b>
                 </div>
               </div>
@@ -78,6 +80,9 @@
 
 <script>
 export default {
+  middleware: 'auth',
+  auth: 'guest',
+
   layout: 'none',
 
   data () {