added created view and confirm show

resources/js/pages/ots/Created.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { Head } from '@inertiajs/vue3';
+import { Card, CardContent, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+
+const props = defineProps<{
+  otsLink: string;
+}>();
+
+const copyLink = async () => {
+  await navigator.clipboard.writeText(props.otsLink);
+};
+</script>
+
+<template>
+  <div class="flex flex-col justify-center p-16">
+    <Head title="OTS" />
+    <Card class="w-full">
+      <CardContent>
+        <CardTitle class="mb-8 text-center text-2xl">
+          <h1>Erstellt!</h1>
+        </CardTitle>
+        <div class="flex gap-4">
+          <Input :model-value="otsLink" name="ots_link" readonly />
+          <Button variant="secondary" @click="copyLink">Kopieren</Button>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+</template>

resources/js/pages/ots/Show.vue

@@ -1,19 +1,46 @@
 <script lang="ts" setup>
-import { Head } from '@inertiajs/vue3';
+import otsRoutes from '@/routes/ots';
+import { Head, useHttp } from '@inertiajs/vue3';
 import type { OTS } from '@/types/models';
-import { Card, CardContent } from '@/components/ui/card';
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from '@/components/ui/card';
 import { Textarea } from '@/components/ui/textarea';
+import { ref } from 'vue';
+import { Button } from '@/components/ui/button';
 
-defineProps<{
-  oneTimeSecret: OTS;
+const props = defineProps<{
+  oneTimeSecretId: string;
 }>();
+
+const oneTimeSecret = ref<OTS | null>(null);
+const loadingSecret = ref<boolean>(false);
+
+const confirmShow = async () => {
+  loadingSecret.value = true;
+  try {
+    oneTimeSecret.value = await useHttp<{}, { secret: string }>().submit(
+      otsRoutes.reveal({
+        oneTimeSecret: props.oneTimeSecretId,
+      }),
+    );
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loadingSecret.value = false;
+  }
+};
 </script>
 
 <template>
   <div class="flex flex-col justify-center p-16">
     <Head title="OTS" />
     <Card class="w-full">
-      <CardContent>
+      <CardContent v-if="oneTimeSecret">
         <Textarea
           v-model="oneTimeSecret.secret"
           :rows="10"
@@ -21,6 +48,25 @@ defineProps<{
           readonly
         />
       </CardContent>
+      <CardContent v-else>
+        <CardTitle class="text-center text-xl">
+          Möchtest du das Secret Anzeigen?
+        </CardTitle>
+        <CardDescription class="text-md mb-8 text-center">
+          Nach dem Anzeigen des Secrets wird es unwiderruflich gelöscht und kann
+          nicht noch einmal angezeigt werden!
+        </CardDescription>
+        <CardAction class="justify-self-center">
+          <Button
+            :disabled="loadingSecret"
+            class="cursor-pointer"
+            variant="destructive"
+            @click="confirmShow"
+          >
+            Anzeigen
+          </Button>
+        </CardAction>
+      </CardContent>
     </Card>
   </div>
 </template>

resources/js/types/models.ts

@@ -8,7 +8,6 @@ export interface Team {
 
 export interface OTS {
   secret: string;
-  expires_at: string;
 }
 
 export type TeamMemberRole = 'owner' | 'admin' | 'member';