generated from li0nhunter/Website-template
59 lines
2.6 KiB
Vue
59 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import {ref} from 'vue';
|
|
import {useLogin} from "@models/session.ts";
|
|
import {isMobile} from "@models/globals.ts";
|
|
import eye from '@/assets/svg/eye.svg';
|
|
import eyeSlash from '@/assets/svg/eye-slash.svg';
|
|
import ReadableButton from "@components/readableComponents/ReadableButton.vue";
|
|
import ReadableSvg from "@components/readableComponents/ReadableSVG.vue";
|
|
import ReadableInput from "@components/readableComponents/ReadableInput.vue";
|
|
|
|
|
|
const username = ref('');
|
|
const password = ref('');
|
|
const {login} = useLogin();
|
|
const showPassword = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col" :style="isMobile ? '' : 'max-width: 400px'">
|
|
<h1 class="text-center mt-3">Login</h1>
|
|
<form>
|
|
<div class="mb-2">
|
|
<label class="form-label" for="username">Username</label>
|
|
<input class="form-control" id="username" v-model="username" type="text" autocomplete="username"
|
|
required/>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="form-label" for="password">Password</label>
|
|
<div class="input-group">
|
|
<ReadableInput class="form-control" id="password" v-model="password"
|
|
:type="showPassword ? 'text' : 'password'"
|
|
autocomplete="current-password" required style="border-right:0;"/>
|
|
<button type="button" class="input-group-text border-start-0"
|
|
style="cursor:pointer;"
|
|
@click="showPassword = !showPassword">
|
|
<ReadableSvg :svg="eye" :width="20" :height="20"
|
|
view-box="0 0 28 28" v-if="!showPassword"/>
|
|
<ReadableSvg :svg="eyeSlash" :width="20" :height="20"
|
|
view-box="0 0 28 28" v-else/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="d-grid">
|
|
<ReadableButton class="btn btn-submit mt-4" type="submit"
|
|
@click.prevent="login(username, password)">
|
|
Login
|
|
</ReadableButton>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |