Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div class="row">
- <div class="container">
- <div class="col-md-4 col-md-offset-4">
- <div class="col-md-12">
- </div>
- <div class="col-md-12 no-p no-m">
- <ul class="error-list " v-for="error in submitErrors">
- <li class="error">{{error}}</li>
- </ul>
- </div>
- <div v-if="loading" class="animated-loader">Loading...</div>
- <form v-else v-on:submit.prevent="attemptLogin" v-bind:class="{ invalid: invalid }" >
- <label>Username:</label>
- <input type="text" name="username" v-model="username" class="form-control" >
- <br>
- <label>Password:</label>
- <input type="password" name="password" v-model="password" class="form-control">
- <br>
- <input type="submit" value="Login" class="btn btn-default submit-btn">
- </form>
- </div>
- </div>
- </div>
- </template>
- <script>
- import store from '../../../store.js'
- import axios from 'axios'
- import ContentApi from '../../../api.js'
- const contentApi = new ContentApi();
- import qs from 'qs'
- export default {
- data () {
- return {
- username: '',
- password: '',
- loading:false,
- submitErrors: [],
- invalid: false,
- }
- },
- methods: {
- attemptLogin(){
- if(this.username == '' || this.password == ''){
- this.submitErrors = [];
- this.submitErrors.push("You must provide both a username and password.");
- this.invalid = true;
- setTimeout(()=>{ this.invalid = false }, 300);
- }
- else{
- this.submitErrors = [];
- this.loading = true;
- let data = {
- username:this.username,
- password:this.password,
- client_id:contentApi.clientID,//application client
- grant_type: 'password'
- }
- let headers = {
- 'Content-Type': 'application/x-www-form-urlencoded',
- }
- axios.post(contentApi.authToken, qs.stringify(data), headers)
- .then(response => {
- localStorage.setItem("authToken", response.data.access_token);
- store.state.authenticated = true;
- })
- .catch(e => {
- this.invalid = true;
- setTimeout(()=>{ this.invalid = false }, 300);
- console.log(e);//change to raise exception.
- this.submitErrors = [];
- this.submitErrors.push(e.response.data.error_description);
- this.loading = false;
- e.response.data.error_description
- });
- //do your ajax call here to request a token.
- }
- },
- },
- }
- </script>
- <style lang="scss">
- //no styles
- </style>
Add Comment
Please, Sign In to add comment