apply login view design #29

src/views/Index.vue

@@ -5,12 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
 <template>
-  <div class="container">
-    <h1>WTF Kompetenzinventar</h1>
-    <form @submit.prevent="submitLogin()">
+  <div class="container pt-5">
+    <div class="text-center mb-5">
+      <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"
-          >Benutzername:
+        <label for="exampleInputusername1" class="form-label" >
+          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>
+      <a class="btn btn-link" href="https://resetpw.wtf-eg.de/">Passwort vergessen?</a>
+      <div
+        class="alert alert-danger mt-3 mb-0"
+        role="alert"
+        v-if="showErrorMessage"
+      >
+        Dein Benutzername oder Passwort ist falsch.<br>Versuche es noch einmal.
+      </div>
     </form>
-    <a href="https://resetpw.wtf-eg.de/">Globales WTF Passwort zurücksetzen</a>
-    <div
-      class="alert alert-danger mb-4 mt-4"
-      role="alert"
-      v-if="showErrorMessage"
-    >
-      Mit deinen Login Daten ist ein Fehler aufgetreten. Versuch es nochmal oder
-      <a href="https://resetpw.wtf-eg.de/">hast du dein Passwort vergessen?</a>.
-    </div>
-    <p>
-      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>