apply login view design #29

.reuse/dep5

@@ -11,7 +11,7 @@ Files: .browserslistrc .dockerignore .eslintrc.js .gitignore
 Copyright: WTF Kooperative eG <https://wtf-eg.de/>
 License: AGPL-3.0-or-later
 
-Files: public/img/wtf_logo.svg src/assets/img/wtf_logo_white.svg
+Files: src/assets/img/wtf_logo*
 Copyright: WTF Kooperative eG <https://wtf-eg.de/>
 License: LicenseRef-WTF
 

src/App.vue

@@ -5,97 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <div class="alert alert-success text-center mb-0" role="alert">
-    Willkommen beim Alpha-Test!
-    <a target="_blank" href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new">Problem gefunden? Bitte hier ein Issue anlegen.</a>
-  </div>
   <header v-if="this.$route.path.includes('/s/')">
-    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <Navbar />
-      <div class="container-fluid">
-        <a class="navbar-brand" href="#">KI</a>
-        <button
-          @click="showMobileNavbar = !showMobileNavbar"
-          class="navbar-toggler"
-          type="button"
-          data-bs-toggle="collapse"
-          data-bs-target="#navbarSupportedContent"
-          aria-controls="navbarSupportedContent"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-        >
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div
-          class="collapse navbar-collapse"
-          :class="{
-            show: showMobileNavbar,
-          }"
-          id="navbarSupportedContent"
-        >
-          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-            <li class="nav-item">
-              <router-link
-                class="nav-link"
-                :to="{ path: `/s/search` }"
-                active-class="active"
-                >Suche</router-link
-              >
-            </li>
-            <li class="nav-item">
-              <router-link
-                class="nav-link"
-                :to="{ path: `/s/profile/${memberId}` }"
-                active-class="active"
-                >Mein Profil</router-link
-              >
-            </li>
-            <li class="nav-item">
-              <router-link
-                class="nav-link"
-                :to="{ path: `/s/profile-edit` }"
-                active-class="active"
-                >Bearbeiten</router-link
-              >
-            </li>
-            <li class="nav-item">
-              <button class="btn btn-outline-danger" @click="logout()">
-                Logout
-              </button>
-              <a class="nav-link active" aria-current="page" href="#"></a>
-            </li>
-          </ul>
-          <form class="d-flex" @submit.prevent="searchRedirect()">
-            <input
-              class="form-control me-2"
-              v-model="searchText"
-              type="search"
-              placeholder="Profile durchsuchen"
-              aria-label="Search"
-            />
-            <button
-              class="btn btn-outline-primary"
-              type="submit"
-            >
-              <img
-                src="/img/bootstrap-icons-1.5.0/search.svg"
-                alt="Suche Icon"
-              />
-            </button>
-          </form>
-        </div>
-      </div>
-    </nav>
   </header>
   <router-view />
   <Footer />
 </template>
 <script>
 import Footer from '@/views/partials/Footer.vue'
+import Navbar from '@/views/partials/Navbar.vue'
 
 export default {
   name: "App",
   components: {
-    Footer
+    Footer,
+    Navbar,
   },
   data() {
     return {

src/assets/global.scss

@@ -6,3 +6,7 @@
 
 @import "variables";
 @import "bootstrap/scss/bootstrap";
+
+.btn-primary {
+  color: #fff !important;
+}

src/assets/variables.scss

@@ -4,5 +4,13 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+$gray-100: #edefeb;
+$gray-800: #344b5d;
+
 $primary: #0790a9;
-$dark: #344b5d;
+$dark: $gray-800;
+
+$body-bg: $gray-100;
+
+$link-decoration: none;
+$link-hover-decoration: underline;

src/views/Index.vue

@@ -5,12 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <div class="container">
+  <div class="container pt-5">
-    <h1>WTF Kompetenzinventar</h1>
+    <div class="text-center mb-5">
-    <form @submit.prevent="submitLogin()">
+      <img class="wtf-logo wtf-logo--index" src="@/assets/img/wtf_logo.svg">
+      <h1>Kompetenzinventar</h1>
+    </div>
+    <form @submit.prevent="submitLogin()" class="bg-white p-3 login-form">
       <div class="mb-3">
-        <label for="exampleInputusername1" class="form-label"
+        <label for="exampleInputusername1" class="form-label" >
-          >Benutzername:
+          WTF-Benutzername:
         </label>
         <input
           type="username"
@@ -30,21 +33,16 @@ SPDX-License-Identifier: AGPL-3.0-or-later
           required
         />
       </div>
-      <button type="submit" class="btn btn-primary mb-4">Login</button>
+      <button type="submit" class="btn btn-primary">Login</button>
-    </form>
+      <a class="btn btn-link" href="https://resetpw.wtf-eg.de/">Passwort vergessen?</a>
-    <a href="https://resetpw.wtf-eg.de/">Globales WTF Passwort zurücksetzen</a>
       <div
-      class="alert alert-danger mb-4 mt-4"
+        class="alert alert-danger mt-3 mb-0"
         role="alert"
         v-if="showErrorMessage"
       >
-      Mit deinen Login Daten ist ein Fehler aufgetreten. Versuch es nochmal oder
+        Dein Benutzername oder Passwort ist falsch.<br>Versuche es noch einmal.
-      <a href="https://resetpw.wtf-eg.de/">hast du dein Passwort vergessen?</a>.
       </div>
-    <p>
+    </form>
-      Das Login gilt nur für WTF eG Mitglieder. Du kannst dein LDAP Passwort
-      hier ändern.
-    </p>
   </div>
 </template>
 <script>
@@ -62,3 +60,18 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.container {
+  min-height: 100vh;
+}
+
+.login-form {
+  margin: 0 auto;
+  max-width: 500px;
+}
+
+.wtf-logo--index {
+  max-width: 200px;
+}
+</style>

src/views/partials/Navbar.vue

@@ -0,0 +1,83 @@
+<!--
+SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#">KI</a>
+      <button
+        @click="showMobileNavbar = !showMobileNavbar"
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div
+        class="collapse navbar-collapse"
+        :class="{
+          show: showMobileNavbar,
+        }"
+        id="navbarSupportedContent"
+      >
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <router-link
+              class="nav-link"
+              :to="{ path: `/s/search` }"
+              active-class="active"
+              >Suche</router-link
+            >
+          </li>
+          <li class="nav-item">
+            <router-link
+              class="nav-link"
+              :to="{ path: `/s/profile/${memberId}` }"
+              active-class="active"
+              >Mein Profil</router-link
+            >
+          </li>
+          <li class="nav-item">
+            <router-link
+              class="nav-link"
+              :to="{ path: `/s/profile-edit` }"
+              active-class="active"
+              >Bearbeiten</router-link
+            >
+          </li>
+          <li class="nav-item">
+            <button class="btn btn-outline-danger" @click="logout()">
+              Logout
+            </button>
+            <a class="nav-link active" aria-current="page" href="#"></a>
+          </li>
+        </ul>
+        <form class="d-flex" @submit.prevent="searchRedirect()">
+          <input
+            class="form-control me-2"
+            v-model="searchText"
+            type="search"
+            placeholder="Profile durchsuchen"
+            aria-label="Search"
+          />
+          <button
+            class="btn btn-outline-primary"
+            type="submit"
+          >
+            <img
+              src="/img/bootstrap-icons-1.5.0/search.svg"
+              alt="Suche Icon"
+            />
+          </button>
+        </form>
+      </div>
+    </div>
+  </nav>
+</template>