Initial commit

client/src/views/LoginPage.vue

@@ -0,0 +1,59 @@
+<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>