Files
pages/apps/frontend/src/emails/templates/account/VerifyEmail.vue
Calum H. 8149618187 feat: introduce vue-email for templating with tailwind (#4358)
* feat: start on vue-email set up

* feat: email rendering and base template

* refactor: body slot only

* feat: templates

* fix: lint

* fix: build process

* fix: default import issue

* feat: continue making emails

* feat: update address

* feat: new templates

* feat: email temp page viewer

* fix: lint

* fix: reset password heading

* fix: lint

* fix: qa issues
2025-09-16 15:57:34 +00:00

33 lines
1.0 KiB
Vue

<script setup lang="ts">
import { Button, Heading, Link as VLink, Text } from '@vue-email/components'
import StyledEmail from '@/emails/shared/StyledEmail.vue'
</script>
<template>
<StyledEmail
title="Verify your Modrinth email"
:manual-links="[{ link: '{verifyemail.url}', label: 'Verification link' }]"
>
<Heading as="h1" class="mb-2 text-2xl font-bold"> Verify your email </Heading>
<Text class="text-muted text-base">Hi {user.name},</Text>
<Text class="text-muted text-base">
Please visit the link below to verify your email. If the button does not work, you can copy
the link and paste it into your browser. This link expires in 24 hours.
</Text>
<Button
href="{verifyemail.url}"
target="_blank"
class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
>
Verify email
</Button>
<VLink href="{verifyemail.url}">
<Text class="text-muted mt-2 break-words text-xs font-bold">{verifyemail.url}</Text>
</VLink>
</StyledEmail>
</template>