add login

Signed-off-by: garionion <github@entr0py.de>
This commit is contained in:
garionion 2021-04-03 17:41:47 +02:00
parent e7cd3a4e6b
commit 788b45a9a7
Signed by: garionion
GPG key ID: 53352FA607FA681A
3 changed files with 104 additions and 13 deletions

View file

@ -87,10 +87,10 @@
<div
class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
>
<a
href="#"
<router-link
:to="{ name: 'Login' }"
class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
>Logout</a
>Logout</router-link
>
</div>
</div>
@ -124,11 +124,12 @@
<script lang="ts">
//stolen from https://git.max-site.de/Eulinchen/eulinchen-frontend/src/branch/master/src/components/VNav.vue
import { ref, reactive } from "vue";
import { ref, reactive, computed } from "vue";
import { useRoute } from "vue-router";
export default {
name: "VNav",
data() {
setup() {
const title = "radiator";
const open = ref(false);
const items = reactive([
@ -141,12 +142,11 @@ export default {
to: "Settings",
},
]);
return { title, open, items };
},
computed: {
activeRoute(): string {
return this.$route.name;
}
const route = useRoute();
console.log(route);
const activeRoute = computed(() => route.name);
return { title, open, items, activeRoute };
},
};
</script>

View file

@ -1,6 +1,8 @@
import { createWebHistory, createRouter } from "vue-router";
import Home from "../views/Home.vue";
import About from "../views/Settings.vue";
const Settings = () => import("../views/Settings.vue");
const Login = () => import("../views/Login.vue");
import { isLoggedIn } from "../api";
const routes = [
{
@ -11,7 +13,12 @@ const routes = [
{
path: "/settings",
name: "Settings",
component: About,
component: Settings,
},
{
path: "/login",
name: "Login",
component: Login,
},
];
@ -20,4 +27,12 @@ const router = createRouter({
routes,
});
router.beforeEach(async (to) => {
if (to.name !== "Login") {
const canAccess = await isLoggedIn();
if (!canAccess) return "/login";
}
return true;
});
export default router;

76
src/views/Login.vue Normal file
View file

@ -0,0 +1,76 @@
<template xmlns="http://www.w3.org/1999/html">
<div
class="container mx-auto h-full flex justify-center items-center dark:text-white"
>
<div class="sm:w-3/4 md:w-1/3 w-full">
<h1 class="font-hairline mb-6 text-center">Login</h1>
<div
class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
>
<div class="mb-4">
<label class="font-bold text-gray-800 block mb-2"
>Username or Email
<input
type="text"
class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
v-model.trim="user"
placeholder="Username"
/>
</label>
</div>
<div class="mb-4">
<label class="font-bold text-gray-800 block mb-2"
>Password
<input
type="password"
class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
v-model.trim="password"
placeholder="Password"
/>
</label>
</div>
<div class="flex items-center justify-between">
<button
class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
@click="login"
>
Login
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from "vue";
import { login as apiLogin } from "../api";
import router from "../router";
export default {
name: "Login",
setup() {
const user = ref("");
const password = ref("");
async function login() {
try {
let loginResp = await apiLogin(user.value, password.value);
if (loginResp) {
router.push({ name: "Home" });
}
} catch (e) {
console.error(e);
}
}
return {
user,
password,
login,
};
},
};
</script>
<style scoped></style>