Commit 9a1e9cae authored by Andres Käver's avatar Andres Käver

accountApi

parent 84afa880
{
"message": "Request failed with status code 404",
"name": "Error",
"stack": "Error: Request failed with status code 404\n at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15)\n at settle (webpack-internal:///./node_modules/axios/lib/core/settle.js:17:12)\n at XMLHttpRequest.handleLoad (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:61:7)",
"config": {
"url": "account/login",
"method": "post",
"data": "{\"email\":\"akaver@akaver.com\",\"password\":\"Kala.maja2020sdcdc\"}",
"headers": {
"Accept": "application/json, text/plain, */*",
"Content-Type": "application/json;charset=utf-8"
},
"baseURL": "https://sportmap.akaver.com/api/v1.0/",
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1
}
}
\ No newline at end of file
......@@ -2349,6 +2349,37 @@
"integrity": "sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==",
"dev": true
},
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
......
......@@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"core-js": "^3.6.4",
"font-awesome": "^4.7.0",
......
import { ILoginDTO } from './../types/ILoginDTO';
import Axios from 'axios';
interface ILoginResponse {
token: string;
status: string;
}
export abstract class AccountApi {
private static axios = Axios.create(
{
baseURL: "https://sportmap.akaver.com/api/v1.0/",
headers: {
common: {
'Content-Type': 'application/json'
}
}
}
)
static async getJwt(loginDTO: ILoginDTO): Promise<string | null> {
const url = "account/login";
try {
const response = await this.axios.post<ILoginResponse>(url, loginDTO);
console.log('getJwt response', response);
if (response.status === 200) {
return response.data.token;
}
return null;
} catch (error) {
console.log('error: ', (error as Error).message);
return null;
}
}
}
import Vue from 'vue'
import Vuex from 'vuex'
import Vuex, { Store } from 'vuex'
import { ILoginDTO } from '@/types/ILoginDTO';
import { AccountApi } from '@/services/AccountApi';
Vue.use(Vuex)
......@@ -20,6 +22,11 @@ export default new Vuex.Store({
actions: {
clearJwt(context): void {
context.commit('setJwt', null);
},
async authenticateUser(context, loginDTO: ILoginDTO): Promise<boolean> {
const jwt = await AccountApi.getJwt(loginDTO);
context.commit('setJwt', jwt);
return jwt !== null;
}
},
modules: {
......
......@@ -2,6 +2,7 @@
<div class="row">
<div class="col-md-6">
<h4>Use a local account to log in.</h4>
<h2 v-if="loginWasOk === false">Bad login attempt</h2>
<hr />
<div class="form-group">
<label for="Input_Email">Email</label>
......@@ -9,7 +10,12 @@
</div>
<div class="form-group">
<label for="Input_Password">Password</label>
<input v-model="loginInfo.password" class="form-control" type="password" id="Input_Password" />
<input
v-model="loginInfo.password"
class="form-control"
type="password"
id="Input_Password"
/>
</div>
<div class="form-group">
<button @click="loginOnClick($event)" class="btn btn-primary">Log in</button>
......@@ -21,7 +27,8 @@
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { ILoginDTO } from "@/types/ILoginDTO";
import store from '../../store';
import store from "../../store";
import router from "../../router";
@Component
export default class GpsLocationTypesIndex extends Vue {
......@@ -30,11 +37,24 @@ export default class GpsLocationTypesIndex extends Vue {
password: "Kala.maja2020"
};
loginOnClick(event: Event): void {
console.log('loginOnClick', event);
console.log('loginInfo', this.loginInfo);
// how to login?
store.commit('setJwt', 'token is here! we are logged-in');
private loginWasOk: boolean | null = null;
loginOnClick(): void {
if (
this.loginInfo.email.length > 0 &&
this.loginInfo.password.length > 0
) {
store
.dispatch("authenticateUser", this.loginInfo)
.then((isLoggedIn: boolean) => {
if (isLoggedIn) {
this.loginWasOk = true;
router.push("/");
} else {
this.loginWasOk = false;
}
});
}
}
// ============ Lifecycle methods ==========
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment