Fix navbar and login view
This commit is contained in:
parent
dde639f3d1
commit
6e4c2ddabd
5 changed files with 49 additions and 16 deletions
|
@ -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> {
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
Reference in a new issue