arthur/website-old
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/website-old.git synced 2026-01-23 00:15:02 +01:00
Code Issues 31 Packages Projects Releases Wiki Activity

Working

Browse Source
This commit is contained in:
Arthur Danjou
2021-07-21 11:37:42 +02:00
parent 384ae25439
commit f770e5d2d1
11 changed files with 49 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Footer.vue
View File

@@ -19,9 +19,9 @@
<nuxt-link class="link font-semibold" to="/env">
<span>{{ $t('header.env') }}</span>,
</nuxt-link>
<!--<nuxt-link class="link font-semibold" to="/guestbook">
<nuxt-link class="link font-semibold" to="/guestbook">
<span>{{ $t('header.guestbook') }}</span>,
</nuxt-link>-->
</nuxt-link>
<nuxt-link class="link font-semibold" to="/contact">
<span>{{ $t('header.contact') }}</span>,
</nuxt-link>

58
src/components/GuestBookForm.vue
View File

@@ -2,27 +2,15 @@
<section class="p-6 border border-indigo-600 dark:border-indigo-700 rounded-lg text-justify">
<h1 class="text-black font-bold dark:text-white text-2xl">{{ $t('guestbook.signin') }}</h1>
<h3 class="text-gray-500 dark:text-gray-400">{{ $t('guestbook.share') }}</h3>
<div v-if="!success && !error" class="my-3">
<form v-if="!success" class="relative">
<input
required
type="email"
:placeholder="$t('guestbook.form.placeholder')"
v-model="email"
class="pl-4 pr-32 py-2 mt-1 block w-full border-gray-300 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
>
<button
@click.prevent="login"
v-if="email && email.length > 0"
class="button flex items-center justify-center px-8 py-1 font-bold bg-gray-100 dark:bg-gray-700 hover:dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded hover:bg-gray-300 duration-300"
>
{{ $t('guestbook.login') }}
</button>
</form>
<div class="flex">
<div v-if="error" class="py-1 text-red-400 text-sm">
{{ $t('guestbook.form.error') }}
</div>
<div v-if="!success && !error" class="flex space-x-4 my-3">
<div @click="login('google')" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
<GoogleIcon />
</div>
<div @click="login('github')" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
<GithubIcon />
</div>
<div @click="login('twitter')" class="icon-parent flex justify-center items-center p-2 border border-black dark:border-white duration-300 cursor-pointer">
<TwitterIcon />
</div>
</div>
<div v-else class="my-3">
@@ -34,13 +22,13 @@
v-model="form.message"
class="pl-4 pr-32 py-2 mt-1 block w-full border-gray-300 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
>
<button
@click.prevent="handleForm"
v-if="form.message && form.message.length > 0"
class="button flex items-center justify-center px-8 py-1 font-bold bg-gray-100 dark:bg-gray-700 hover:dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded hover:bg-gray-300 duration-300"
>
{{ $t('guestbook.sign') }}
</button>
<button
@click.prevent="handleForm"
v-if="form.message && form.message.length > 0"
class="button flex items-center justify-center px-8 py-1 font-bold bg-gray-100 dark:bg-gray-700 hover:dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded hover:bg-gray-300 duration-300"
>
{{ $t('guestbook.sign') }}
</button>
</form>
<div class="flex">
<div v-if="error" class="py-1 text-red-400 text-sm">
@@ -66,10 +54,11 @@ export default defineComponent({
setup() {
const { $axios, $sentry, app } = useContext()
const email = ref('')
const login = async () => {
const response = await $axios.post('/guestbook/login', {
email: email.value
const login = async (driver: 'github' | 'google' | 'twitter') => {
const response = await $axios.get(`/api/auth/${driver}`, {
headers: {
'Access-Control-Allow-Origin': '*'
}
})
if (response.status === 200) {
await hasAlreadySignMessage(response.data.user.id)
@@ -84,7 +73,7 @@ export default defineComponent({
const form = ref<GuestbookForm>({} as GuestbookForm)
const handleForm = async () => {
const response = await $axios.post('/guestbook', {
const response = await $axios.post('/api/guestbook', {
message: form.value.message
}, {
headers: {
@@ -131,8 +120,7 @@ export default defineComponent({
error,
alreadySent,
handleForm,
hasAlreadySignMessage,
email
hasAlreadySignMessage
}
}
})