diff --git a/web/admin-gui/src/views/Home.vue b/web/admin-gui/src/views/Home.vue
index 4faceb2..0862bff 100644
--- a/web/admin-gui/src/views/Home.vue
+++ b/web/admin-gui/src/views/Home.vue
@@ -4,6 +4,8 @@ import { pingApi } from '@/utils/ping';
 import { onMounted, ref } from 'vue';
 
 const inputArticleID = ref('')
+const username = ref('')
+const password = ref('')
 
 onMounted(async function() {
     console.log('ping...')
@@ -40,6 +42,18 @@ function deleteArticle(articleID: String) {
         .then(response => response.json())
         .then(result => console.log(result))
 }
+
+function auth(type: string, username: string, password: string) {
+    fetch(`http://localhost:8080/${type}`, {
+        method: "POST",
+        body: JSON.stringify({
+            email: username,
+            password: password
+        })
+    })
+        .then(response => response.json())
+        .then(result => console.log(result))
+}
 </script>
 
 <template>
@@ -47,8 +61,13 @@ function deleteArticle(articleID: String) {
     <button @click="addArticle">add rand article</button>
     <button @click="logArticles">display articles in console</button> <br>
     <label for="articleIDinput"></label>
-    <input id="articleIDinput" name="articleIDinput" type="text" v-model="inputArticleID">
-    <button @click="deleteArticle(inputArticleID)">delete this article</button>
+    <input id="articleIDinput" name="articleIDinput" type="text" placeholder="article ID to delete" v-model="inputArticleID">
+    <button @click="deleteArticle(inputArticleID)">delete this article</button> <br>
+
+    <input type="text" name="username" id="username" v-model="username" placeholder="username">
+    <input type="text" name="password" id="password" v-model="password" placeholder="password">
+    <button @click="auth('login', username, password)">login</button>
+    <button @click="auth('logout', username, password)">logout</button>
 </template>
 
 <style scoped>