Basic node registration form.

2022-08-25 18:21:42 +02:00 · 2022-08-25 18:21:42 +02:00 · fb5bf934ff
parent fb73dac224
commit fb5bf934ff
12 changed files with 549 additions and 40 deletions
--- a/frontend/src/components/ExpandableHelpBox.vue
+++ b/frontend/src/components/ExpandableHelpBox.vue
@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+interface Props {
+    text: string;
+}
+
+const props = defineProps<Props>();
+const expanded = ref(false);
+
+function toggleExpansion() {
+    expanded.value = !expanded.value;
+}
+</script>
+
+<template>
+    <i
+        class="fa fa-question-circle help-icon"
+        @click.prevent="toggleExpansion"
+        aria-hidden="true"
+        title="Hilfe"
+    />
+    <p v-if="expanded" class="help-text">
+        {{ text }}
+    </p>
+</template>
+
+<style lang="scss" scoped>
+@import "../scss/variables";
+
+.help-icon {
+    color: $help-icon-color;
+    cursor: pointer;
+}
+
+.help-text {
+    margin: $help-text-margin;
+    font-weight: normal;
+}
+</style>
--- a/frontend/src/components/form/ValidationFormInput.vue
+++ b/frontend/src/components/form/ValidationFormInput.vue
@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { getCurrentInstance, onMounted, ref } from "vue";
+import { computed, getCurrentInstance, onMounted, ref } from "vue";
 import { type Constraint, forConstraint } from "@/shared/validation/validator";
+import ExpandableHelpBox from "@/components/ExpandableHelpBox.vue";

 interface Props {
    modelValue?: string;
@ -9,6 +10,7 @@ interface Props {
    placeholder: string;
    constraint: Constraint;
    validationError: string;
+    help?: string;
 }

 const props = defineProps<Props>();
@ -16,6 +18,10 @@ const emit = defineEmits<{
    (e: "update:modelValue", value: string): void;
 }>();

+const displayLabel = computed(() =>
+    props.constraint.optional ? props.label : `${props.label}*`
+);
+
 const input = ref<HTMLInputElement>();
 const valid = ref(true);
 const validated = ref(false);
@ -68,19 +74,20 @@ onMounted(() => {
 </script>

 <template>
-    <div>
+    <div class="validation-form-input">
        <label>
-            {{ label }}:
+            {{ displayLabel }}:
+            <ExpandableHelpBox v-if="props.help" :text="props.help" />
            <input
                ref="input"
-                :value="modelValue"
+                :value="props.modelValue"
                @input="onInput"
-                :type="type || 'text'"
-                :placeholder="placeholder"
+                :type="props.type || 'text'"
+                :placeholder="props.placeholder"
            />
        </label>
        <div class="validation-error" v-if="!valid">
-            {{ validationError }}
+            {{ props.validationError }}
        </div>
    </div>
 </template>
@ -88,6 +95,10 @@ onMounted(() => {
 <style scoped lang="scss">
@import "../../scss/variables";

+.validation-form-input {
+    margin: $validation-form-input-margin;
+}
+
 label {
    display: block;
    font-weight: $label-font-weight;
--- a/frontend/src/components/nodes/NodeCreateForm.vue
+++ b/frontend/src/components/nodes/NodeCreateForm.vue
@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { useConfigStore } from "@/stores/config";
+import { useNodeStore } from "@/stores/node";
+import { computed, nextTick, ref } from "vue";
+import CONSTRAINTS from "@/shared/validation/constraints";
+import ActionButton from "@/components/form/ActionButton.vue";
+import type {
+    Coordinates,
+    EmailAddress,
+    FastdKey,
+    Hostname,
+    MAC,
+    Nickname,
+    StoredNode,
+} from "@/types";
+import {
+    ButtonSize,
+    ComponentAlignment,
+    ComponentVariant,
+    hasOwnProperty,
+} from "@/types";
+import ErrorCard from "@/components/ErrorCard.vue";
+import ButtonGroup from "@/components/form/ButtonGroup.vue";
+import ValidationForm from "@/components/form/ValidationForm.vue";
+import ValidationFormInput from "@/components/form/ValidationFormInput.vue";
+import { route, RouteName } from "@/router";
+import RouteButton from "@/components/form/RouteButton.vue";
+import { ApiError } from "@/utils/Api";
+
+const configStore = useConfigStore();
+const nodeStore = useNodeStore();
+
+const emit = defineEmits<{
+    (e: "create", node: StoredNode): void;
+}>();
+
+const generalError = ref<boolean>(false);
+
+const CONFLICT_MESSAGES: Record<string, string> = {
+    hostname: "Der Knotenname ist bereits vergeben. Bitte wähle einen anderen.",
+    key: "Für den VPN-Schlüssel gibt es bereits einen Eintrag.",
+    mac: "Für die MAC-Adresse gibt es bereits einen Eintrag.",
+};
+
+const conflictErrorMessage = ref<string | undefined>(undefined);
+
+const hostname = ref("" as Hostname);
+const fastdKey = ref("" as FastdKey);
+const mac = ref("" as MAC);
+const coords = ref("" as Coordinates);
+const nickname = ref("" as Nickname);
+const email = ref("" as EmailAddress);
+const monitoring = ref(false);
+
+async function onSubmit() {
+    generalError.value = false;
+    conflictErrorMessage.value = undefined;
+
+    // Make sure to re-render error message to trigger scrolling into view.
+    await nextTick();
+
+    try {
+        const node = await nodeStore.create({
+            hostname: hostname.value,
+            key: fastdKey.value || undefined,
+            mac: mac.value,
+            coords: coords.value || undefined,
+            nickname: nickname.value,
+            email: email.value,
+            monitoring: monitoring.value,
+        });
+        emit("create", node);
+    } catch (error) {
+        if (error instanceof ApiError) {
+            console.error(error);
+
+            const conflictingField = error.getConflictField();
+            if (
+                conflictingField !== undefined &&
+                hasOwnProperty(CONFLICT_MESSAGES, conflictingField)
+            ) {
+                conflictErrorMessage.value =
+                    CONFLICT_MESSAGES[conflictingField];
+            } else {
+                generalError.value = true;
+            }
+        } else {
+            throw error;
+        }
+    }
+}
+</script>
+
+<template>
+    <ValidationForm novalidate="" ref="form" @submit="onSubmit">
+        <h2>Neuen Knoten anmelden</h2>
+
+        <div>
+            <p>
+                Damit Dein neuer Freifunk-Router erfolgreich ins Netz
+                eingebunden werden kann, benötigen wir noch ein paar angaben von
+                Dir. Sobald Du fertig bist, kannst Du durch einen Klick auf
+                "Knoten anmelden" die Anmeldung abschließen.
+            </p>
+            <p>
+                Und keine Sorge:
+                <strong>Datenschutz ist uns genauso wichtig wie Dir.</strong>
+            </p>
+
+            <ErrorCard v-if="conflictErrorMessage">{{
+                conflictErrorMessage
+            }}</ErrorCard>
+            <ErrorCard v-if="generalError">
+                Beim Anlegen des Knotens ist ein Fehler aufgetreten. Bitte
+                probiere es später nochmal. Sollte dieses Problem weiter
+                bestehen, so wende dich bitte per E-Mail an
+                <a :href="`mailto:${email}`">{{ email }}</a
+                >.
+            </ErrorCard>
+
+            <fieldset>
+                <h3>Knotendaten</h3>
+
+                <ValidationFormInput
+                    v-model="hostname"
+                    label="Knotenname"
+                    placeholder="z. B. Lisas-Freifunk"
+                    :constraint="CONSTRAINTS.node.hostname"
+                    help="Das ist der Name, der auch auf der Karte auftaucht."
+                    validation-error="Knotennamen dürfen maximal 32 Zeichen lang sein und nur Klein- und Großbuchstaben, sowie Ziffern, - und _ enthalten."
+                />
+                <ValidationFormInput
+                    v-model="fastdKey"
+                    label="VPN-Schlüssel (bitte nur weglassen, wenn Du weisst, was Du tust)"
+                    placeholder="Dein 64-stelliger VPN-Schlüssel"
+                    :constraint="CONSTRAINTS.node.key"
+                    help="Dieser Schlüssel wird verwendet, um die Verbindung Deines Routers zu den Gateway-Servern abzusichern."
+                    validation-error="Knotennamen dürfen maximal 32 Zeichen lang sein und nur Klein- und Großbuchstaben, sowie Ziffern, - und _ enthalten."
+                />
+                <ValidationFormInput
+                    v-model="mac"
+                    label="MAC-Adresse"
+                    placeholder="z. B. 12:34:56:78:9a:bc oder 123456789abc"
+                    :constraint="CONSTRAINTS.node.mac"
+                    help="Die MAC-Adresse (kurz „MAC“) steht üblicherweise auf dem Aufkleber auf der Unterseite deines Routers. Sie wird verwendet, um die Daten Deines Routers auf der Karte korrekt zuzuordnen."
+                    validation-error="Die angegebene MAC-Adresse ist ungültig."
+                />
+            </fieldset>
+
+            <h1>TODO: Standort</h1>
+
+            <fieldset>
+                <h3>Wie können wir Dich erreichen?</h3>
+
+                <p class="help-block">
+                    Deinen Namen und Deine E-Mail-Adresse verwenden wir
+                    ausschließlich, um bei Problemen mit Deinem Router oder bei
+                    wichtigen Änderungen Kontakt zu Dir aufzunehmen. Bitte trage
+                    eine gültige E-Mail-Adresse ein, damit wir Dich im Zweifel
+                    erreichen können. Deine persönlichen Daten sind
+                    selbstverständlich
+                    <strong>nicht öffentlich einsehbar</strong> und werden von
+                    uns <strong>nicht weitergegeben</strong>
+                    oder anderweitig verwendet. Versprochen!
+                </p>
+
+                <ValidationFormInput
+                    v-model="nickname"
+                    label="Nickname / Name"
+                    placeholder="z. B. Lisa"
+                    :constraint="CONSTRAINTS.node.nickname"
+                    validation-error="Nicknames dürfen maximal 64 Zeichen lang sein und nur Klein- und Großbuchstaben, sowie Ziffern, - und _ enthalten. Umlaute sind erlaubt."
+                />
+                <ValidationFormInput
+                    v-model="email"
+                    type="email"
+                    label="E-Mail-Adresse"
+                    :placeholder="`z. B. lisa@${configStore.getConfig.community.domain}`"
+                    :constraint="CONSTRAINTS.node.email"
+                    validation-error="Die angegebene E-Mail-Adresse ist ungültig."
+                />
+            </fieldset>
+
+            <h1>TODO: Monitoring</h1>
+
+            <ButtonGroup
+                :align="ComponentAlignment.RIGHT"
+                :button-size="ButtonSize.SMALL"
+            >
+                <ActionButton
+                    type="submit"
+                    icon="dot-circle-o"
+                    :variant="ComponentVariant.INFO"
+                    :size="ButtonSize.SMALL"
+                >
+                    Knoten anmelden
+                </ActionButton>
+                <RouteButton
+                    type="reset"
+                    icon="times"
+                    :variant="ComponentVariant.SECONDARY"
+                    :size="ButtonSize.SMALL"
+                    :route="route(RouteName.HOME)"
+                >
+                    Abbrechen
+                </RouteButton>
+            </ButtonGroup>
+        </div>
+    </ValidationForm>
+</template>
+
+<style lang="scss" scoped></style>
--- a/frontend/src/components/nodes/NodeCreatedPanel.vue
+++ b/frontend/src/components/nodes/NodeCreatedPanel.vue
@ -0,0 +1,103 @@
+<script setup lang="ts">
+import ButtonGroup from "@/components/form/ButtonGroup.vue";
+import type { Hostname, StoredNode } from "@/types";
+import { ButtonSize, ComponentAlignment, ComponentVariant } from "@/types";
+import { useConfigStore } from "@/stores/config";
+import { computed } from "vue";
+import RouteButton from "@/components/form/RouteButton.vue";
+import { route, RouteName } from "@/router";
+import NodePreviewCard from "@/components/nodes/NodePreviewCard.vue";
+
+const configStore = useConfigStore();
+const email = computed(() => configStore.getConfig.community.contactEmail);
+const mapUrl = computed(() => configStore.getConfig.map.mapUrl);
+
+interface Props {
+    node: StoredNode;
+}
+
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <div>
+        <h2>Geschafft!</h2>
+        <p>
+            Dein Freifunk-Knoten ist erfolgreich angemeldet worden. Es kann
+            jetzt noch bis zu 20 Minuten dauern, bis Dein Knoten funktioniert
+            und in der
+            <a :href="mapUrl" target="_blank">Knotenkarte</a> auftaucht.
+        </p>
+
+        <p>
+            Du kannst die Daten Deines Knotens später selber ändern. Dazu
+            benötigst Du das Token unten (16-stelliger Code).
+        </p>
+
+        <p class="token-hint">Notiere Dir bitte folgendes Token:</p>
+
+        <div class="summary">
+            <span class="token">
+                <i class="fa fa-pencil"></i>
+                {{ props.node.token }}
+            </span>
+        </div>
+
+        <p>
+            <strong>Hinweis:</strong>
+            Sollte Dein Knoten länger als drei Monate offline sein, so wird
+            dieser nach einer gewissen Zeit automatisch gelöscht. Du kannst
+            Deinen Knoten selbstverständlich jederzeit neu anmelden.
+        </p>
+
+        <p>
+            Bei Fragen wende Dich gerne an
+            <a :href="`mailto:${email}`">{{ email }}</a
+            >.
+        </p>
+
+        <NodePreviewCard class="preview" :node="props.node" />
+
+        <ButtonGroup
+            :align="ComponentAlignment.CENTER"
+            :button-size="ButtonSize.MEDIUM"
+        >
+            <RouteButton
+                icon="reply"
+                :variant="ComponentVariant.SECONDARY"
+                :size="ButtonSize.MEDIUM"
+                :route="route(RouteName.HOME)"
+            >
+                Zurück zum Anfang
+            </RouteButton>
+        </ButtonGroup>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../scss/variables";
+
+.summary {
+    text-align: center;
+
+    .token {
+        display: inline-block;
+
+        padding: $node-created-summary-padding;
+
+        background-color: $node-created-summary-background-color;
+
+        border: $node-created-summary-border;
+        border-radius: $node-created-summary-border-radius;
+
+        font-size: $node-created-summary-font-size;
+    }
+}
+
+.preview {
+    margin: {
+        top: 1.5em;
+        bottom: 1em;
+    }
+}
+</style>
--- a/frontend/src/components/nodes/NodeDeleteForm.vue
+++ b/frontend/src/components/nodes/NodeDeleteForm.vue
@ -23,7 +23,7 @@ const emit = defineEmits<{
    (e: "submit", node: StoredNode): void;
 }>();

-const token = ref("");
+const token = ref("" as Token);
 const nodeNotFound = ref<boolean>(false);
 const generalError = ref<boolean>(false);

@ -34,7 +34,7 @@ async function onSubmit() {
    await nextTick();

    try {
-        const node = await nodeStore.fetchByToken(token.value as Token);
+        const node = await nodeStore.fetchByToken(token.value);
        emit("submit", node);
    } catch (error) {
        if (error instanceof ApiError) {
@ -86,6 +86,7 @@ async function onSubmit() {

            <fieldset>
                <ValidationFormInput
+                    class="token-input"
                    v-model="token"
                    label="Token"
                    placeholder="Dein 16-stelliger Token"
@ -130,4 +131,8 @@ async function onSubmit() {
    </ValidationForm>
 </template>

-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.token-input {
+    margin: 0;
+}
+</style>
--- a/frontend/src/components/nodes/NodeDeletedPanel.vue
+++ b/frontend/src/components/nodes/NodeDeletedPanel.vue
@ -20,7 +20,7 @@ const props = defineProps<Props>();

 <template>
    <div>
-        <h1>Erledigt!</h1>
+        <h2>Erledigt!</h2>
        <p>
            Die Daten Deines Freifunk-Knotens sind gelöscht worden. Es kann
            jetzt noch bis zu 20 Minuten dauern, bis die Änderungen überall
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@ -6,6 +6,7 @@ import {
 import AdminDashboardView from "@/views/AdminDashboardView.vue";
 import AdminNodesView from "@/views/AdminNodesView.vue";
 import HomeView from "@/views/HomeView.vue";
+import NodeCreateView from "@/views/NodeCreateView.vue";
 import NodeDeleteView from "@/views/NodeDeleteView.vue";
 import {
    isNodesFilter,
@ -21,6 +22,7 @@ export interface Route {

 export enum RouteName {
    HOME = "home",
+    NODE_CREATE = "node-create",
    NODE_DELETE = "node-delete",
    ADMIN = "admin",
    ADMIN_NODES = "admin-nodes",
@ -41,6 +43,11 @@ const router = createRouter({
            name: RouteName.HOME,
            component: HomeView,
        },
+        {
+            path: "/node/create",
+            name: RouteName.NODE_CREATE,
+            component: NodeCreateView,
+        },
        {
            path: "/node/delete",
            name: RouteName.NODE_DELETE,
--- a/frontend/src/scss/_variables.scss
+++ b/frontend/src/scss/_variables.scss
@ -87,6 +87,7 @@ $fieldset-padding: 0.5em 0.75em;
 $fieldset-border: 0.1em solid $gray;
 $fieldset-border-radius: 0.5em;
 $fieldset-background-color: $gray-darker;
+$validation-form-input-margin: 1em 0;

 // Inputs
 $input-padding: 0.25em 0.5em;
@ -110,6 +111,10 @@ $button-sizes: (
    large: 1.15em,
 );

+// Help
+$help-icon-color: $variant-color-info;
+$help-text-margin: 0.5em 0 0.75em 0;
+
 // Error cards
 $error-card-margin: 1em 0;
 $error-card-padding: 0.5em;
@ -136,6 +141,13 @@ $node-preview-card-map-margin: 1em 0 0.25em 0;
 $node-preview-card-field-margin: 0.25em 0;
 $node-preview-card-field-code-font-size: 1.25em;

+// Created node summary
+$node-created-summary-padding: $node-preview-card-padding;
+$node-created-summary-background-color: darken($variant-color-success, 30%);
+$node-created-summary-border: 0.2em dashed $variant-color-success;
+$node-created-summary-border-radius: $node-preview-card-border-radius;
+$node-created-summary-font-size: 1.25em;
+
 // Deleted node summary
 $node-deleted-summary-padding: $node-preview-card-padding;
 $node-deleted-summary-border: $node-preview-card-border;
--- a/frontend/src/stores/node.ts
+++ b/frontend/src/stores/node.ts
@ -1,5 +1,11 @@
 import { defineStore } from "pinia";
-import { isStoredNode, type StoredNode, type Token } from "@/types";
+import {
+    type CreateOrUpdateNode,
+    isNodeTokenResponse,
+    isStoredNode,
+    type StoredNode,
+    type Token,
+} from "@/types";
 import { api } from "@/utils/Api";

 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@ -12,6 +18,11 @@ export const useNodeStore = defineStore({
    },
    getters: {},
    actions: {
+        async create(node: CreateOrUpdateNode): Promise<StoredNode> {
+            const response = await api.post("node", isNodeTokenResponse, node);
+            return response.node;
+        },
+
        async fetchByToken(token: Token): Promise<StoredNode> {
            return await api.get(`node/${token}`, isStoredNode);
        },
--- a/frontend/src/utils/Api.ts
+++ b/frontend/src/utils/Api.ts
@ -1,8 +1,25 @@
-import { SortDirection, toIsArray, type TypeGuard } from "@/types";
+import {
+    hasOwnProperty,
+    isPlainObject,
+    isString,
+    type JSONValue,
+    SortDirection,
+    toIsArray,
+    type TypeGuard,
+} from "@/types";
 import type { Headers } from "request";
 import { parseToInteger } from "@/utils/Numbers";

-type Method = "GET" | "PUT" | "POST" | "DELETE";
+type Method = "GET" | "POST" | "PUT" | "DELETE";
+
+enum Header {
+    CONTENT_TYPE = "Content-Type",
+    "X_TOTAL_COUNT" = "x-total-count",
+}
+
+enum MimeType {
+    APPLICATION_JSON = "application/json",
+}

 enum ApiErrorType {
    REQUEST_FAILED = "request_failed",
@ -11,13 +28,15 @@ enum ApiErrorType {

 enum HttpStatusCode {
    NOT_FOUND = 404,
+    CONFLICT = 409,
 }

 export class ApiError extends Error {
    private constructor(
        message: string,
        private status: number,
-        private errorType: ApiErrorType
+        private errorType: ApiErrorType,
+        private body: JSONValue
    ) {
        super(message);
    }
@ -27,11 +46,17 @@ export class ApiError extends Error {
        path: string,
        response: Response
    ): Promise<ApiError> {
-        const body = await response.text();
+        const body: JSONValue =
+            response.headers.get(Header.CONTENT_TYPE) ===
+            MimeType.APPLICATION_JSON
+                ? await response.json()
+                : await response.text();
+
        return new ApiError(
            `API ${method} request failed: ${path} => ${response.status} - ${body}`,
            response.status,
-            ApiErrorType.REQUEST_FAILED
+            ApiErrorType.REQUEST_FAILED,
+            body
        );
    }

@ -39,12 +64,13 @@ export class ApiError extends Error {
        method: Method,
        path: string,
        response: Response,
-        json: unknown
+        json: JSONValue
    ): Promise<ApiError> {
        return new ApiError(
            `API ${method} request result has unexpected type. ${path} => ${json}`,
            response.status,
-            ApiErrorType.UNEXPECTED_RESULT_TYPE
+            ApiErrorType.UNEXPECTED_RESULT_TYPE,
+            json
        );
    }

@ -54,6 +80,26 @@ export class ApiError extends Error {
            this.status === HttpStatusCode.NOT_FOUND
        );
    }
+
+    isConflict(): boolean {
+        return (
+            this.errorType === ApiErrorType.REQUEST_FAILED &&
+            this.status === HttpStatusCode.CONFLICT
+        );
+    }
+
+    getConflictField(): string | undefined {
+        if (
+            !this.isConflict() ||
+            !isPlainObject(this.body) ||
+            !hasOwnProperty(this.body, "field") ||
+            !isString(this.body.field)
+        ) {
+            return undefined;
+        }
+
+        return this.body.field;
+    }
 }

 interface PagedListResult<T> {
@ -92,35 +138,32 @@ class Api {
        return this.baseURL + this.apiPrefix + path + queryString;
    }

-    private async sendRequest(
-        method: Method,
-        path: string,
-        queryParams?: object
-    ): Promise<ApiResponse<undefined>>;
-    private async sendRequest<T>(
-        method: Method,
-        path: string,
-        isT: TypeGuard<T>,
-        queryParams?: object
-    ): Promise<ApiResponse<T>>;
    private async sendRequest<T>(
        method: Method,
        path: string,
        isT?: TypeGuard<T>,
+        bodyData?: object,
        queryParams?: object
    ): Promise<ApiResponse<T>> {
        const url = this.toURL(path, queryParams);
-        const response = await fetch(url, {
+        const options: RequestInit = {
            method,
-        });
+        };
+        if (bodyData) {
+            options.body = JSON.stringify(bodyData);
+            options.headers = {
+                [Header.CONTENT_TYPE]: MimeType.APPLICATION_JSON,
+            };
+        }
+        const response = await fetch(url, options);

        if (!response.ok) {
            throw await ApiError.requestFailed(method, path, response);
        }

        if (isT) {
-            const json = await response.json();
-            if (isT && !isT(json)) {
+            const json: JSONValue = await response.json();
+            if (!isT(json)) {
                console.log(json);
                throw await ApiError.unexpectedResultType(
                    method,
@ -142,16 +185,58 @@ class Api {
        }
    }

+    async post<T>(
+        path: string,
+        isT: TypeGuard<T>,
+        postData: object,
+        queryParams?: object
+    ): Promise<T> {
+        const response = await this.sendRequest<T>(
+            "POST",
+            path,
+            isT,
+            postData,
+            queryParams
+        );
+        return response.result;
+    }
+
+    async put<T>(
+        path: string,
+        isT: TypeGuard<T>,
+        putData: object,
+        queryParams?: object
+    ): Promise<T> {
+        const response = await this.sendRequest<T>(
+            "PUT",
+            path,
+            isT,
+            putData,
+            queryParams
+        );
+        return response.result;
+    }
+
    private async doGet<T>(
        path: string,
        isT: TypeGuard<T>,
        queryParams?: object
    ): Promise<ApiResponse<T>> {
-        return await this.sendRequest<T>("GET", path, isT, queryParams);
+        return await this.sendRequest<T>(
+            "GET",
+            path,
+            isT,
+            undefined,
+            queryParams
+        );
    }

-    async get<T>(path: string, isT: TypeGuard<T>): Promise<T> {
-        const response = await this.doGet(path, isT);
+    async get<T>(
+        path: string,
+        isT: TypeGuard<T>,
+        queryParams?: object
+    ): Promise<T> {
+        const response = await this.doGet(path, isT, queryParams);
        return response.result;
    }

@ -171,7 +256,7 @@ class Api {
            _sortField: sortField,
            ...filter,
        });
-        const totalStr = response.headers.get("x-total-count");
+        const totalStr = response.headers.get(Header.X_TOTAL_COUNT);
        const total = parseToInteger(totalStr, 10);

        return {
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@ -23,13 +23,14 @@ import RouteButton from "@/components/form/RouteButton.vue";
            :align="ComponentAlignment.CENTER"
            :button-size="ButtonSize.LARGE"
        >
-            <ActionButton
+            <RouteButton
                :variant="ComponentVariant.INFO"
                :size="ButtonSize.LARGE"
                icon="dot-circle-o"
+                :route="route(RouteName.NODE_CREATE)"
            >
                Neuen Knoten anmelden
-            </ActionButton>
+            </RouteButton>
            <ActionButton
                :variant="ComponentVariant.PRIMARY"
                :size="ButtonSize.LARGE"
--- a/frontend/src/views/NodeCreateView.vue
+++ b/frontend/src/views/NodeCreateView.vue
@ -0,0 +1,22 @@
+<script setup lang="ts">
+import PageContainer from "@/components/page/PageContainer.vue";
+import NodeCreateForm from "@/components/nodes/NodeCreateForm.vue";
+import NodeCreatedPanel from "@/components/nodes/NodeCreatedPanel.vue";
+import { ref } from "vue";
+import type { StoredNode, Token } from "@/types";
+
+const createdNode = ref<StoredNode | undefined>(undefined);
+
+async function onCreate(node: StoredNode) {
+    createdNode.value = node;
+}
+</script>
+
+<template>
+    <PageContainer>
+        <NodeCreateForm v-if="!createdNode" @create="onCreate" />
+        <NodeCreatedPanel v-if="createdNode" :node="createdNode" />
+    </PageContainer>
+</template>
+
+<style lang="scss" scoped></style>