dancingCycle/ki-frontend
0
0
Fork 0
forked from kompetenzinventar/ki-frontend
Code Pull Requests Activity

apply login view design #29

Browse Source
This commit is contained in:
weeman 2021-09-19 15:56:48 +02:00
parent a13314327c
commit a1546849c8
Signed by untrusted user: weeman
GPG Key ID: 34F0524D4DA694A1
7 changed files with 133 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.reuse/dep5
View File

@ -11,7 +11,7 @@ Files: .browserslistrc .dockerignore .eslintrc.js .gitignore
Copyright: WTF Kooperative eG <https://wtf-eg.de/> Copyright: WTF Kooperative eG <https://wtf-eg.de/>
License: AGPL-3.0-or-later 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/> Copyright: WTF Kooperative eG <https://wtf-eg.de/>
License: LicenseRef-WTF License: LicenseRef-WTF

84
src/App.vue
View File

@ -5,97 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-or-later
--> -->
<template> <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/')"> <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> </header>
<router-view /> <router-view />
<Footer /> <Footer />
</template> </template>
<script> <script>
import Footer from '@/views/partials/Footer.vue' import Footer from '@/views/partials/Footer.vue'
import Navbar from '@/views/partials/Navbar.vue'
export default { export default {
name: "App", name: "App",
components: { components: {
Footer Footer,
Navbar,
}, },
data() { data() {
return { return {

4
src/assets/global.scss
View File

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

0
public/img/wtf_logo.svg → src/assets/img/wtf_logo.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

10
src/assets/variables.scss
View File

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

51
src/views/Index.vue
View File

@ -5,12 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
--> -->
<template> <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"> <div class="mb-3">
<label for="exampleInputusername1" class="form-label" <label for="exampleInputusername1" class="form-label" >
>Benutzername: WTF-Benutzername:
</label> </label>
<input <input
type="username" type="username"
@ -30,21 +33,16 @@ SPDX-License-Identifier: AGPL-3.0-or-later
required required
/> />
</div> </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> </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> </div>
</template> </template>
<script> <script>
@ -62,3 +60,18 @@ export default {
}, },
}; };
</script> </script>
<style scoped>
.container {
min-height: 100vh;
}
.login-form {
margin: 0 auto;
max-width: 500px;
}
.wtf-logo--index {
max-width: 200px;
}
</style>

83
src/views/partials/Navbar.vue Normal file
View File

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