move admin component files and add rowing component

nginx/vue/src/views/admin/Admin.vue

@@ -2,11 +2,12 @@
 import { ref } from "vue";
 import { useAuthStore } from "@/stores/auth";
 
-import Login from "@/components/admin/Login.vue";
-import CreateUser from "@/components/admin/CreateUser.vue";
-import CreatePost from "@/components/admin/CreatePost.vue";
-import CreateFavorite from "@/components/admin/CreateFavorite.vue";
-import CreateActivity from "@/components/admin/CreateActivity.vue";
+import Login from "./Login.vue";
+import CreateUser from "./CreateUser.vue";
+import CreatePost from "./CreatePost.vue";
+import CreateFavorite from "./CreateFavorite.vue";
+import CreateActivity from "./CreateActivity.vue";
+import CreateRowing from "./CreateRowing.vue";
 
 const auth = useAuthStore();
 </script>
@@ -21,6 +22,7 @@ const auth = useAuthStore();
             <CreatePost class="bdr-2 bg-bg_primary" v-if="auth.loggedIn" />
             <CreateFavorite class="bdr-2 bg-bg_primary" v-if="auth.loggedIn" />
             <CreateActivity class="bdr-2 bg-bg_primary" v-if="auth.loggedIn" />
+            <CreateRowing class="bdr-2 bg-bg_primary" v-if="auth.loggedIn" />
         </div>
     </main>
 </template>

nginx/vue/src/views/admin/CreateActivity.vue

@@ -0,0 +1,36 @@
+<script setup>
+import Button from "@/components/input/Button.vue";
+
+import { ref } from "vue";
+import axios from "axios";
+
+const type = ref("");
+const name = ref("");
+const link = ref("");
+
+async function post() {
+    try {
+        const res = await axios.post("/api/activity", {
+            type: type.value,
+            name: name.value,
+            link: link.value || undefined,
+        });
+        type.value = "";
+        name.value = "";
+        link.value = "";
+        console.log(res.data);
+    } catch (err) {
+        console.error(err);
+    }
+}
+</script>
+
+<template>
+    <div class="flex flex-col">
+        <h1>Create Activity</h1>
+        <input type="text" v-model="type" placeholder="Type" />
+        <input type="text" v-model="name" placeholder="Name" />
+        <input type="text" v-model="link" placeholder="Link" />
+        <Button @click="post">Upload</Button>
+    </div>
+</template>

nginx/vue/src/views/admin/CreateFavorite.vue

@@ -0,0 +1,36 @@
+<script setup>
+import Button from "@/components/input/Button.vue";
+
+import { ref } from "vue";
+import axios from "axios";
+
+const type = ref("");
+const name = ref("");
+const link = ref("");
+
+async function post() {
+    try {
+        const res = await axios.post("/api/favorites", {
+            type: type.value,
+            name: name.value,
+            link: link.value || undefined,
+        });
+        type.value = "";
+        name.value = "";
+        link.value = "";
+        console.log(res.data);
+    } catch (err) {
+        console.error(err);
+    }
+}
+</script>
+
+<template>
+    <div class="flex flex-col">
+        <h1>Create Favorite</h1>
+        <input type="text" v-model="type" placeholder="Type" />
+        <input type="text" v-model="name" placeholder="Name" />
+        <input type="text" v-model="link" placeholder="Link" />
+        <Button @click="post">Upload</Button>
+    </div>
+</template>

nginx/vue/src/views/admin/CreatePost.vue

@@ -0,0 +1,36 @@
+<script setup>
+import Button from "@/components/input/Button.vue";
+import { ref } from "vue";
+import axios from "axios";
+
+const title = ref("");
+const content = ref("");
+
+async function post() {
+    try {
+        const res = await axios.post("/api/posts", {
+            title: title.value,
+            content: content.value,
+        });
+        title.value = "";
+        content.value = "";
+        console.log(res.data);
+    } catch (err) {
+        console.error(err);
+    }
+}
+</script>
+
+<template>
+    <div class="flex flex-col">
+        <h1>Create Post</h1>
+        <input type="text" v-model="title" placeholder="Title" />
+        <textarea
+            class="h-50"
+            v-model="content"
+            placeholder="Content"
+        ></textarea>
+        <Button @click="post">Upload</Button>
+        <!-- make textarea take up most the space -->
+    </div>
+</template>

nginx/vue/src/views/admin/CreateRowing.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="flex flex-col gap-2">
+        <h1>Create Rowing</h1>
+    </div>
+</template>
+
+<style scoped>
+
+</style>

nginx/vue/src/views/admin/CreateUser.vue

@@ -0,0 +1,28 @@
+<script setup>
+import Button from "@/components/input/Button.vue";
+import { ref, onMounted, computed } from "vue";
+import { useAuthStore } from "@/stores/auth";
+
+const auth = useAuthStore();
+const username = ref("");
+const password = ref("");
+
+function handleLogin() {
+    auth.createUser(username.value, password.value);
+}
+</script>
+
+<template>
+    <div v-if="auth.loggedIn" class="flex flex-col">
+        <h1>Logged in</h1>
+        <p>{{ auth.user.id }}</p>
+        <p>{{ auth.user.username }}</p>
+        <p>{{ auth.user.admin }}</p>
+    </div>
+    <div v-else class="flex flex-col">
+        <h1>Create User</h1>
+        <input type="text" v-model="username" placeholder="Username" />
+        <input type="password" v-model="password" placeholder="Password" />
+        <Button @click="handleLogin">Create Account</Button>
+    </div>
+</template>

nginx/vue/src/views/admin/Login.vue

@@ -0,0 +1,34 @@
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import { useAuthStore } from "@/stores/auth";
+
+import Button from "@/components/input/Button.vue";
+
+const auth = useAuthStore();
+const username = ref("");
+const password = ref("");
+
+function handleLogin() {
+    auth.logIn(username.value, password.value);
+}
+
+function handleLogout() {
+    auth.logOut();
+}
+</script>
+
+<template>
+    <div v-if="auth.loggedIn" class="flex flex-col">
+        <h1>Logged in</h1>
+        <p>{{ auth.user.id }}</p>
+        <p>{{ auth.user.username }}</p>
+        <p>{{ auth.user.admin }}</p>
+        <Button @click="handleLogout">Log Out</Button>
+    </div>
+    <div v-else class="flex flex-col">
+        <h1>Login</h1>
+        <input type="text" v-model="username" placeholder="Username" />
+        <input type="password" v-model="password" placeholder="Password" />
+        <Button @click="handleLogin">Log In</Button>
+    </div>
+</template>