Compare commits

..

No commits in common. "337625379240706c05bdf337bea915dbd3b3b70b" and "b54c52349120230435de8b7a4d70b96291019988" have entirely different histories.

6 changed files with 27 additions and 54 deletions

View file

@ -32,7 +32,7 @@ class Model {
} }
} }
static async create(endpoint: string, data: any) { protected async create(endpoint: string, data: any) {
const init = { const init = {
headers: new Headers(), headers: new Headers(),
method: "post", method: "post",
@ -45,10 +45,8 @@ class Model {
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);
const dataOrErrors = await response.json(); const dataOrErrors: Array<any> = await response.json();
if (response.status === 200) { if (response.status !== 201) {
return dataOrErrors;
} else {
throw new APIError(response.statusText, dataOrErrors); throw new APIError(response.statusText, dataOrErrors);
} }
} }
@ -60,27 +58,18 @@ interface UserData {
} }
export class User extends Model implements UserData { export class User extends Model implements UserData {
public isAuthenticated = false;
private token = "";
constructor(public email: string, public password: string) { constructor(public email: string, public password: string) {
super(); super();
} }
static async confirm(uid: string, token: string): Promise<void> {
await super.create("users/activation", { uid, token });
}
async login(): Promise<void> { async login(): Promise<void> {
const response = await Model.create("token/login", { await super.create("token/login", {
email: this.email, email: this.email,
password: this.password, password: this.password,
}); });
this.token = response.auth_token;
this.isAuthenticated = true;
} }
async signup(): Promise<void> { async signup(): Promise<void> {
await Model.create("users", { email: this.email, password: this.password }); await super.create("users", { email: this.email, password: this.password });
} }
} }

View file

@ -1,5 +1,5 @@
<template> <template>
<form class="box" @submit.prevent="doAction"> <form class="box" @submit.prevent="doSignup">
<b-field label="E-Mail-Adresse"> <b-field label="E-Mail-Adresse">
<b-input type="email" v-model="user.email" /> <b-input type="email" v-model="user.email" />
</b-field> </b-field>
@ -17,28 +17,22 @@
type="is-primary" type="is-primary"
style="margin-left: auto; margin-right: 0; order: 10" style="margin-left: auto; margin-right: 0; order: 10"
> >
{{ mode === "login" ? "Anmelden" : "Konto anlegen" }} Konto anlegen
</b-button> </b-button>
</div> </div>
</form> </form>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import { User } from "@/api"; import { User } from "@/api";
@Component @Component
export default class LoginForm extends Vue { export default class LoginForm extends Vue {
@Prop() private user!: User; private user = new User("", "");
private mode: "login" | "signup" = "login"; private async doSignup() {
await this.user.signup();
private async doAction() {
if (this.mode === "login") {
await this.user.login();
} else {
await this.user.signup();
}
// TODO: error handling, show confirmation page // TODO: error handling, show confirmation page
} }
} }

View file

@ -3,7 +3,7 @@
<template #brand> <template #brand>
<b-navbar-item tag="router-link" :to="{ path: '/' }"> <b-navbar-item tag="router-link" :to="{ path: '/' }">
<img <img
src="/img/logo_text.png" src="img/logo_text.png"
alt="Lightweight UI components for Vue.js based on Bulma" alt="Lightweight UI components for Vue.js based on Bulma"
/> />
</b-navbar-item> </b-navbar-item>

View file

@ -11,9 +11,13 @@ const routes: Array<RouteConfig> = [
component: Home, component: Home,
}, },
{ {
path: "/confirm/:uid/:token", path: "/about",
name: "Confirm", name: "About",
component: Home, // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
}, },
]; ];

5
src/views/About.vue Normal file
View file

@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

View file

@ -1,16 +1,8 @@
<template> <template>
<section class="container"> <section class="container">
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-3-widescreen is-4-desktop is-5-tablet"> <div class="column is-3-widescreen is-4-desktop is-3-tablet">
<b-notification <LoginForm />
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>
<LoginForm v-if="!user.isAuthenticated" :user="user" />
</div> </div>
</div> </div>
</section> </section>
@ -19,18 +11,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-property-decorator"; import { Component, Vue } from "vue-property-decorator";
import LoginForm from "@/components/LoginForm.vue"; import LoginForm from "@/components/LoginForm.vue";
import { User } from "@/api";
@Component({ components: { LoginForm } }) @Component({ components: { LoginForm } })
export default class Home extends Vue { 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> </script>