init

src/components/Confirm.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="modal fade" tabindex="-1" ref="modal">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exampleModalLabel">Confirm</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <slot></slot>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn" :class="btnStyle" @click="yes" data-bs-dismiss="modal">Yes</button>
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Modal } from 'bootstrap'
+
+export default {
+    props: {
+        btnStyle: {
+            type: String,
+            default: "btn-primary"
+        }
+    },
+    data: () => ({
+        modal: null
+    }),
+    mounted() {
+        this.modal = new Modal(this.$refs.modal)
+    },
+    methods: {
+        show() {
+            this.modal.show()
+        },
+        yes() {
+            this.$emit('yes');
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Login.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="form-container">
+        <div class="form">
+            <form @submit.prevent="submit">
+
+                <h1 class="h3 mb-3 fw-normal"></h1>
+
+                <div class="form-floating">
+                    <input type="text" class="form-control" id="floatingInput" placeholder="Username" v-model="username">
+                    <label for="floatingInput">Username</label>
+                </div>
+
+                <div class="form-floating mt-3">
+                    <input type="password" class="form-control" id="floatingPassword" placeholder="Password" v-model="password">
+                    <label for="floatingPassword">Password</label>
+                </div>
+
+                <div class="form-check mb-3 mt-3">
+                    <label>
+                        <input type="checkbox" value="remember-me" class="form-check-input" id="remember" v-model="remember">
+
+                        <label class="form-check-label" for="remember">
+                            Remember me
+                        </label>
+                    </label>
+                </div>
+                <button class="w-100 btn btn-primary" type="submit" :disabled="processing">Login</button>
+
+                <div class="alert alert-danger mt-3" role="alert" v-if="res && !res.ok">
+                    {{ res.msg }}
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            processing: false,
+            username: "",
+            password: "",
+            remember: true,
+            res: null,
+        }
+    },
+    methods: {
+        submit() {
+            this.processing = true;
+            this.$root.login(this.username, this.password, (res) => {
+                this.processing = false;
+                this.res = res;
+            })
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+.form-container {
+    display: flex;
+    align-items: center;
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+
+.form {
+
+    width: 100%;
+    max-width: 330px;
+    padding: 15px;
+    margin: auto;
+    text-align: center;
+}
+</style>