Merge pull request #22 from coding-bootcamps-eu/quasar-ui

Quasar UI

frontend/package.json

@@ -3,22 +3,24 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
     "build": "run-p type-check build-only",
-    "preview": "vite preview",
     "test:unit": "vitest",
     "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
-    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
-    "build-only": "vite build",
-    "storybook": "storybook dev -p 6006",
-    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "build-only": "vite build",
+    "build-storybook": "storybook build",
+    "dev": "vite",
     "format": "prettier --write src/",
-    "build-storybook": "storybook build"
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
   },
   "dependencies": {
+    "@quasar/extras": "^1.0.0",
     "axios": "^1.5.1",
     "pinia": "^2.1.6",
+    "quasar": "^2.0.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },
@@ -54,6 +56,7 @@
     "typescript": "~5.1.6",
     "vite": "^4.4.9",
     "vitest": "^0.34.2",
+    "vue-cli-plugin-quasar": "~5.0.2",
     "vue-tsc": "^1.8.8"
   }
 }

frontend/src/App.vue

@@ -1,11 +1,20 @@
 <template>
-  <router-view></router-view>
+  <q-layout>
+    <Header />
+    <Footer />
+    <router-view></router-view>
+  </q-layout>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-
+import Header from '@/components/Header.vue'
+import Footer from '@/components/Footer.vue'
 export default defineComponent({
+  components: {
+    Header,
+    Footer
+  },
   data() {
     return {}
   }

frontend/src/components/BasisLogin.vue

@@ -1,33 +1,61 @@
 <template>
-  <div v-if="!sessionStore.isAuthenticated">
-    <h2>LOGIN</h2>
-    <form @submit.prevent="login">
-      <label for="email">Email:</label>
-      <input v-model="email" type="email" id="email" required />
-      <label for="pasword">Password:</label>
-      <input v-model="password" type="password" id="password" required />
-      <button type="submit">LogIN</button>
-    </form>
-    <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
-  </div>
+  <q-layout>
+    <!-- Inhaltsbereich -->
+    <q-page-container>
+      <q-page class="flex flex-center">
+        <q-card v-if="!sessionStore.isAuthenticated" class="my-card" bordered>
+          <q-card-section class="bg-secondary text-white">
+            <div class="text-h5">Login</div>
+          </q-card-section>
+
+          <q-card-section>
+            <q-form @submit.prevent="login" class="q-gutter-md">
+              <q-input filled v-model="email" type="email" label="Email" id="email" required />
+              <q-input
+                filled
+                v-model="password"
+                type="password"
+                label="Password"
+                id="password"
+                required
+              />
+              <div class="q-mt-md">
+                <q-btn label="Login" type="submit" color="secondary" />
+              </div>
+            </q-form>
+            <div v-if="errorMessage" class="text-red">{{ errorMessage }}</div>
+          </q-card-section>
+        </q-card>
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>
 
 <script lang="ts">
+import Header from '@/components/Header.vue'
+import Footer from '@/components/Footer.vue'
 import { defineComponent, ref } from 'vue'
 import { userSessionStore } from '@/store/session'
+import bootcamplogo from '@/assets/bootcamplogo.png'
 import axios from 'axios'
 
 export default defineComponent({
+  name: 'BasisLogin',
+  components: {
+    Header,
+    Footer
+  },
   setup() {
     const sessionStore = userSessionStore()
     return { sessionStore }
   },
 
   data() {
     return {
-      email: '',
-      password: '',
-      errorMessage: ''
+      email: '[email protected]',
+      password: 'password1234',
+      errorMessage: '',
+      bootcamplogo: bootcamplogo
     }
   },
 
@@ -54,3 +82,17 @@ export default defineComponent({
   }
 })
 </script>
+<style scoped>
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.q-btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+</style>