feat: finished login page and added a "Theme-Toggle"-Button

Dino-Kupinic · Mar 18, 2024 · 88e99f6 · 88e99f6
1 parent c4f7375
commit 88e99f6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/frontend/components/login/LoginCard.vue b/frontend/components/login/LoginCard.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import LoginInputContainer from "~/components/login/LoginInputContainer.vue"
 </script>
 
 <template>
@@ -9,15 +10,7 @@
     </div>
     <UContainer class="w-full h-auto mr-6 ml-6">
       <h1 class="flex justify-center font-medium text-[20px] mb-16  sm:mb-4">Sign in to your account</h1>
-      <div class="sm:flex sm:justify-center">
-        <UContainer
-          class="w-full p-0 sm:w-[425px] sm:pl-0 sm:border sm:border-solid sm:border-neutral-200 sm:p-8 sm:rounded-md sm:shadow-md sm:shadow-neutral-300">
-          <LoginInput label="Username" margin="mb-4"/>
-          <LoginInput label="Password" margin="mb-8"/>
-          <UButton class="dark:bg-blue-500 flex justify-center w-full dark:text-white">Sign in
-          </UButton>
-        </UContainer>
-      </div>
+      <LoginInputContainer/>
     </UContainer>
   </div>
 </template>

diff --git a/frontend/components/login/LoginInputContainer.vue b/frontend/components/login/LoginInputContainer.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="sm:flex sm:justify-center">
+    <UContainer
+      class="w-full p-0 sm:w-[425px] sm:pl-0 sm:border sm:border-solid sm:dark:shadow-none sm:dark:border-neutral-700 sm:border-neutral-200 sm:p-8 sm:rounded-md sm:shadow-md sm:shadow-neutral-300">
+      <LoginInput label="Username" margin="mb-4"/>
+      <LoginInput label="Password" margin="mb-8"/>
+      <UButton class="dark:bg-blue-500 flex justify-center w-full dark:text-white">Sign in
+      </UButton>
+    </UContainer>
+  </div>
+</template>
+
+<style scoped>
+
+</style>