67 lines
1.6 KiB
Vue
67 lines
1.6 KiB
Vue
|
<template>
|
||
|
|
<section class="login_modal">
|
||
|
|
<div class="login_field">
|
||
|
|
<label for="userName">Username: </label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="login-username"
|
||
|
|
v-model="username"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="login_field">
|
||
|
|
<label for="password">Password: </label>
|
||
|
|
<input
|
||
|
|
type="password"
|
||
|
|
id="login-password"
|
||
|
|
v-model="password"
|
||
|
|
required
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="login_field">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
id="loginButton"
|
||
|
|
v-on:click="login()"
|
||
|
|
>Login</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { useVModel } from '@vueuse/core'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
username:string
|
||
|
|
password:string
|
||
|
|
}>()
|
||
|
|
const data = {
|
||
|
|
username: useVModel(props, 'username', defineEmits(['update:username'])),
|
||
|
|
password:useVModel(props, 'password', defineEmits(['update:password']))
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, computed, PropType, defineProps, defineEmits} from 'vue';
|
||
|
|
import { LoginHelper, Session } from '../lib/session';
|
||
|
|
import { storage } from '../session_storage';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
methods: {
|
||
|
|
login: function() {
|
||
|
|
new LoginHelper(this.username, this.password).login()
|
||
|
|
.then((session)=>{
|
||
|
|
console.log(session, "adding to storage")
|
||
|
|
storage.AddSession(session)
|
||
|
|
}).catch((e)=>{
|
||
|
|
if(e.code == "ERR_BAD_REQUEST") {
|
||
|
|
alert("invalid username/password")
|
||
|
|
return
|
||
|
|
}
|
||
|
|
alert("unknown error, please report")
|
||
|
|
console.log(e)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|