Mark.TwoFive/home-cert-assistant
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Wiki Activity Actions

wip: Create basic form for certificate creation

Browse source
This commit is contained in:
Magnus Leßmann (@Mark.TwoFive) 2025-06-22 13:44:14 +02:00
parent dca9845fe9
commit b997a5c273
Signed by: Mark.TwoFive
GPG key ID: 58204042FE30B10C
7 changed files with 261 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

116
frontend/src/pages/certificates/index.vue
View file

@ -1,6 +1,7 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { fetchClient, type Schemas } from "@/plugins/client.ts";
import { useRouter } from "vue-router";
const certificates = ref<Schemas["Certificate"][]>([]);
@ -13,35 +14,98 @@ onMounted(() => {
getCertificates();
});
const router = useRouter();
function navigateToNew() {
router.push("/certificates/new");
}
function navigateToImport() {
router.push("/certificates/import");
}
</script>
<template>
<main>
<h2>Currently known certificates</h2>
<section id="no-certs-found" v-if="certificates.length === 0">
<v-row>
<v-col cols="12" class="text-center">
<h3>There seems to be nothing in here.</h3>
<p>Why don't you start with one of the following options.</p>
<v-row>
<v-col cols="12" md="6">
<v-btn primary>Request new certificate</v-btn>
</v-col>
<v-col cols="12" md="6">
<v-btn>Import an existing certificate</v-btn>
</v-col>
</v-row>
</v-col>
</v-row>
</section>
<section aria-label="Bekannte Zertifikate">
<ul v-if="certificates.length > 0">
<li v-for="cert in certificates" :key="cert.fingerprint">
<p>{{ cert.fingerprint }}</p>
</li>
</ul>
</section>
</main>
<v-container>
<article>
<h2>Currently known certificates</h2>
<section
v-if="certificates.length === 0"
id="no-certs-found"
>
<v-row>
<v-col
cols="12"
class="text-center pt-4"
>
<p class="font-weight-bold">
There seems to be nothing in here.
</p>
<p>Why don't you start with one of the following options.</p>
<v-row class="mt-4">
<v-col
cols="12"
md="6"
>
<v-btn
color="primary"
@click="navigateToNew"
>
Request new certificate
</v-btn>
</v-col>
<v-col
cols="12"
md="6"
>
<v-btn
color="primary"
@click="navigateToImport"
>
Import an existing certificate
</v-btn>
</v-col>
</v-row>
</v-col>
</v-row>
</section>
<section
v-if="certificates.length > 0"
id="known-certificates"
>
<ul>
<li
v-for="cert in certificates"
:key="cert.fingerprint"
>
<p>{{ cert.fingerprint }}</p>
</li>
</ul>
<v-row>
<v-col
cols="12"
md="6"
>
<v-btn @click="navigateToNew">
Request a new certificate
</v-btn>
</v-col>
<v-col
cols="12"
md="6"
>
<v-btn
color="primary"
@click="navigateToImport"
>
Import an existing certificate
</v-btn>
</v-col>
</v-row>
</section>
</article>
</v-container>
</template>
<style scoped>

6
frontend/src/pages/certificates/new.vue
View file

@ -1,9 +1,11 @@
<script setup lang="ts">
import CertificateEditor from "@/components/CertificateEditor.vue";
</script>
<template>
<h2>New certificate</h2>
<v-container>
<CertificateEditor />
</v-container>
</template>
<style scoped>