systemausfall.org/userausfall
Archived
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

refactor: Refactor frontend views and components

Browse source
This commit is contained in:
aldrin 2021-08-09 14:28:26 +02:00
parent 9c763c4b3b
commit 517f79c9f9
8 changed files with 104 additions and 169 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/App.vue
View file

@ -1,16 +1,25 @@
<template>
<div id="app">
<Navbar />
<router-view />
<navbar />
<section class="container">
<div class="columns is-centered">
<router-view />
</div>
</section>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Navbar from "@/components/Navbar.vue";
import { user } from "@/api";
@Component({ components: { Navbar } })
export default class App extends Vue {}
export default class App extends Vue {
public async created(): Promise<void> {
if (!user.isAuthenticated && this.$route.name !== "login") {
this.$router.push({ name: "login" });
}
}
}
</script>
<style lang="scss"></style>

3
src/api.ts
View file

@ -1,4 +1,5 @@
import Cookies from "js-cookie";
import Vue from "vue";
type HTTPMethod = "GET" | "POST" | "PUT" | "PATCH";
@ -95,3 +96,5 @@ export class User {
});
}
}
export const user = Vue.observable(new User());

30
src/components/InlineEditor.vue
View file

@ -1,30 +0,0 @@
<template>
<div style="display: flex">
<b-input v-if="isEditing" v-model="editorValue" />
<span v-else>{{ value }}</span>
<b-button @click="toggleEditor" style="margin-left: auto">{{
isEditing ? "Speichern" : "Bearbeiten"
}}</b-button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class InlineEditor extends Vue {
@Prop() private value: string | undefined;
private editorValue = "";
private isEditing = false;
private created() {
this.editorValue = this.value || "";
}
private toggleEditor() {
this.isEditing = !this.isEditing;
this.$emit("input", this.editorValue);
}
}
</script>

74
src/components/LoginForm.vue
View file

@ -1,74 +0,0 @@
<template>
<form class="box" @submit.prevent="doAction">
<div v-if="errorMessage" class="notification is-danger">
{{ errorMessage }}
</div>
<b-field label="Benutzername">
<b-input type="text" v-model="user.username" />
</b-field>
<b-field label="Kennwort">
<b-input type="password" v-model="user.password" />
</b-field>
<b-field v-if="mode === 'signup'" label="Kennwort wiederholen">
<b-input type="password" v-model="password2" />
</b-field>
<div class="buttons">
<b-button native-type="submit" type="is-primary">
{{ mode === "login" ? "Anmelden" : "Konto anlegen" }}
</b-button>
<router-link v-if="mode === 'login'" to="/signup"
>Konto anlegen</router-link
>
<router-link v-else to="/login">Anmelden</router-link>
</div>
</form>
</template>
<script lang="ts">
import { Component, Prop, Watch } from "vue-property-decorator";
import { mixins } from "vue-class-component";
import { User } from "@/api";
import { Route } from "vue-router";
import { NotifyMixin } from "@/mixins";
@Component
export default class LoginForm extends mixins(NotifyMixin) {
@Prop() private user!: User;
private mode: "login" | "signup" = "login";
private password2 = "";
private errorMessage = "";
public created(): void {
if (this.$route.name === "signup") this.mode = "signup";
}
@Watch("$route")
public routeChanged(to: Route): void {
if (to.name === "signup") {
this.mode = "signup";
} else {
this.mode = "login";
}
}
private async doAction() {
try {
if (this.mode === "login") {
await this.user.login();
if (this.$route.name !== "home") this.$router.push({ name: "home" });
} else {
await this.user.signup();
this.$router.push({ name: "login" });
this.showSuccess("Du kannst dich nun anmelden.");
}
} catch {
this.errorMessage = "Fehler";
}
}
}
</script>
<style lang="scss"></style>

16
src/router/index.ts
View file

@ -1,29 +1,25 @@
import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import MainPage from "../views/MainPage.vue";
import LoginView from "../views/Login.vue";
import UserView from "../views/User.vue";
Vue.use(VueRouter);
const routes: Array<RouteConfig> = [
{
path: "/",
name: "home",
component: MainPage,
name: "index",
component: UserView,
},
{
path: "/login",
name: "login",
component: MainPage,
component: LoginView,
},
{
path: "/signup",
name: "signup",
component: MainPage,
},
{
path: "/confirm/:uid/:token",
name: "confirm",
component: MainPage,
component: LoginView,
},
];

73
src/views/Login.vue Normal file
View file

@ -0,0 +1,73 @@
<template>
<div class="column is-3-widescreen is-4-desktop is-5-tablet">
<form class="box" @submit.prevent="doAction">
<div v-if="errorMessage" class="notification is-danger">
{{ errorMessage }}
</div>
<b-field label="Benutzername">
<b-input type="text" v-model="user.username" />
</b-field>
<b-field label="Kennwort">
<b-input type="password" v-model="user.password" />
</b-field>
<b-field v-if="mode === 'signup'" label="Kennwort wiederholen">
<b-input type="password" v-model="password2" />
</b-field>
<div class="buttons">
<b-button native-type="submit" type="is-primary">
{{ mode === "login" ? "Anmelden" : "Konto anlegen" }}
</b-button>
<router-link v-if="mode === 'login'" to="/signup"
>Konto anlegen</router-link
>
<router-link v-else to="/login">Anmelden</router-link>
</div>
</form>
</div>
</template>
<script lang="ts">
import { Component, Watch } from "vue-property-decorator";
import { user } from "@/api";
import { NotifyMixin } from "@/mixins";
import { mixins } from "vue-class-component";
import { Route } from "vue-router";
@Component
export default class Login extends mixins(NotifyMixin) {
user = user;
private mode: "login" | "signup" = "login";
private password2 = "";
private errorMessage = "";
public created(): void {
if (this.$route.name === "signup") this.mode = "signup";
}
@Watch("$route")
public routeChanged(to: Route): void {
if (to.name === "signup") {
this.mode = "signup";
} else {
this.mode = "login";
}
}
private async doAction() {
try {
if (this.mode === "login") {
await this.user.login();
if (this.$route.name !== "home") this.$router.push({ name: "home" });
} else {
await this.user.signup();
this.$router.push({ name: "login" });
this.showSuccess("Du kannst dich nun anmelden.");
}
} catch {
this.errorMessage = "Fehler";
}
}
}
</script>

35
src/views/MainPage.vue
View file

@ -1,35 +0,0 @@
<template>
<section class="container">
<div class="columns is-centered">
<div
v-if="user.isAuthenticated"
class="column is-5-fullhd is-6-widescreen is-7-desktop is-7-tablet"
>
<UserTable :user="user" />
</div>
<div v-else class="column is-3-widescreen is-4-desktop is-5-tablet">
<LoginForm :user="user" />
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component } from "vue-property-decorator";
import LoginForm from "@/components/LoginForm.vue";
import { mixins } from "vue-class-component";
import { User } from "@/api";
import UserTable from "@/components/UserTable.vue";
import { NotifyMixin } from "@/mixins";
@Component({ components: { UserTable, LoginForm } })
export default class Home extends mixins(NotifyMixin) {
private user = new User();
public async created(): Promise<void> {
if (!this.user.isAuthenticated && this.$route.name !== "login") {
this.$router.push({ name: "login" });
}
}
}
</script>

23
src/components/UserTable.vue → src/views/User.vue
View file

@ -1,5 +1,5 @@
<template>
<div>
<div class="column is-5-fullhd is-6-widescreen is-7-desktop is-7-tablet">
<b-notification type="is-info" aria-close-label="Close notification">
Dein Konto ist noch nicht aktiv.
<a v-if="user.isTrusted" @click="activate()">Jetzt aktivieren</a>
@ -12,15 +12,11 @@
</tr>
<tr>
<td>Benutzername</td>
<td>
<InlineEditor v-model="user.username" @input="user.save()" />
</td>
<td>{{ user.username }}</td>
</tr>
<tr>
<td>Vertrauensperson</td>
<td>
<inline-editor v-model="user.confidantEmail" @input="user.save()" />
</td>
<td></td>
</tr>
</tbody>
</table>
@ -28,15 +24,12 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { User } from "@/api";
import InlineEditor from "@/components/InlineEditor.vue";
import { Component, Vue } from "vue-property-decorator";
import { user } from "@/api";
@Component({
components: { InlineEditor },
})
export default class UserTable extends Vue {
@Prop() private user!: User;
@Component
export default class Home extends Vue {
user = user;
async activate(): Promise<void> {
await this.user.activate();