Fix navbar and login view

This commit is contained in:
aldrin 2021-04-16 10:36:52 +02:00
parent dde639f3d1
commit 6e4c2ddabd
5 changed files with 49 additions and 16 deletions

View file

@ -39,11 +39,11 @@ async function request(
} }
export class User { export class User {
private email: string | undefined; email: string | undefined;
private password: string | undefined; password: string | undefined;
private username: string | null = null; private username: string | null = null;
private confidantEmail: string | null = null; private confidantEmail: string | null = null;
private isAuthenticated = false; isAuthenticated = false;
private token = ""; private token = "";
static async confirm(uid: string, token: string): Promise<void> { static async confirm(uid: string, token: string): Promise<void> {

View file

@ -24,8 +24,9 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { User } from "@/api"; import { User } from "@/api";
import { Route } from "vue-router";
@Component @Component
export default class LoginForm extends Vue { export default class LoginForm extends Vue {
@ -33,6 +34,19 @@ export default class LoginForm extends Vue {
private mode: "login" | "signup" = "login"; private mode: "login" | "signup" = "login";
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() { private async doAction() {
if (this.mode === "login") { if (this.mode === "login") {
await this.user.login(); await this.user.login();

View file

@ -9,21 +9,25 @@
</b-navbar-item> </b-navbar-item>
</template> </template>
<template #start> <template #start>
<!--
<b-navbar-item href="#"> Home </b-navbar-item> <b-navbar-item href="#"> Home </b-navbar-item>
<b-navbar-item href="#"> Documentation </b-navbar-item> <b-navbar-item href="#"> Documentation </b-navbar-item>
<b-navbar-dropdown label="Info"> <b-navbar-dropdown label="Info">
<b-navbar-item href="#"> About </b-navbar-item> <b-navbar-item href="#"> About </b-navbar-item>
<b-navbar-item href="#"> Contact </b-navbar-item> <b-navbar-item href="#"> Contact </b-navbar-item>
</b-navbar-dropdown> </b-navbar-dropdown>
-->
</template> </template>
<template #end> <template #end>
<b-navbar-item tag="div"> <b-navbar-item tag="div">
<div class="buttons"> <div class="buttons">
<a class="button is-primary"> <router-link :to="{ name: 'signup' }" class="button is-primary">
<strong>Konto anlegen</strong> <strong>Konto anlegen</strong>
</a> </router-link>
<a class="button is-light">Anmelden</a> <router-link :to="{ name: 'login' }" class="button is-light"
>Anmelden</router-link
>
</div> </div>
</b-navbar-item> </b-navbar-item>
</template> </template>

View file

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

View file

@ -1,7 +1,13 @@
<template> <template>
<section class="container"> <section class="container">
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-5-widescreen is-4-desktop is-5-tablet"> <div
v-if="user.isAuthenticated"
class="column is-3-widescreen is-4-desktop is-5-tablet"
>
<UserTable :user="user" />
</div>
<div v-else class="column is-3-widescreen is-4-desktop is-5-tablet">
<b-notification <b-notification
v-if="isConfirmation" v-if="isConfirmation"
type="is-success" type="is-success"
@ -10,7 +16,6 @@
Deine E-Mail-Adresse wurde erfolgreich bestätigt. Du kannst dich nun Deine E-Mail-Adresse wurde erfolgreich bestätigt. Du kannst dich nun
anmelden. anmelden.
</b-notification> </b-notification>
<UserTable v-if="user.isAuthenticated" :user="user" />
<LoginForm v-else :user="user" /> <LoginForm v-else :user="user" />
</div> </div>
</div> </div>
@ -28,8 +33,8 @@ export default class Home extends Vue {
private isConfirmation = false; private isConfirmation = false;
private user = new User(); private user = new User();
private async created() { public async created(): Promise<void> {
if (this.$route.name === "Confirm") this.isConfirmation = true; if (this.$route.name === "confirm") this.isConfirmation = true;
if (this.isConfirmation) { if (this.isConfirmation) {
await User.confirm(this.$route.params.uid, this.$route.params.token); await User.confirm(this.$route.params.uid, this.$route.params.token);
} }