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