You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
3.0 KiB
102 lines
3.0 KiB
<template>
|
|
<div class="form-container">
|
|
<div class="form">
|
|
<form @submit.prevent="submit">
|
|
<h1 class="h3 mb-3 fw-normal" />
|
|
|
|
<div v-if="!tokenRequired" class="form-floating">
|
|
<input id="floatingInput" v-model="username" type="text" class="form-control" placeholder="Username">
|
|
<label for="floatingInput">{{ $t("Username") }}</label>
|
|
</div>
|
|
|
|
<div v-if="!tokenRequired" class="form-floating mt-3">
|
|
<input id="floatingPassword" v-model="password" type="password" class="form-control" placeholder="Password">
|
|
<label for="floatingPassword">{{ $t("Password") }}</label>
|
|
</div>
|
|
|
|
<div v-if="tokenRequired">
|
|
<div class="form-floating mt-3">
|
|
<input id="otp" v-model="token" type="text" maxlength="6" class="form-control" placeholder="123456">
|
|
<label for="otp">{{ $t("Token") }}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-check mb-3 mt-3 d-flex justify-content-center pe-4">
|
|
<div class="form-check">
|
|
<input id="remember" v-model="$root.remember" type="checkbox" value="remember-me" class="form-check-input">
|
|
|
|
<label class="form-check-label" for="remember">
|
|
{{ $t("Remember me") }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button class="w-100 btn btn-primary" type="submit" :disabled="processing">
|
|
{{ $t("Login") }}
|
|
</button>
|
|
|
|
<div v-if="res && !res.ok" class="alert alert-danger mt-3" role="alert">
|
|
{{ res.msg }}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
processing: false,
|
|
username: "",
|
|
password: "",
|
|
token: "",
|
|
res: null,
|
|
tokenRequired: false,
|
|
};
|
|
},
|
|
methods: {
|
|
/** Submit the user details and attempt to log in */
|
|
submit() {
|
|
this.processing = true;
|
|
|
|
this.$root.login(this.username, this.password, this.token, (res) => {
|
|
this.processing = false;
|
|
|
|
if (res.tokenRequired) {
|
|
this.tokenRequired = true;
|
|
} else {
|
|
this.res = res;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.form-container {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 40px;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.form-floating {
|
|
> label {
|
|
padding-left: 1.3rem;
|
|
}
|
|
|
|
> .form-control {
|
|
padding-left: 1.3rem;
|
|
}
|
|
}
|
|
|
|
.form {
|
|
width: 100%;
|
|
max-width: 330px;
|
|
padding: 15px;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
</style>
|