add sites

Signed-off-by: garionion <github@entr0py.de>
This commit is contained in:
garionion 2021-04-03 23:21:58 +02:00
parent 09369d83c1
commit 104d785d51
Signed by: garionion
GPG key ID: 53352FA607FA681A
3 changed files with 156 additions and 30 deletions

View file

@ -1,6 +1,13 @@
import { LoginResponse, token } from "./types";
import { get, set } from "idb-keyval";
import { unref } from "vue";
import { cSite, LoginResponse, Site, token } from "./types";
import { get as idbGet, set as idbSet, del as idbDel } from "idb-keyval";
export * from "./types";
const enum HTTPMethod {
GET = "GET",
POST = "POST",
PATCH = "PATCH",
}
const url = "http://192.168.178.5:8080/api";
let token: token;
@ -9,7 +16,7 @@ let ready = false;
export async function init() {
if (ready) return;
await get("token").then((val: token) => {
await idbGet("token").then((val: token) => {
if (val !== undefined) {
token = val;
}
@ -17,36 +24,80 @@ export async function init() {
ready = true;
}
export async function logout(): Promise<void> {
token = { jwt: "", expiration: 0 };
await idbDel("token");
}
export async function isLoggedIn(): Promise<boolean> {
await init();
return token !== undefined && token.expiration > Date.now();
return token?.expiration > Date.now();
}
export async function login(user: string, password: string): Promise<boolean> {
await init();
let response = await fetch(`${url}/auth`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({ username: user, password: password }),
});
const login: LoginResponse = await response.json();
interface ReqOptions extends RequestInit {
method: HTTPMethod;
auth?: boolean;
}
if (response.ok) {
if (login.success) {
token = {
jwt: login.token,
expiration: Date.parse(login.expiration),
};
set("token", token).catch((error) => console.error(error));
return true;
} else {
return Promise.reject(new Error(login.message));
}
} else {
const error = new Error(login.message);
return Promise.reject(error);
async function request<T = unknown>(
endpoint: string,
options: ReqOptions,
data?: any
): Promise<T> {
if (options.auth) {
await init();
options.headers = {
...options.headers,
Authorization: `Bearer ${token.jwt}`,
};
}
if (
options.method === HTTPMethod.POST ||
options.method === HTTPMethod.PATCH
) {
options.headers = {
...options.headers,
"Content-Type": "application/json",
};
options.body = JSON.stringify(data);
}
const response = await fetch(`${url}${endpoint}`, {
...options,
headers: { ...options.headers, Accept: "application/json" },
});
if (!response.ok) {
throw new Error(response.statusText);
}
return response.json();
}
export async function login(
username: string,
password: string
): Promise<boolean> {
const login = await request<LoginResponse>(
"/auth",
{ method: HTTPMethod.POST },
{ username, password }
);
if (!login.success) {
throw new Error(login.message);
}
token = {
jwt: login.token,
expiration: Date.parse(login.expiration),
};
idbSet("token", token).catch((error) => console.error(error));
return true;
}
export async function getSites(): Promise<Site[]> {
return request<Site[]>("/sites", { auth: true, method: HTTPMethod.GET });
}
export async function createSite(site: Site) {
return request<cSite>("/sites", { auth: true, method: HTTPMethod.POST });
}

View file

@ -9,3 +9,13 @@ export interface LoginResponse {
success: boolean;
token: string;
}
export interface Site {
default_prefix: string;
id: number;
name: string;
}
export interface cSite {
"site-id": number;
}

65
src/views/Sites.vue Normal file
View file

@ -0,0 +1,65 @@
<template>
<div
class="dark:text-white container mx-auto h-full flex justify-center items-center"
>
<table class="table-fixed shadow-lg">
<thead>
<tr>
<th
class="w-1/2 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
>
Name
</th>
<th
class="w-1/4 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
>
ID
</th>
<th
class="w-1/4 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
>
Default Prefix
</th>
</tr>
</thead>
<tbody>
<tr v-for="site in sites">
<td class="border px-8 py-4">{{ site.name }}</td>
<td class="border px-8 py-4">{{ site.id }}</td>
<td class="border px-8 py-4">{{ site.default_prefix }}</td>
</tr>
</tbody>
</table>
</div>
<div
class="dark:text-white container mx-auto h-full flex justify-center items-center mt-12"
>
<h1 class="font-hairline mb-6 text-center">New Site</h1>
<form>
<label
>Name
<input type="text" placeholder="Name" />
</label>
<label>
Default Prefix
<input type="text" placeholder="Default Prefix" />
</label>
</form>
</div>
</template>
<script lang="ts">
import { getSites, Site } from "../api";
import { ref } from "vue";
export default {
name: "Sites",
setup() {
const sites = ref<Site[]>([]);
getSites().then((s) => void (sites.value = s));
return { sites };
},
};
</script>
<style scoped></style>