daily pastebin goal
76%
SHARE
TWEET

Untitled

a guest May 23rd, 2018 91 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div v-loading="loading" class="login-block">
  3.     <div class="login-block-inner">
  4.       <h3 style="color: #4CAF50;!important; font-size: 28px; font-weight: 400!important;">All Sales CMS</h3>
  5.       <div class="login-input-div">
  6.         <input class="login-input-field" type="text" v-model="username" id="username" placeholder="username">
  7.       </div>
  8.       <div class="login-input-div">
  9.         <input class="login-input-field"  type="password" v-model="password" id="password" placeholder="password">
  10.       </div>
  11.       <div>
  12.         <el-button v-on:click="login()" class="login-button">LOGIN</el-button>
  13.       </div>
  14.       <div style="text-align: center" v-if="error">
  15.         <span class="errorMsg">
  16.           {{ errorMessage }}
  17.         </span>
  18.       </div>
  19.     </div>
  20.   </div>
  21. </template>
  22.  
  23. <script>
  24. import api from '@/api/api'
  25.  
  26. export default {
  27.   name: 'login',
  28.   data () {
  29.     return {
  30.       username: null,
  31.       password: null,
  32.       error: false,
  33.       loading: false,
  34.       errorMessage: ''
  35.     }
  36.   },
  37.   methods: {
  38.     login () {
  39.       self.$store.commit('setAuthToken', 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTUyNzY2NjM1OCwiaWF0IjoxNTI3MDYxNTU4fQ.b0CbG9ve3YCbvIR0mx0V5PDCuHWMhgq5fCHGQZ41fJGC1a1-6Tb1K5ym9wWva1alazEUfP30pXb4kX6a5Tl3Dg')
  40.       // if (this.username === null || this.username === '' || this.password === null || this.password === '') {
  41.       //   this.showError('You cannot leave any fields blank!')
  42.       //   return
  43.       // }
  44.       // this.loading = true
  45.       // let self = this
  46.       // api.login({
  47.       //   username: this.username,
  48.       //   password: this.password
  49.       // }).then(function (response) {
  50.       //   if (response.data.token === null) {
  51.       //     self.loading = false
  52.       //     self.showError('A user with those credentials does not exist!')
  53.       //   } else {
  54.       //     self.$store.commit('setAuthToken', response.data.token)
  55.       //   }
  56.       // })
  57.     },
  58.     showError (str) {
  59.       this.errorMessage = str
  60.       this.error = true
  61.       let self = this
  62.       setTimeout(function () {
  63.         self.error = false
  64.       }, 2000)
  65.     }
  66.   }
  67. }
  68. </script>
  69.  
  70. <style scoped>
  71. .login-block {
  72.   width: 360px;
  73.   padding: 8% 0 0;
  74.   margin: auto;
  75. }
  76. .login-block-inner {
  77.   position: relative;
  78.   z-index: 1;
  79.   background: #FFFFFF;
  80.   max-width: 360px;
  81.   margin: 0 auto 100px;
  82.   padding: 45px;
  83.   text-align: center;
  84.   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  85. }
  86. .login-input-div {
  87.   font-family: "Roboto", sans-serif;
  88.   outline: none;
  89.   background: #f2f2f2;
  90.   width: 100%;
  91.   border-width: 0px;
  92.   border: none;
  93.   margin: 0 0 15px;
  94.   padding: 15px;
  95.   box-sizing: border-box;
  96.   font-size: 14px;
  97. }
  98.  
  99. .login-input-field {
  100.   font-family: "Roboto", sans-serif;
  101.   background: inherit;
  102.   border: none;
  103.   width: 100%;
  104.   outline: none;
  105. }
  106. .login-button{
  107.   font-family: "Roboto", sans-serif;
  108.   text-transform: uppercase;
  109.   outline: 0;
  110.   background: #4CAF50;
  111.   width: 100%;
  112.   border: 0;
  113.   padding: 15px;
  114.   color: #FFFFFF;
  115.   font-size: 14px;
  116.   cursor: pointer;
  117. }
  118. .login-eror {
  119.   color: red;
  120. }
  121.   h3 {
  122.     font-family: "Roboto", sans-serif;
  123.   }
  124. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top