AstralRinth/apps/frontend/src/pages/auth/verify-email.vue

<template>
	<div>
		<template v-if="auth.user && auth.user.email_verified && !success">
			<h1>{{ formatMessage(alreadyVerifiedMessages.title) }}</h1>

			<section class="auth-form">
				<p>{{ formatMessage(alreadyVerifiedMessages.description) }}</p>

				<NuxtLink class="btn" to="/settings/account">
					<SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
				</NuxtLink>
			</section>
		</template>

		<template v-else-if="success">
			<h1>{{ formatMessage(postVerificationMessages.title) }}</h1>

			<section class="auth-form">
				<p>{{ formatMessage(postVerificationMessages.description) }}</p>

				<ButtonStyled v-if="auth.user">
					<NuxtLink to="/settings/account">
						<SettingsIcon /> {{ formatMessage(messages.accountSettings) }}
					</NuxtLink>
				</ButtonStyled>
				<ButtonStyled v-else>
					<NuxtLink to="/auth/sign-in">
						{{ formatMessage(messages.signIn) }}
						<RightArrowIcon />
					</NuxtLink>
				</ButtonStyled>
			</section>
		</template>

		<template v-else>
			<h1>{{ formatMessage(failedVerificationMessages.title) }}</h1>

			<section class="auth-form">
				<p>
					<template v-if="auth.user">
						{{ formatMessage(failedVerificationMessages.loggedInDescription) }}
					</template>
					<template v-else>
						{{ formatMessage(failedVerificationMessages.description) }}
					</template>
				</p>

				<ButtonStyled v-if="auth.user" color="brand">
					<button @click="handleResendEmailVerification">
						{{ formatMessage(failedVerificationMessages.action) }}
						<RightArrowIcon />
					</button>
				</ButtonStyled>

				<ButtonStyled v-else color="brand">
					<NuxtLink to="/auth/sign-in">
						{{ formatMessage(messages.signIn) }}
						<RightArrowIcon />
					</NuxtLink>
				</ButtonStyled>
			</section>
		</template>
	</div>
</template>
<script setup>
import { RightArrowIcon, SettingsIcon } from '@modrinth/assets'
import { ButtonStyled, injectNotificationManager } from '@modrinth/ui'

const { addNotification } = injectNotificationManager()
const { formatMessage } = useVIntl()

const messages = defineMessages({
	title: {
		id: 'auth.verify-email.title',
		defaultMessage: 'Verify Email',
	},
	accountSettings: {
		id: 'auth.verify-email.action.account-settings',
		defaultMessage: 'Account settings',
	},
	signIn: {
		id: 'auth.verify-email.action.sign-in',
		defaultMessage: 'Sign in',
	},
})

const alreadyVerifiedMessages = defineMessages({
	title: {
		id: 'auth.verify-email.already-verified.title',
		defaultMessage: 'Email already verified',
	},
	description: {
		id: 'auth.verify-email.already-verified.description',
		defaultMessage: 'Your email is already verified!',
	},
})

const postVerificationMessages = defineMessages({
	title: {
		id: 'auth.verify-email.post-verification.title',
		defaultMessage: 'Email verification',
	},
	description: {
		id: 'auth.verify-email.post-verification.description',
		defaultMessage: 'Your email address has been successfully verified!',
	},
})

const failedVerificationMessages = defineMessages({
	title: {
		id: 'auth.verify-email.failed-verification.title',
		defaultMessage: 'Email verification failed',
	},
	description: {
		id: 'auth.verify-email.failed-verification.description',
		defaultMessage:
			'We were unable to verify your email. Try re-sending the verification email through your dashboard by signing in.',
	},
	loggedInDescription: {
		id: 'auth.verify-email.failed-verification.description.logged-in',
		defaultMessage:
			'We were unable to verify your email. Try re-sending the verification email through the button below.',
	},
	action: {
		id: 'auth.verify-email.failed-verification.action',
		defaultMessage: 'Resend verification email',
	},
})

useHead({
	title: () => `${formatMessage(messages.title)} - Modrinth`,
})

const auth = await useAuth()

const success = ref(false)
const route = useNativeRoute()

if (route.query.flow) {
	try {
		const emailVerified = useState('emailVerified', () => null)

		if (emailVerified.value === null) {
			await useBaseFetch('auth/email/verify', {
				method: 'POST',
				body: {
					flow: route.query.flow,
				},
			})
			emailVerified.value = true
			success.value = true
		}

		if (emailVerified.value) {
			success.value = true

			if (auth.value.token) {
				await useAuth(auth.value.token)
			}
		}
	} catch {
		success.value = false
	}
}

async function handleResendEmailVerification() {
	try {
		await resendVerifyEmail()
		addNotification({
			title: 'Email sent',
			text: `An email with a link to verify your account has been sent to ${auth.value.user.email}.`,
			type: 'success',
		})
	} catch (err) {
		addNotification({
			title: 'An error occurred',
			text: err.data.description,
			type: 'error',
		})
	}
}
</script>