133 lines
4.9 KiB
Vue
133 lines
4.9 KiB
Vue
<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 { StoredNode, Token } from "@/types";
|
|
import { ButtonSize, ComponentAlignment, ComponentVariant } 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 email = computed(() => configStore.getConfig.community.contactEmail);
|
|
|
|
const nodeStore = useNodeStore();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "submit", node: StoredNode): void;
|
|
}>();
|
|
|
|
const token = ref("");
|
|
const nodeNotFound = ref<boolean>(false);
|
|
const generalError = ref<boolean>(false);
|
|
|
|
async function onSubmit() {
|
|
nodeNotFound.value = false;
|
|
generalError.value = false;
|
|
// Make sure to re-render error message to trigger scrolling into view.
|
|
await nextTick();
|
|
|
|
try {
|
|
const node = await nodeStore.fetchByToken(token.value as Token);
|
|
emit("submit", node);
|
|
} catch (error) {
|
|
if (error instanceof ApiError) {
|
|
if (error.isNotFoundError()) {
|
|
nodeNotFound.value = true;
|
|
} else {
|
|
console.error(error);
|
|
generalError.value = true;
|
|
}
|
|
} else {
|
|
throw error;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ValidationForm novalidate="" ref="form" @submit="onSubmit">
|
|
<h2>Knoten löschen</h2>
|
|
|
|
<div>
|
|
<p>
|
|
Um die Daten Deines Knotens zu löschen, benötigen wir den
|
|
passenden Token (eine 16-stellige Folge aus Ziffern und
|
|
Buchstaben). Diesen hast Du beim ersten Anmelden Deines Knotens
|
|
erhalten. Sinn des Tokens ist, Dich davor zu schützen, dass
|
|
Dritte unbefugt Deine Daten einsehen oder ändern können.
|
|
</p>
|
|
<p>
|
|
<strong>
|
|
Solltest Du den Token nicht mehr haben, wende Dich einfach
|
|
per E-Mail an
|
|
<a :href="`mailto:${email}`">{{ email }}</a
|
|
>.
|
|
</strong>
|
|
</p>
|
|
|
|
<ErrorCard v-if="nodeNotFound">
|
|
Zum Token wurde kein passender Knoten gefunden.
|
|
</ErrorCard>
|
|
|
|
<ErrorCard v-if="generalError">
|
|
Beim Abrufen 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>
|
|
<ValidationFormInput
|
|
v-model="token"
|
|
label="Token"
|
|
placeholder="Dein 16-stelliger Token"
|
|
:constraint="CONSTRAINTS.token"
|
|
validation-error="Das Token ist ein 16-stelliger Wert bestehend aus 0-9 und a-f."
|
|
/>
|
|
<ButtonGroup
|
|
:align="ComponentAlignment.RIGHT"
|
|
:button-size="ButtonSize.SMALL"
|
|
>
|
|
<ActionButton
|
|
type="submit"
|
|
icon="trash"
|
|
:variant="ComponentVariant.WARNING"
|
|
:size="ButtonSize.SMALL"
|
|
>
|
|
Knoten löschen
|
|
</ActionButton>
|
|
<RouteButton
|
|
type="reset"
|
|
icon="times"
|
|
:variant="ComponentVariant.SECONDARY"
|
|
:size="ButtonSize.SMALL"
|
|
:route="route(RouteName.HOME)"
|
|
>
|
|
Abbrechen
|
|
</RouteButton>
|
|
</ButtonGroup>
|
|
</fieldset>
|
|
|
|
<p>
|
|
<em>
|
|
Hinweis: Nach dem Löschen kann der Knoten ggf. weiterhin in
|
|
der Knotenkarte angezeigt werden. Dies ist dann der Fall,
|
|
wenn der Knoten eingeschaltet ist und in Reichweite eines
|
|
anderen aktiven Knotens steht. Die angezeigten Daten sind
|
|
dann die während der Einrichtung des Knotens im Config-Mode
|
|
(Konfigurationsoberfläche des Routers) hinterlegten.
|
|
</em>
|
|
</p>
|
|
</div>
|
|
</ValidationForm>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|