SHARE
TWEET

Untitled

a guest Sep 15th, 2019 91 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div class="login">
  3.       <div class="uk-card uk-card-default uk-card-body">
  4.          
  5.         <fieldset class="uk-fieldset">
  6.  
  7.             <legend class="uk-legend">Login to dashboard</legend>
  8.  
  9.             <div class="uk-margin">
  10.                 <input class="uk-input" type="Yport" placeholder="Your login" v-model="login">
  11.             </div>
  12.  
  13.             <div class="uk-margin">
  14.                 <input class="uk-input" type="password" placeholder="Password" v-model="password">
  15.             </div>
  16.  
  17.             <div class="uk-margin">
  18.                 <button class="uk-button uk-button-secondary uk-width-1-1" @click="signIn">
  19.                   <i :class="loginButtonClasses"></i> {{ loginButtonText }}
  20.                 </button>
  21.             </div>
  22.  
  23.         </fieldset>
  24.  
  25.       </div>
  26.   </div>
  27. </template>
  28.  
  29. <script>
  30.  
  31. export default {
  32.   name: 'Login',
  33.   data: function() {
  34.     return {
  35.  
  36.       // user enter data
  37.       login: '',
  38.       password: '',
  39.  
  40.       wait: false,
  41.  
  42.       // data for button
  43.       loginButtonClasses: 'fas fa-sign-in-alt',
  44.       loginButtonText: '',
  45.  
  46.       // default button data
  47.       defaultButtonClasses: 'fas fa-sign-in-alt',
  48.       waitButtonClasses: 'fas fa-circle-notch fa-spin',
  49.  
  50.     };
  51.   },
  52.   methods: {
  53.  
  54.     // klick to login
  55.     signIn () {
  56.  
  57.       // change button data
  58.       this.loginButtonClasses = this.waitButtonClasses;
  59.       this.loginButtonText = 'Wait...';
  60.  
  61.       // request to api emulation :D ...
  62.       setTimeout (() => {
  63.  
  64.         // change button data
  65.         this.loginButtonClasses = this.defaultButtonClasses;
  66.         this.loginButtonText = '';
  67.        
  68.       }, 2000);
  69.  
  70.     }
  71.   }
  72.  
  73. }
  74.  
  75. </script>
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top