77 lines
No EOL
3.2 KiB
Vue
77 lines
No EOL
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { IconInfoCircle } from '@tabler/icons-vue';
|
|
import { trans } from 'laravel-vue-i18n';
|
|
import { ref } from 'vue';
|
|
|
|
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import PopupLayout from '@/layouts/PopupLayout.vue';
|
|
import { store as storeBluesky } from '@/routes/social/bluesky';
|
|
|
|
interface Props {
|
|
errors?: Record<string, string>;
|
|
}
|
|
|
|
defineProps<Props>();
|
|
|
|
const formRef = ref<HTMLFormElement | null>(null);
|
|
const identifier = ref('');
|
|
const password = ref('');
|
|
const isSubmitting = ref(false);
|
|
|
|
const submit = () => {
|
|
isSubmitting.value = true;
|
|
formRef.value?.submit();
|
|
};
|
|
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '';
|
|
</script>
|
|
|
|
<template>
|
|
<PopupLayout :title="$t('accounts.bluesky.title')">
|
|
<div class="max-w-md mx-auto">
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<img src="/images/accounts/bluesky.png" alt="Bluesky" class="h-12 w-12" />
|
|
<div>
|
|
<h1 class="text-xl font-bold tracking-tight">{{ $t('accounts.bluesky.title') }}</h1>
|
|
<p class="text-sm text-muted-foreground">{{ $t('accounts.bluesky.description') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form ref="formRef" :action="storeBluesky.url()" method="POST" @submit.prevent="submit" class="space-y-4">
|
|
<input type="hidden" name="_token" :value="csrfToken" />
|
|
|
|
<div class="space-y-2">
|
|
<Label for="identifier">{{ $t('accounts.bluesky.email') }}</Label>
|
|
<Input id="identifier" name="identifier" v-model="identifier" type="text"
|
|
:placeholder="trans('accounts.bluesky.email_placeholder')" :class="{ 'border-destructive': errors?.identifier }"
|
|
required />
|
|
<p v-if="errors?.identifier" class="text-sm text-destructive">
|
|
{{ errors.identifier }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="password">{{ $t('accounts.bluesky.app_password') }}</Label>
|
|
<Input id="password" name="password" v-model="password" type="password"
|
|
:placeholder="trans('accounts.bluesky.app_password_placeholder')" :class="{ 'border-destructive': errors?.password }"
|
|
required />
|
|
<p v-if="errors?.password" class="text-sm text-destructive">
|
|
{{ errors.password }}
|
|
</p>
|
|
</div>
|
|
|
|
<Alert>
|
|
<IconInfoCircle class="h-4 w-4" />
|
|
<AlertDescription class="inline" v-html="$t('accounts.bluesky.app_password_hint')" />
|
|
</Alert>
|
|
|
|
<Button type="submit" :disabled="isSubmitting" class="w-full">
|
|
{{ isSubmitting ? $t('accounts.bluesky.submitting') : $t('accounts.bluesky.submit') }}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</PopupLayout>
|
|
</template> |