Compare commits

..

No commits in common. "fbb4e4502e8797d5135f1234a686e23caebc47e5" and "dde639f3d15db9b43583e47245f9e13444ecba40" have entirely different histories.

6 changed files with 55 additions and 91 deletions

View file

@ -30,21 +30,20 @@ async function request(
init.headers.set("Accept", "application/json"); init.headers.set("Accept", "application/json");
init.headers.set("Content-Type", "application/json"); init.headers.set("Content-Type", "application/json");
const response = await fetch(`/api/${endpoint}/`, init); const response = await fetch(`/api/${endpoint}/`, init);
if (response.status !== 204) { const dataOrErrors = await response.json();
if (response.status === successStatus) { if (response.status === successStatus) {
return await response.json(); return dataOrErrors;
} else { } else {
throw new APIError(response.statusText, await response.json()); throw new APIError(response.statusText, dataOrErrors);
}
} }
} }
export class User { export class User {
email: string | undefined; private email: string | undefined;
password: string | undefined; private password: string | undefined;
private username: string | null = null; private username: string | null = null;
private confidantEmail: string | null = null; private confidantEmail: string | null = null;
isAuthenticated = false; private 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,9 +24,8 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator"; import { Component, Prop, Vue } 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 {
@ -34,30 +33,11 @@ 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();
} else { } else {
await this.user.signup(); 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 // TODO: error handling, show confirmation page
} }

View file

@ -9,25 +9,21 @@
</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">
<router-link :to="{ name: 'signup' }" class="button is-primary"> <a class="button is-primary">
<strong>Konto anlegen</strong> <strong>Konto anlegen</strong>
</router-link> </a>
<router-link :to="{ name: 'login' }" class="button is-light" <a class="button is-light">Anmelden</a>
>Anmelden</router-link
>
</div> </div>
</b-navbar-item> </b-navbar-item>
</template> </template>

View file

@ -1,29 +1,19 @@
import Vue from "vue"; import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router"; import VueRouter, { RouteConfig } from "vue-router";
import MainPage from "../views/MainPage.vue"; import Home from "../views/Home.vue";
Vue.use(VueRouter); Vue.use(VueRouter);
const routes: Array<RouteConfig> = [ const routes: Array<RouteConfig> = [
{ {
path: "/", path: "/",
name: "home", name: "Home",
component: MainPage, component: Home,
},
{
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: MainPage, component: Home,
}, },
]; ];

38
src/views/Home.vue Normal file
View file

@ -0,0 +1,38 @@
<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>

View file

@ -1,39 +0,0 @@
<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>