parent
215ed8f2ad
commit
d891a3df9a
@ -0,0 +1,61 @@
|
||||
"use strict";
|
||||
|
||||
import Vue from 'vue';
|
||||
import axios from "axios";
|
||||
|
||||
// Full config: https://github.com/axios/axios#request-config
|
||||
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
|
||||
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
|
||||
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
|
||||
|
||||
let config = {
|
||||
// baseURL: process.env.baseURL || process.env.apiUrl || ""
|
||||
// timeout: 60 * 1000, // Timeout
|
||||
// withCredentials: true, // Check cross-site Access-Control
|
||||
};
|
||||
|
||||
const _axios = axios.create(config);
|
||||
|
||||
_axios.interceptors.request.use(
|
||||
function(config) {
|
||||
// Do something before request is sent
|
||||
return config;
|
||||
},
|
||||
function(error) {
|
||||
// Do something with request error
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
// Add a response interceptor
|
||||
_axios.interceptors.response.use(
|
||||
function(response) {
|
||||
// Do something with response data
|
||||
return response;
|
||||
},
|
||||
function(error) {
|
||||
// Do something with response error
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
Plugin.install = function(Vue, options) {
|
||||
Vue.axios = _axios;
|
||||
window.axios = _axios;
|
||||
Object.defineProperties(Vue.prototype, {
|
||||
axios: {
|
||||
get() {
|
||||
return _axios;
|
||||
}
|
||||
},
|
||||
$axios: {
|
||||
get() {
|
||||
return _axios;
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
Vue.use(Plugin)
|
||||
|
||||
export default Plugin;
|
||||
@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<section class="section-container">
|
||||
<v-row class="signin">
|
||||
<v-spacer />
|
||||
<v-col cols="10" sm="8" md="6" lg="4" class="text-center">
|
||||
<h2 class="grey--text lighten-4">LOGIN</h2>
|
||||
<validation-observer ref="observer">
|
||||
<v-form @submit.prevent="submit">
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
name="Username"
|
||||
rules="required"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="username"
|
||||
:error-messages="errors"
|
||||
label="Username"
|
||||
required
|
||||
outlined
|
||||
dark
|
||||
filled
|
||||
dense
|
||||
></v-text-field>
|
||||
</validation-provider>
|
||||
<validation-provider
|
||||
v-slot="{ errors }"
|
||||
name="Password"
|
||||
rules="required"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
:error-messages="errors"
|
||||
label="Password"
|
||||
:append-icon="showPass ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
@click:append="showPass = !showPass"
|
||||
required
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
filled
|
||||
:type="showPass ? 'text' : 'password'"
|
||||
></v-text-field>
|
||||
</validation-provider>
|
||||
<div class="text-center">
|
||||
<v-btn class="signin-btn" type="submit" rounded color="white">
|
||||
Sign In
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-form>
|
||||
</validation-observer>
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
</v-row>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { required } from "vee-validate/dist/rules";
|
||||
import {
|
||||
extend,
|
||||
ValidationProvider,
|
||||
setInteractionMode,
|
||||
ValidationObserver,
|
||||
} from "vee-validate";
|
||||
|
||||
setInteractionMode("eager");
|
||||
|
||||
extend("required", {
|
||||
...required,
|
||||
message: "{_field_} can not be empty",
|
||||
});
|
||||
|
||||
export default {
|
||||
name: "Login",
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
},
|
||||
data: () => ({
|
||||
username: "",
|
||||
password: null,
|
||||
showPass: false,
|
||||
response: null,
|
||||
}),
|
||||
computed: {
|
||||
params() {
|
||||
return {
|
||||
username: this.username,
|
||||
password: this.password,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async submit() {
|
||||
const valid = await this.$refs.observer.validate();
|
||||
if (valid) {
|
||||
this.login(this.params); // action to login
|
||||
}
|
||||
},
|
||||
async login(payload) {
|
||||
axios
|
||||
.post("http://localhost:8000/api/users/login", payload)
|
||||
.then((response) => {
|
||||
if (response.status == 200) {
|
||||
this.$router.push({ name: "Dashboard" })
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
if (error.response.status == 401) {
|
||||
console.log("Bad login info")
|
||||
}
|
||||
})
|
||||
},
|
||||
clear() {
|
||||
// you can use this method to clear login form
|
||||
this.username = "";
|
||||
this.password = null;
|
||||
this.$refs.observer.reset();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue