Compare commits

...

2 commits

Author SHA1 Message Date
fbb4e4502e Fix signup cycle (signup, confirm, login) 2021-04-16 11:08:28 +02:00
6e4c2ddabd Fix navbar and login view 2021-04-16 10:36:52 +02:00
6 changed files with 91 additions and 55 deletions

View file

@ -30,20 +30,21 @@ async function request(
init.headers.set("Accept", "application/json");
init.headers.set("Content-Type", "application/json");
const response = await fetch(`/api/${endpoint}/`, init);
const dataOrErrors = await response.json();
if (response.status !== 204) {
if (response.status === successStatus) {
return dataOrErrors;
return await response.json();
} else {
throw new APIError(response.statusText, dataOrErrors);
throw new APIError(response.statusText, await response.json());
}
}
}
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,11 +34,30 @@ 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();
} else {
await this.user.signup();
this.$router.push({ name: "login" });
this.$buefy.toast.open({
message:
"Eine E-Mail zur Bestätigung deiner E-Mail-Adresse wurde versendet.",
type: "is-success",
});
}
// TODO: error handling, show confirmation page
}

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,38 +0,0 @@
<template>
<section class="container">
<div class="columns is-centered">
<div class="column is-5-widescreen is-4-desktop is-5-tablet">
<b-notification
v-if="isConfirmation"
type="is-success"
aria-close-label="Close notification"
>
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>
</section>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import LoginForm from "@/components/LoginForm.vue";
import { User } from "@/api";
import UserTable from "@/components/UserTable.vue";
@Component({ components: { UserTable, LoginForm } })
export default class Home extends Vue {
private isConfirmation = false;
private user = new User();
private async created() {
if (this.$route.name === "Confirm") this.isConfirmation = true;
if (this.isConfirmation) {
await User.confirm(this.$route.params.uid, this.$route.params.token);
}
}
}
</script>

39
src/views/MainPage.vue Normal file
View file

@ -0,0 +1,39 @@
<template>
<section class="container">
<div class="columns is-centered">
<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">
<LoginForm :user="user" />
</div>
</div>
</section>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import LoginForm from "@/components/LoginForm.vue";
import { User } from "@/api";
import UserTable from "@/components/UserTable.vue";
@Component({ components: { UserTable, LoginForm } })
export default class Home extends Vue {
private user = new User();
public async created(): Promise<void> {
if (this.$route.name === "confirm") {
await User.confirm(this.$route.params.uid, this.$route.params.token);
this.$router.push({ name: "login" });
this.$buefy.toast.open({
message:
"Deine E-Mail-Adresse wurde bestätigt. Du kannst dich nun anmelden.",
type: "is-success",
});
}
}
}
</script>