add login-/signup-page

frontend/src/App.vue

 <template>
   <div id="app">
-    <LoginPage></LoginPage>
+    <LoginPage id="appBody"></LoginPage>
   </div>
 </template>
 
@@ -16,12 +16,21 @@ export default {
 </script>
 
 <style>
+body {
+  background-color: #343a40 !important; /* Dark grey background */
+  color: white !important; /* White text */
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
   margin-top: 60px;
 }
+
+#appBody {
+  margin-left: 35px;
+  margin-right: 35px;
+}
 </style>

frontend/src/components/LoginPage.vue

 <script>
 export default {
-  name: "LoginPage"
+  name: "LoginPage",
+  data(){
+    return {
+      showSignUpModal: false
+    }
+  },
+  methods: {
+    openSignUpModal(){
+      this.showSignUpModal = true
+    }
+  }
 }
 </script>
 
 <template>
+  <b-card>
     <b-card-header>
       ToDo-App
     </b-card-header>
+
+    <b-card-body>
+      <!-- sign-up-modal -->
+      <b-button variant="primary" @click="openSignUpModal"> Sign Up </b-button>
+      <b-modal v-model="showSignUpModal">
+        <b-input id="username" type="text" placeholder="enter username"></b-input>
+        <b-input id="password" type="password" placeholder="enter password"></b-input>
+      </b-modal>
+
+      <!-- sign-in-modal -->
+
+    </b-card-body>
+
+    <b-card-footer>
+
+    </b-card-footer>
+  </b-card>
 </template>
 
-<style scoped>
+<style>
+body {
+  background-color: #343a40 !important; /* Dark grey background */
+  color: white !important; /* White text */
+}
 
+#username {
+  margin-bottom: 10px;
+}
 </style>
\ No newline at end of file