123 lines
3.0 KiB
Vue
123 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import type { FormSubmitEvent } from "@nuxt/ui";
|
|
|
|
const { user } = useUserSession();
|
|
const toast = useToast();
|
|
|
|
const form = useTemplateRef("form");
|
|
const submitting = ref(false);
|
|
|
|
const formData = {
|
|
activityUrl: "",
|
|
};
|
|
|
|
const validate = ({
|
|
activityUrl,
|
|
}: Partial<{
|
|
activityUrl: string;
|
|
}>) => {
|
|
if (
|
|
[
|
|
"https://strava.com/activities/",
|
|
"https://www.strava.com/activities/",
|
|
].some((u) => activityUrl!.includes(u))
|
|
) {
|
|
return [];
|
|
}
|
|
|
|
return [
|
|
{
|
|
name: "activityUrl",
|
|
message: "Please write a legit Strava activity URL.",
|
|
},
|
|
];
|
|
};
|
|
|
|
const submit = async (event: FormSubmitEvent<typeof formData>) => {
|
|
await $fetch("/api/rewrite", {
|
|
method: "POST",
|
|
query: {
|
|
activity: event.data.activityUrl,
|
|
},
|
|
})
|
|
.then(() =>
|
|
toast.add({
|
|
title: "Success",
|
|
description: "Activity has been rewritten.",
|
|
color: "success",
|
|
}),
|
|
)
|
|
.catch(() =>
|
|
toast.add({
|
|
title: "Error",
|
|
description: "Something wrong has happened. Maybe try again later.",
|
|
color: "error",
|
|
}),
|
|
)
|
|
.finally(() => {
|
|
formData.activityUrl = "";
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<UForm
|
|
:disabled="!user.premium"
|
|
ref="form"
|
|
@submit="submit"
|
|
:validate="validate"
|
|
:state="formData"
|
|
class="flex flex-col gap-8"
|
|
>
|
|
<template v-slot:default="errors">
|
|
<UContainer class="max-w-2xl py-8 flex flex-col gap-4">
|
|
<div class="flex justify-between items-center">
|
|
<div class="font-bold text-lg">🔄 Re-write activity</div>
|
|
<UTooltip
|
|
arrow
|
|
:disabled="user.premium"
|
|
text="This feature is enabled for premium users. You can upgrade to
|
|
premium by supporting Ghostwriter."
|
|
>
|
|
<UBadge variant="soft">Premium only</UBadge>
|
|
</UTooltip>
|
|
</div>
|
|
<UCard>
|
|
<div class="grid gap-4">
|
|
<CardField vertical>
|
|
<template #title> Activity URL </template>
|
|
<template #description>
|
|
Paste your Strava activity URL to rewrite it.
|
|
</template>
|
|
<template #value>
|
|
<div class="grid gap-2">
|
|
<UInput
|
|
:disabled="submitting"
|
|
v-model="formData.activityUrl"
|
|
class="w-full"
|
|
placeholder="https://www.strava.com/activities/12345678901"
|
|
/>
|
|
<div class="text-error-500 text-sm">
|
|
{{ errors?.errors[0]?.message }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</CardField>
|
|
</div>
|
|
|
|
<template #footer>
|
|
<UButton
|
|
:disabled="!user.premium"
|
|
loading-auto
|
|
label="Rewrite"
|
|
color="neutral"
|
|
variant="soft"
|
|
@click="form!.submit()"
|
|
/>
|
|
</template>
|
|
</UCard>
|
|
</UContainer>
|
|
</template>
|
|
</UForm>
|
|
</template>
|