Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/danielroe/roe.dev. This is the code and content for my personal website, built in Nuxt. roe.dev
Something went wrong. Try again.
2.6 kB · 107 lines
Vue
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108<script setup lang="ts">interface InviteValue { slug: string repo: string isActive: boolean createdAt?: string}
const props = defineProps<{ initial?: Partial<InviteValue> submitLabel?: string}>()
const emit = defineEmits<{ (e: 'submit', value: InviteValue): void}>()
const form = reactive({ slug: props.initial?.slug ?? '', repo: props.initial?.repo ?? '', isActive: props.initial?.isActive ?? true,})
const submitting = ref(false)const error = ref<string | null>(null)
async function onSubmit () { error.value = null submitting.value = true try { const value: InviteValue = { slug: form.slug.trim(), repo: form.repo.trim(), isActive: form.isActive, ...(props.initial?.createdAt ? { createdAt: props.initial.createdAt } : {}), } emit('submit', value) } catch (err) { error.value = err instanceof Error ? err.message : String(err) } finally { submitting.value = false }}</script>
<template> <form class="flex flex-col gap-4 max-w-lg" @submit.prevent="onSubmit" > <p v-if="error" class="text-sm text-red-500" > {{ error }} </p>
<label class="flex flex-col gap-1 text-sm"> <span class="text-muted">Slug <span class="text-red-500">*</span></span> <input v-model="form.slug" required type="text" pattern="[a-zA-Z0-9_\-]+" class="bg-accent px-3 py-2" > <span class="text-xs text-muted">Becomes <code>roe.dev/<slug></code>. Keep it secret; anyone with the URL gets the invite.</span> </label>
<label class="flex flex-col gap-1 text-sm"> <span class="text-muted">Repository <span class="text-red-500">*</span></span> <input v-model="form.repo" required type="text" placeholder="danielroe/example-repo" class="bg-accent px-3 py-2" > </label>
<label class="flex items-center gap-2 text-sm"> <input v-model="form.isActive" type="checkbox" > <span>Active</span> </label>
<div class="flex gap-3"> <button type="submit" :disabled="submitting" class="bg-primary text-background px-4 py-2 hover:bg-primary/90 transition-colors disabled:opacity-60" > {{ submitting ? 'Saving…' : (submitLabel ?? 'Save') }} </button> <NuxtLink to="/admin/invites" class="text-muted hover:text-primary self-center text-sm" > Cancel </NuxtLink> </div> </form></template>