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 {
private email: string | undefined;
private password: string | undefined;
email: string | undefined;
password: string | undefined;
private username: string | null = null;
private confidantEmail: string | null = null;
private isAuthenticated = false;
isAuthenticated = false;
private token = "";
static async confirm(uid: string, token: string): Promise<void> {

View File

@ -24,8 +24,9 @@
</template>
<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 { Route } from "vue-router";
@Component
export default class LoginForm extends Vue {
@ -33,6 +34,19 @@ export default class LoginForm extends Vue {
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() {
if (this.mode === "login") {
await this.user.login();

View File

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

View File

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

View File

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