apply login view design #29
Some checks failed
continuous-integration/drone/push Build is failing

This commit is contained in:
weeman 2021-09-19 15:56:48 +02:00
parent a13314327c
commit 4f02d15c64
Signed by: weeman
GPG Key ID: 34F0524D4DA694A1
7 changed files with 127 additions and 101 deletions

View File

@ -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: public/img/wtf_logo*
Copyright: WTF Kooperative eG <https://wtf-eg.de/>
License: LicenseRef-WTF

View File

@ -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">
<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>
<Navbar />
</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 {

View File

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

View File

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View File

@ -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;

View File

@ -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>

View File

@ -0,0 +1,77 @@
<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>