You've already forked AstralRinth
forked from didirus/AstralRinth
feat: doc templating & cleanup of routes (#4411)
* feat: clean up route structure * feat: install html-pdf-node-ts * fea * feat: use @ceereals/vue-pdf (react-pdf) * feat: remove pdf * feat: hide cc * feat: shared template * feat: payment statement document & redirect for emails * feat: layout tweaks * fix: lint issues * fix: robots.txt * feat: remove letterhead * Delete .claude/settings.local.json Signed-off-by: Calum H. <contact@cal.engineer> --------- Signed-off-by: Calum H. <contact@cal.engineer>
This commit is contained in:
Calum H.
107
apps/frontend/src/templates/docs/finance/PaymentStatement.vue
Normal file
107
apps/frontend/src/templates/docs/finance/PaymentStatement.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<script setup lang="ts">
|
||||
import { Link as VLink, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledDoc from '../shared/StyledDoc.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledDoc title="Payment Statement">
|
||||
<Section class="mb-8">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<Text class="m-0 mb-2 text-2xl text-base font-bold">Payment Statement</Text>
|
||||
<Text class="m-0 text-sm text-secondary">Payment ID: { statement.payment_id }</Text>
|
||||
<Text class="m-0 text-sm text-secondary">Date: { statement.payment_date }</Text>
|
||||
</div>
|
||||
<div class="flex-1 text-right">
|
||||
<Text class="m-0 text-3xl font-bold text-brand">{ statement.net_amount } </Text>
|
||||
<Text class="m-0 mt-1 text-sm text-secondary">Net Amount Paid</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section class="mb-8">
|
||||
<div class="flex items-start gap-8">
|
||||
<div class="flex-1">
|
||||
<Text class="m-0 mb-3 border-b border-divider pb-2 text-base text-sm font-semibold">
|
||||
From
|
||||
</Text>
|
||||
<Text class="m-0 mb-1 text-base text-sm font-semibold">Rinth, Inc.</Text>
|
||||
<Text class="m-0 text-sm leading-tight text-secondary">800 N King St</Text>
|
||||
<Text class="m-0 text-sm leading-tight text-secondary">Suite 304 #3133</Text>
|
||||
<Text class="m-0 text-sm leading-tight text-secondary">Wilmington, DE 19801</Text>
|
||||
<Text class="m-0 mt-2 text-sm text-secondary">
|
||||
<VLink href="mailto:support@modrinth.com" class="text-blue no-underline">
|
||||
support@modrinth.com
|
||||
</VLink>
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<Text class="m-0 mb-3 border-b border-divider pb-2 text-base text-sm font-semibold">
|
||||
To
|
||||
</Text>
|
||||
<Text class="m-0 mb-1 text-base text-sm font-semibold">
|
||||
{ statement.recipient_name }
|
||||
</Text>
|
||||
<Text class="m-0 text-sm leading-tight text-secondary">
|
||||
{ statement.recipient_address_line_1 }
|
||||
</Text>
|
||||
<Text class="m-0 text-sm leading-tight text-secondary">
|
||||
{ statement.recipient_address_line_2 }
|
||||
</Text>
|
||||
<Text class="m-0 text-sm leading-tight text-secondary">
|
||||
{ statement.recipient_address_line_3 }
|
||||
</Text>
|
||||
<Text class="m-0 mt-2 text-sm text-secondary">
|
||||
<VLink href="mailto:{ statement.recipient_email }" class="text-blue no-underline">
|
||||
{ statement.recipient_email }
|
||||
</VLink>
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section class="mb-8">
|
||||
<Text class="m-0 mb-4 border-b border-divider pb-2 text-base text-lg font-semibold">
|
||||
Payment Details
|
||||
</Text>
|
||||
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<Text class="m-0 text-sm text-secondary">Gross Amount</Text>
|
||||
<Text class="m-0 text-base text-sm">{ statement.gross_amount }</Text>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<Text class="m-0 text-sm text-secondary">Processing Fees</Text>
|
||||
<Text class="m-0 text-base text-sm">{ statement.fees }</Text>
|
||||
</div>
|
||||
|
||||
<hr class="my-4 border-divider" />
|
||||
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<Text class="m-0 text-base font-semibold">Net Amount</Text>
|
||||
<Text class="m-0 text-base font-semibold">{ statement.net_amount }</Text>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section class="mb-8">
|
||||
<Text class="m-0 mb-4 border-b border-divider pb-2 text-base text-lg font-semibold">
|
||||
Purpose of Payment
|
||||
</Text>
|
||||
<Text class="m-0 text-sm leading-relaxed text-secondary">
|
||||
This payout reflects revenue earned by the creator through their activity on the Modrinth
|
||||
platform. Earnings are based on advertising revenue, subscriptions, and/or affiliate
|
||||
commissions tied to the creator's published projects, in accordance with the Rewards Program
|
||||
Terms.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Section class="mt-12 border-t border-divider pt-6">
|
||||
<Text class="text-muted m-0 text-center text-xs">
|
||||
This statement records a payout issued by Rinth, Inc. to the creator and may be retained as
|
||||
proof of payment.
|
||||
</Text>
|
||||
</Section>
|
||||
</StyledDoc>
|
||||
</template>
|
||||
6
apps/frontend/src/templates/docs/index.ts
Normal file
6
apps/frontend/src/templates/docs/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import type { Component } from 'vue'
|
||||
|
||||
export default {
|
||||
// Finance
|
||||
'payment-statement': () => import('./finance/PaymentStatement.vue'),
|
||||
} as Record<string, () => Promise<{ default: Component }>>
|
||||
54
apps/frontend/src/templates/docs/shared/StyledDoc.vue
Normal file
54
apps/frontend/src/templates/docs/shared/StyledDoc.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import { Column, Container, Img, Link as VLink, Row, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledTemplate from '../../shared/StyledTemplate.vue'
|
||||
|
||||
defineProps<{
|
||||
title?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledTemplate :title="title">
|
||||
<Section class="bg-white pb-8 pl-8 pr-8 pt-8">
|
||||
<Container class="max-w-[700px]">
|
||||
<Row class="mb-8">
|
||||
<Column>
|
||||
<Row class="mb-4">
|
||||
<Column class="w-1/3">
|
||||
<Img
|
||||
src="https://cdn.modrinth.com/email/bd3357dfae4b1d266250372db3a0988f.png"
|
||||
width="120"
|
||||
alt="Modrinth Logo"
|
||||
class="block h-auto"
|
||||
/>
|
||||
</Column>
|
||||
<Column class="w-2/3 text-right align-top">
|
||||
<Text class="m-0 mb-2 text-2xl text-base font-bold"> Rinth, Inc. </Text>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
<Section class="border-t-2 border-brand pt-6">
|
||||
<slot />
|
||||
</Section>
|
||||
</Column>
|
||||
</Row>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section class="border-t border-divider bg-bg pb-4 pl-8 pr-8 pt-4">
|
||||
<Container class="max-w-[700px]">
|
||||
<Row>
|
||||
<Column class="text-center">
|
||||
<Text class="text-muted m-0 text-xs">
|
||||
This document was generated by Modrinth. For questions, contact
|
||||
<VLink href="mailto:support@modrinth.com" class="text-blue"
|
||||
>support@modrinth.com</VLink
|
||||
>
|
||||
</Text>
|
||||
</Column>
|
||||
</Row>
|
||||
</Container>
|
||||
</Section>
|
||||
</StyledTemplate>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import { Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="New sign-in method added"
|
||||
:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"> New sign-in method added </Heading>
|
||||
|
||||
<Text class="text-muted text-base">Hi {user.name},</Text>
|
||||
<Text class="text-muted text-base">
|
||||
Your {authprovider.name} account has been connected and you can now use it to sign in to your
|
||||
Modrinth account.
|
||||
</Text>
|
||||
<Text class="text-muted text-base">
|
||||
If you did not make this change, please contact us immediately by replying to this email or
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline"
|
||||
>through our Support Portal</VLink
|
||||
>.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import { Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Sign-in method removed"
|
||||
:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"> Sign-in method removed</Heading>
|
||||
|
||||
<Text class="text-muted text-base">Hi {user.name},</Text>
|
||||
<Text class="text-muted text-base">
|
||||
Your <b>{authprovider.name}</b> account has been disconnected and you can no longer use it to
|
||||
sign in to your Modrinth account.
|
||||
</Text>
|
||||
<Text class="text-muted text-base">
|
||||
If you did not make this change, please contact us immediately by replying to this email or
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline"
|
||||
>through our Support Portal</VLink
|
||||
>.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
26
apps/frontend/src/templates/emails/account/EmailChanged.vue
Normal file
26
apps/frontend/src/templates/emails/account/EmailChanged.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import { Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Your email has been changed"
|
||||
:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"> Your email has been changed </Heading>
|
||||
|
||||
<Text class="text-muted text-base">Hi {user.name},</Text>
|
||||
<Text class="text-muted text-base">
|
||||
At your request, we've successfully updated your Modrinth account's email to
|
||||
{emailchanged.new_email}.
|
||||
</Text>
|
||||
<Text class="text-muted text-base">
|
||||
If you did not make this change, please contact us immediately by replying to this email or
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline"
|
||||
>through our Support Portal</VLink
|
||||
>.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import { Column, Heading, Img, Link as VLink, Row, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Sign in from new device"
|
||||
:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"> Sign in from new device </Heading>
|
||||
|
||||
<Text class="text-muted text-base">Hi {user.name},</Text>
|
||||
<Text class="text-muted text-base">
|
||||
We noticed that your account was just signed into from a new device or location. If this was
|
||||
you, you can safely ignore this email.
|
||||
</Text>
|
||||
|
||||
<Section class="bg-bg-super rounded-lg border border-divider pb-4 pl-4 pr-4 pt-4">
|
||||
<Row>
|
||||
<Column class="w-full">
|
||||
<Row class="mb-2 mt-0">
|
||||
<Column class="w-8">
|
||||
<Img
|
||||
width="20"
|
||||
height="20"
|
||||
alt="Time icon"
|
||||
src="https://cdn-raw.modrinth.com/email/earth.png"
|
||||
/>
|
||||
</Column>
|
||||
<Column>
|
||||
<Text class="m-0 text-sm font-semibold text-secondary">Approximate location</Text>
|
||||
<Text class="m-0 text-base">{newdevice.location}</Text>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row class="mb-2">
|
||||
<Column class="w-8">
|
||||
<Img
|
||||
width="20"
|
||||
height="20"
|
||||
alt="Time icon"
|
||||
src="https://cdn-raw.modrinth.com/email/monitor-smartphone.png"
|
||||
/>
|
||||
</Column>
|
||||
<Column>
|
||||
<Text class="m-0 text-sm font-semibold text-secondary">IP Address</Text>
|
||||
<Text class="m-0 font-mono text-base">{newdevice.ip}</Text>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Column class="w-8">
|
||||
<Img
|
||||
width="20"
|
||||
height="20"
|
||||
alt="Time icon"
|
||||
src="https://cdn-raw.modrinth.com/email/clock.png"
|
||||
/>
|
||||
</Column>
|
||||
<Column>
|
||||
<Text class="m-0 text-sm font-semibold text-secondary">Time</Text>
|
||||
<Text class="m-0 text-base">{time.now}</Text>
|
||||
</Column>
|
||||
</Row>
|
||||
</Column>
|
||||
</Row>
|
||||
</Section>
|
||||
|
||||
<Text class="text-muted text-base">
|
||||
If this wasn't you, please update your password and review your account security settings. If
|
||||
you cannot do this, contact us immediately by replying to this email or
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline"
|
||||
>through our Support Portal</VLink
|
||||
>.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
27
apps/frontend/src/templates/emails/account/PATCreated.vue
Normal file
27
apps/frontend/src/templates/emails/account/PATCreated.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import { Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="A new personal access token has been created"
|
||||
:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold">
|
||||
A new personal access token has been created
|
||||
</Heading>
|
||||
|
||||
<Text class="text-muted text-base">Hi {user.name},</Text>
|
||||
<Text class="text-muted text-base">
|
||||
A new personal access token, <b>{newpat.token_name}</b>, has been added to your account.
|
||||
</Text>
|
||||
<Text class="text-muted text-base">
|
||||
If you did not create this token, please contact us immediately by replying to this email or
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline"
|
||||
>through our Support Portal</VLink
|
||||
>.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
import { Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Your password has been changed"
|
||||
:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"> Your password has been changed </Heading>
|
||||
|
||||
<Text class="text-muted text-base">Hi {user.name},</Text>
|
||||
<Text class="text-muted text-base"> Your password has been changed on your account. </Text>
|
||||
<Text class="text-muted text-base">
|
||||
If you did not make this change, please contact us immediately by replying to this email or
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline"
|
||||
>through our Support Portal</VLink
|
||||
>.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import { Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Your password has been removed"
|
||||
:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"> Your password has been removed </Heading>
|
||||
|
||||
<Text class="text-muted text-base">Hi {user.name},</Text>
|
||||
<Text class="text-muted text-base">
|
||||
At your request, your password has been removed from your account. You must now use a linked
|
||||
authentication provider (such as your {passremoved.provider} account) to log into your
|
||||
Modrinth account.</Text
|
||||
>
|
||||
<Text class="text-muted text-base">
|
||||
If you did not make this change, please contact us immediately by replying to this email or
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline"
|
||||
>through our Support Portal</VLink
|
||||
>.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
34
apps/frontend/src/templates/emails/account/PaymentFailed.vue
Normal file
34
apps/frontend/src/templates/emails/account/PaymentFailed.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import { Button, Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Payment failed for {paymentfailed.service}"
|
||||
:manual-links="[{ link: '{billing.url}', label: 'Billing settings' }]"
|
||||
:support-info="['{subscription.id}']"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold">
|
||||
Payment failed for {paymentfailed.service}
|
||||
</Heading>
|
||||
|
||||
<Text class="text-muted text-base">Hi {user.name},</Text>
|
||||
<Text class="text-muted text-base">
|
||||
Our attempt to collect payment for {paymentfailed.amount} from the payment card on file was
|
||||
unsuccessful. Please update your billing settings to avoid suspension of your service.
|
||||
</Text>
|
||||
<Button
|
||||
href="{billing.url}"
|
||||
target="_blank"
|
||||
class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
|
||||
>
|
||||
Update billing settings
|
||||
</Button>
|
||||
|
||||
<VLink href="{billing.url}">
|
||||
<Text class="text-muted mt-2 break-words text-xs font-bold">{billing.url}</Text>
|
||||
</VLink>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { Button, Heading, Link as VLink, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Revenue available to withdraw!"
|
||||
:manual-links="[
|
||||
{ link: 'https://modrinth.com/dashboard/revenue', label: 'Revenue dashboard' },
|
||||
{ link: 'https://support.modrinth.com', label: 'Support Portal' },
|
||||
]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold">Revenue available to withdraw!</Heading>
|
||||
|
||||
<Text class="text-base">Hi {user.name},</Text>
|
||||
|
||||
<Text class="text-base">
|
||||
The {payout.amount} earned during {payout.period} has been processed and is now available to
|
||||
withdraw from your account.
|
||||
</Text>
|
||||
|
||||
<Section class="mb-4 mt-4">
|
||||
<Button
|
||||
href="https://modrinth.com/dashboard/revenue"
|
||||
target="_blank"
|
||||
class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
|
||||
>
|
||||
View revenue dashboard
|
||||
</Button>
|
||||
</Section>
|
||||
|
||||
<Text class="text-base">
|
||||
If you have any questions about the creator rewards program, please contact support through
|
||||
the
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline">Support Portal</VLink>
|
||||
or by replying to this email.
|
||||
</Text>
|
||||
|
||||
<Text class="text-base">Thank you for being a creator on Modrinth!</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
32
apps/frontend/src/templates/emails/account/ResetPassword.vue
Normal file
32
apps/frontend/src/templates/emails/account/ResetPassword.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import { Button, Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Reset your password"
|
||||
:manual-links="[{ link: '{resetpassword.url}', label: 'Password reset link' }]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"> Reset your password </Heading>
|
||||
|
||||
<Text class="text-muted text-base">Hi {user.name},</Text>
|
||||
<Text class="text-muted text-base">
|
||||
Please visit the link below to reset your password. If you did not request for your password
|
||||
to be reset, you can safely ignore this email.
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
href="{resetpassword.url}"
|
||||
target="_blank"
|
||||
class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
|
||||
>
|
||||
Reset password
|
||||
</Button>
|
||||
|
||||
<VLink href="{resetpassword.url}">
|
||||
<Text class="text-muted mt-2 break-words text-xs font-bold">{resetpassword.url}</Text>
|
||||
</VLink>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Price change for {taxnotification.service}"
|
||||
:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
|
||||
:support-info="['{subscription.id}']"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold">
|
||||
Price change for {taxnotification.service}
|
||||
</Heading>
|
||||
|
||||
<Text class="text-muted text-base">Hi {user.name},</Text>
|
||||
<Text class="text-muted text-base">
|
||||
We're writing to let you know about an update to your {taxnotification.service} subscription.
|
||||
</Text>
|
||||
|
||||
<Text class="text-muted text-base">
|
||||
Your plan and rate are staying the same. The only change is that your region is now subject to
|
||||
tax. Starting {taxnotification.due}, your next charge will include
|
||||
{taxnotification.new_tax_amount} in tax.
|
||||
</Text>
|
||||
|
||||
<Text class="text-muted text-base">
|
||||
You do not need to take any action. This change will apply automatically on
|
||||
{taxnotification.due}.
|
||||
</Text>
|
||||
|
||||
<Text class="text-muted text-base">
|
||||
Thank you for choosing Modrinth! If you have any questions or need help with your
|
||||
subscription, reply to this email or visit our
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline">Support Portal</VLink
|
||||
>.
|
||||
</Text>
|
||||
|
||||
<Text class="text-muted text-base">
|
||||
Best,<br />
|
||||
The Modrinth Team
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script setup lang="ts">
|
||||
import { Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Two-factor authentication enabled"
|
||||
:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"> Two-factor authentication enabled </Heading>
|
||||
|
||||
<Text class="text-muted text-base">Hi {user.name},</Text>
|
||||
<Text class="text-muted text-base">
|
||||
You've secured your account with two-factor authentication. Now, when signing in, you will
|
||||
need to submit the code generated by your authenticator app.
|
||||
</Text>
|
||||
<Text class="text-muted text-base">
|
||||
If you did not make this change, please contact us immediately by replying to this email or
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline"
|
||||
>through our Support Portal</VLink
|
||||
>.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import { Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="You've disabled two-factor authentication security on your account."
|
||||
:manual-links="[{ link: 'https://support.modrinth.com', label: 'Support Portal' }]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold">
|
||||
You've disabled two-factor authentication security on your account.
|
||||
</Heading>
|
||||
|
||||
<Text class="text-muted text-base">Hi {user.name},</Text>
|
||||
<Text class="text-muted text-base">
|
||||
At your request, we've removed two-factor authentication from your Modrinth account.
|
||||
</Text>
|
||||
<Text class="text-muted text-base">
|
||||
If you did not make this change, please contact us immediately by replying to this email or
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline"
|
||||
>through our Support Portal</VLink
|
||||
>.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
32
apps/frontend/src/templates/emails/account/VerifyEmail.vue
Normal file
32
apps/frontend/src/templates/emails/account/VerifyEmail.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import { Button, Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../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>
|
||||
36
apps/frontend/src/templates/emails/index.ts
Normal file
36
apps/frontend/src/templates/emails/index.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import type { Component } from 'vue'
|
||||
|
||||
export default {
|
||||
// Account
|
||||
'auth-method-added': () => import('./account/AuthenticationMethodAdded.vue'),
|
||||
'auth-method-removed': () => import('./account/AuthenticationMethodRemoved.vue'),
|
||||
'email-changed': () => import('./account/EmailChanged.vue'),
|
||||
'password-changed': () => import('./account/PasswordChanged.vue'),
|
||||
'password-removed': () => import('./account/PasswordRemoved.vue'),
|
||||
'payment-failed': () => import('./account/PaymentFailed.vue'),
|
||||
'reset-password': () => import('./account/ResetPassword.vue'),
|
||||
'two-factor-added': () => import('./account/TwoFactorAdded.vue'),
|
||||
'two-factor-removed': () => import('./account/TwoFactorRemoved.vue'),
|
||||
'verify-email': () => import('./account/VerifyEmail.vue'),
|
||||
'login-new-device': () => import('./account/LoginNewDevice.vue'),
|
||||
'payout-available': () => import('./account/PayoutAvailable.vue'),
|
||||
'personal-access-token-created': () => import('./account/PATCreated.vue'),
|
||||
|
||||
// Subscriptions
|
||||
'subscription-tax-change': () => import('./account/SubscriptionTaxChange.vue'),
|
||||
|
||||
// Moderation
|
||||
'report-submitted': () => import('./moderation/ReportSubmitted.vue'),
|
||||
'report-status-updated': () => import('./moderation/ReportStatusUpdated.vue'),
|
||||
'moderation-thread-message-received': () =>
|
||||
import('./moderation/ModerationThreadMessageReceived.vue'),
|
||||
|
||||
// Project
|
||||
'project-status-updated-neutral': () => import('./project/ProjectStatusUpdatedNeutral.vue'),
|
||||
'project-status-approved': () => import('./project/ProjectStatusApproved.vue'),
|
||||
'project-invited': () => import('./project/ProjectInvited.vue'),
|
||||
'project-transferred': () => import('./project/ProjectTransferred.vue'),
|
||||
|
||||
// Organization
|
||||
'organization-invited': () => import('./organization/OrganizationInvited.vue'),
|
||||
} as Record<string, () => Promise<{ default: Component }>>
|
||||
@@ -0,0 +1,58 @@
|
||||
<script setup lang="ts">
|
||||
import { Heading, Img, Link as VLink, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="New moderation message"
|
||||
:manual-links="[
|
||||
{ link: 'https://modrinth.com/legal/rules', label: 'Community Guidelines' },
|
||||
{
|
||||
link: 'https://modrinth.com/project/{project.id}/moderation',
|
||||
label: 'Your project\'s moderation thread',
|
||||
},
|
||||
{ link: 'https://support.modrinth.com', label: 'Support Portal' },
|
||||
]"
|
||||
>
|
||||
<Section class="mb-4 mt-2">
|
||||
<Img
|
||||
src="{project.icon_url}"
|
||||
alt="project icon"
|
||||
width="64"
|
||||
height="64"
|
||||
class="block h-auto"
|
||||
/>
|
||||
</Section>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"
|
||||
>New message from moderators on {project.name}</Heading
|
||||
>
|
||||
|
||||
<Text class="text-base">Hi {user.name},</Text>
|
||||
|
||||
<Text class="text-base">
|
||||
Modrinth's moderation team has left a message on your project,
|
||||
<VLink
|
||||
href="https://modrinth.com/project/{project.id}/moderation"
|
||||
class="text-green underline"
|
||||
>{project.name}</VLink
|
||||
>.
|
||||
</Text>
|
||||
|
||||
<Section class="bg-bg-super mb-4 mt-4 rounded-lg border border-divider pb-4 pl-4 pr-4 pt-4">
|
||||
<Text class="m-0 text-base">
|
||||
Please
|
||||
<VLink
|
||||
href="https://modrinth.com/project/{project.id}/moderation"
|
||||
class="text-green underline"
|
||||
>sign in to view the message</VLink
|
||||
>
|
||||
and reply if requested. It's important to address feedback from the moderation team
|
||||
promptly.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Text class="text-base">Thank you for publishing on Modrinth!</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
import { Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Report of '{report.title}' has been updated"
|
||||
:manual-links="[
|
||||
{ link: 'https://modrinth.com/legal/rules', label: 'Community Guidelines' },
|
||||
{
|
||||
link: 'https://modrinth.com/dashboard/report/{report.id}',
|
||||
label: 'View report in dashboard',
|
||||
},
|
||||
{ link: 'https://support.modrinth.com', label: 'Support Portal' },
|
||||
]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"
|
||||
>Report of '{report.title}' has been updated</Heading
|
||||
>
|
||||
|
||||
<Text class="text-base">Hi {user.name},</Text>
|
||||
|
||||
<Text class="text-base"
|
||||
>Your report of {report.title} from {report.date} has been updated by our moderation
|
||||
team.</Text
|
||||
>
|
||||
|
||||
<Text class="text-base">
|
||||
You can
|
||||
<VLink href="https://modrinth.com/dashboard/report/{report.id}" class="text-green underline"
|
||||
>view the full report thread</VLink
|
||||
>
|
||||
to see the update. If you have more information to add, please reply in the report thread for
|
||||
our moderators to review.
|
||||
</Text>
|
||||
|
||||
<Text class="text-base"
|
||||
>Thank you for helping keep Modrinth safe and welcoming for everyone.</Text
|
||||
>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,51 @@
|
||||
<script setup lang="ts">
|
||||
import { Heading, Link as VLink, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Report of {report.title} has been submitted"
|
||||
:manual-links="[
|
||||
{ link: 'https://modrinth.com/legal/rules', label: 'Community Guidelines' },
|
||||
{
|
||||
link: 'https://modrinth.com/dashboard/report/{newreport.id}',
|
||||
label: 'View report in dashboard',
|
||||
},
|
||||
{ link: 'https://support.modrinth.com', label: 'Support Portal' },
|
||||
]"
|
||||
>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"
|
||||
>Report of {report.title} has been submitted</Heading
|
||||
>
|
||||
|
||||
<Text class="text-base">Hi {user.name},</Text>
|
||||
|
||||
<Text class="text-base">
|
||||
We've received your report of {report.title} and our moderation team will review it shortly.
|
||||
</Text>
|
||||
|
||||
<Text class="text-base">
|
||||
Our team takes all reports seriously and will investigate according to our
|
||||
<VLink href="https://modrinth.com/legal/rules" class="text-green underline"
|
||||
>Content Rules</VLink
|
||||
>, <VLink href="https://modrinth.com/legal/terms">Terms of Service</VLink> and
|
||||
<VLink href="https://modrinth.com/legal/copyright">Copyright Policy</VLink>. You'll receive an
|
||||
email update once we've completed our review.
|
||||
</Text>
|
||||
|
||||
<Text class="text-base">
|
||||
If you have any additional information about this report, you can
|
||||
<VLink
|
||||
href="https://modrinth.com/dashboard/report/{newreport.id}"
|
||||
class="text-green underline"
|
||||
>view it here</VLink
|
||||
>.
|
||||
</Text>
|
||||
|
||||
<Text class="text-base">
|
||||
Thank you for helping keep Modrinth safe and welcoming for everyone.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,75 @@
|
||||
<script setup lang="ts">
|
||||
import { Button, Heading, Img, Link as VLink, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="You've been invited to an organization"
|
||||
:manual-links="[
|
||||
{ link: 'https://modrinth.com/organization/{organization.id}', label: 'Organization page' },
|
||||
{ link: 'https://modrinth.com/dashboard/notifications', label: 'Notification dashboard' },
|
||||
{ link: 'https://support.modrinth.com', label: 'Support Portal' },
|
||||
]"
|
||||
>
|
||||
<Section class="mb-4 mt-2">
|
||||
<Img
|
||||
src="{organization.icon_url}"
|
||||
alt="organization icon"
|
||||
width="64"
|
||||
height="64"
|
||||
class="block h-auto rounded-lg"
|
||||
/>
|
||||
</Section>
|
||||
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"
|
||||
>You've been invited to an organization</Heading
|
||||
>
|
||||
|
||||
<Text class="text-base">Hi {user.name},</Text>
|
||||
|
||||
<Text class="text-base"
|
||||
>Modrinth user
|
||||
<b
|
||||
><VLink href="https://modrinth.com/user/{inviter.name}" class="text-green underline">
|
||||
{inviter.name}
|
||||
</VLink></b
|
||||
>
|
||||
has invited you to join the organization
|
||||
<b
|
||||
><VLink
|
||||
href="https://modrinth.com/organization/{organization.id}"
|
||||
class="text-green underline"
|
||||
>
|
||||
{organization.name}
|
||||
</VLink></b
|
||||
>
|
||||
on Modrinth.
|
||||
</Text>
|
||||
|
||||
<Section class="bg-bg-super mb-4 mt-4 rounded-lg border border-divider pb-4 pl-4 pr-4 pt-4">
|
||||
<Text class="m-0 text-base">
|
||||
As an organization member you may gain access to manage projects, teams, members, settings,
|
||||
and other resources depending on the permissions assigned to you.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Button
|
||||
href="https://modrinth.com/dashboard/notifications"
|
||||
target="_blank"
|
||||
class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
|
||||
>
|
||||
Review invitation
|
||||
</Button>
|
||||
|
||||
<Text class="text-base">
|
||||
If you were not expecting this invitation you should reject it. If you believe this was sent
|
||||
in error or is abusive, please contact support
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline">
|
||||
through the Support Portal</VLink
|
||||
>
|
||||
or by replying to this email.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,70 @@
|
||||
<script setup lang="ts">
|
||||
import { Button, Heading, Img, Link as VLink, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="You've been invited to a project"
|
||||
:manual-links="[
|
||||
{ link: 'https://modrinth.com/project/{project.id}', label: 'Project page' },
|
||||
{ link: 'https://modrinth.com/dashboard/notifications', label: 'Notification dashboard' },
|
||||
{ link: 'https://support.modrinth.com', label: 'Support Portal' },
|
||||
]"
|
||||
>
|
||||
<Section class="mb-4 mt-2">
|
||||
<Img
|
||||
src="{project.icon_url}"
|
||||
alt="project icon"
|
||||
width="64"
|
||||
height="64"
|
||||
class="block h-auto rounded-lg"
|
||||
/>
|
||||
</Section>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold">You've been invited to a project</Heading>
|
||||
|
||||
<Text class="text-base">Hi {user.name},</Text>
|
||||
|
||||
<Text class="text-base">
|
||||
Modrinth user
|
||||
<b
|
||||
><VLink href="https://modrinth.com/user/{inviter.name}" class="text-green underline">
|
||||
{inviter.name}
|
||||
</VLink></b
|
||||
>
|
||||
has invited you to join the project
|
||||
<b>
|
||||
<VLink href="https://modrinth.com/project/{project.id}" class="text-green underline">
|
||||
{project.name}
|
||||
</VLink>
|
||||
</b>
|
||||
on Modrinth.
|
||||
</Text>
|
||||
|
||||
<Section class="bg-bg-super mb-4 mt-4 rounded-lg border border-divider pb-4 pl-4 pr-4 pt-4">
|
||||
<Text class="m-0 text-base">
|
||||
As a project member you may be able to manage versions, edit project details, configure
|
||||
settings, and collaborate with other maintainers depending on the permissions assigned to
|
||||
you.
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Button
|
||||
href="https://modrinth.com/dashboard/notifications"
|
||||
target="_blank"
|
||||
class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
|
||||
>
|
||||
Review invitation
|
||||
</Button>
|
||||
|
||||
<Text class="text-base">
|
||||
If you were not expecting this invitation you should reject the invitation. If you believe
|
||||
this was sent in error or is abusive, please contact support
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline">
|
||||
through the Support Portal</VLink
|
||||
>
|
||||
or by replying to this email.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
import { Button, Heading, Img, Link as VLink, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Your project, {project.name}, has been approved 🎉"
|
||||
:manual-links="[
|
||||
{ link: 'https://modrinth.com/project/{project.id}', label: 'Project page' },
|
||||
{ link: 'https://modrinth.com/legal/rules', label: 'Community Guidelines' },
|
||||
{ link: 'https://support.modrinth.com', label: 'Support Portal' },
|
||||
]"
|
||||
>
|
||||
<Section class="mb-4 mt-2">
|
||||
<Img
|
||||
src="{project.icon_url}"
|
||||
alt="project icon"
|
||||
width="64"
|
||||
height="64"
|
||||
class="block h-auto rounded-lg"
|
||||
/>
|
||||
</Section>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"
|
||||
>Your project, {project.name}, has been approved 🎉</Heading
|
||||
>
|
||||
|
||||
<Text class="text-base">Congratulations {user.name},</Text>
|
||||
|
||||
<Text class="text-base">
|
||||
Your project
|
||||
<VLink href="https://modrinth.com/project/{project.id}" class="text-green underline"
|
||||
>{project.name}</VLink
|
||||
>
|
||||
has been <b>approved</b> by the moderation team!
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
href="https://modrinth.com/project/{project.id}"
|
||||
target="_blank"
|
||||
class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
|
||||
>
|
||||
View project
|
||||
</Button>
|
||||
|
||||
<Text class="text-base">
|
||||
If you have questions or believe something isn't correct, you can reply to this email or reach
|
||||
out via the
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline">Support Portal</VLink
|
||||
>.
|
||||
</Text>
|
||||
|
||||
<Text class="text-base">Thank you for sharing your work with the Modrinth community!</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import { Button, Heading, Img, Link as VLink, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Your project, {project.name}, status has been updated"
|
||||
:manual-links="[
|
||||
{ link: 'https://modrinth.com/legal/rules', label: 'Community Guidelines' },
|
||||
{
|
||||
link: 'https://modrinth.com/project/{project.id}/moderation',
|
||||
label: 'Your project\'s moderation thread',
|
||||
},
|
||||
{ link: 'https://support.modrinth.com', label: 'Support Portal' },
|
||||
]"
|
||||
>
|
||||
<Section class="mb-4 mt-2">
|
||||
<Img
|
||||
src="{project.icon_url}"
|
||||
alt="project icon"
|
||||
width="64"
|
||||
height="64"
|
||||
class="block h-auto rounded-lg"
|
||||
/>
|
||||
</Section>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold"
|
||||
>Your project, {project.name}, status has been updated</Heading
|
||||
>
|
||||
|
||||
<Text class="text-base">Hi {user.name},</Text>
|
||||
|
||||
<Text class="text-base">
|
||||
Your project's status has been changed from <b>{project.oldstatus}</b> to
|
||||
<b>{project.newstatus}</b> by the moderation team. Please review any messages left in the
|
||||
<VLink
|
||||
href="https://modrinth.com/project/{project.id}/moderation"
|
||||
class="text-green underline"
|
||||
>moderation thread</VLink
|
||||
>
|
||||
which might be relevant to why the status was changed.
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
href="https://modrinth.com/project/{project.id}"
|
||||
target="_blank"
|
||||
class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
|
||||
>
|
||||
View project
|
||||
</Button>
|
||||
|
||||
<Text class="text-base">
|
||||
If you believe this status was applied in error, you can reply in the moderation thread or
|
||||
contact support through our
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline">Support Portal</VLink>
|
||||
or by replying to this email.
|
||||
</Text>
|
||||
|
||||
<Text class="text-base">Thank you for publishing on Modrinth!</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
@@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import { Button, Heading, Img, Link as VLink, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledEmail from '../shared/StyledEmail.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledEmail
|
||||
title="Project ownership transferred"
|
||||
:manual-links="[
|
||||
{ link: 'https://modrinth.com/project/{project.id}', label: 'Project page' },
|
||||
{ link: 'https://modrinth.com/dashboard/notifications', label: 'Notification dashboard' },
|
||||
{ link: 'https://support.modrinth.com', label: 'Support Portal' },
|
||||
]"
|
||||
>
|
||||
<Section class="mb-4 mt-2">
|
||||
<Img
|
||||
src="{project.icon_url}"
|
||||
alt="project icon"
|
||||
width="64"
|
||||
height="64"
|
||||
class="block h-auto rounded-lg"
|
||||
/>
|
||||
</Section>
|
||||
<Heading as="h1" class="mb-2 text-2xl font-bold">Project ownership transferred</Heading>
|
||||
|
||||
<Text class="text-base">Hi {user.name},</Text>
|
||||
|
||||
<Text class="text-base">
|
||||
The ownership of
|
||||
<b>
|
||||
<VLink href="https://modrinth.com/project/{project.id}" class="text-green underline">
|
||||
{project.name}
|
||||
</VLink>
|
||||
</b>
|
||||
has been successfully transferred to the Modrinth {new_owner.type_capitalized}
|
||||
<b
|
||||
><VLink
|
||||
href="https://modrinth.com/{new_owner.type}/{new_owner.name}"
|
||||
class="text-green underline"
|
||||
>{new_owner.name}</VLink
|
||||
></b
|
||||
>.
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
href="https://modrinth.com/project/{project.id}"
|
||||
target="_blank"
|
||||
class="text-accentContrast inline-block rounded-[12px] bg-brand pb-3 pl-4 pr-4 pt-3 text-[14px] font-bold"
|
||||
>
|
||||
View project
|
||||
</Button>
|
||||
|
||||
<Text class="text-base">
|
||||
If you did not initiate this transfer, please contact support immediately through the
|
||||
<VLink href="https://support.modrinth.com" class="text-green underline">Support Portal</VLink>
|
||||
or by replying to this email.
|
||||
</Text>
|
||||
</StyledEmail>
|
||||
</template>
|
||||
161
apps/frontend/src/templates/emails/shared/StyledEmail.vue
Normal file
161
apps/frontend/src/templates/emails/shared/StyledEmail.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<script setup lang="ts">
|
||||
import { Column, Container, Img, Link as VLink, Row, Section, Text } from '@vue-email/components'
|
||||
|
||||
import StyledTemplate from '../../shared/StyledTemplate.vue'
|
||||
|
||||
defineProps<{
|
||||
title?: string
|
||||
manualLinks?: { link: string; label?: string }[]
|
||||
supportInfo?: string[]
|
||||
}>()
|
||||
|
||||
interface SocialLink {
|
||||
href: string
|
||||
alt: string
|
||||
src: string
|
||||
}
|
||||
|
||||
const socialLinks = Object.freeze<readonly SocialLink[]>([
|
||||
{
|
||||
href: 'https://discord.modrinth.com',
|
||||
alt: 'Discord',
|
||||
src: 'https://cdn-raw.modrinth.com/email/discord.png',
|
||||
},
|
||||
{
|
||||
href: 'https://bsky.app/profile/modrinth.com',
|
||||
alt: 'Bluesky',
|
||||
src: 'https://cdn-raw.modrinth.com/email/bluesky.png',
|
||||
},
|
||||
{
|
||||
href: 'https://floss.social/@modrinth',
|
||||
alt: 'Mastodon',
|
||||
src: 'https://cdn-raw.modrinth.com/email/mastodon.png',
|
||||
},
|
||||
{
|
||||
href: 'https://x.com/modrinth',
|
||||
alt: 'X (Twitter)',
|
||||
src: 'https://cdn-raw.modrinth.com/email/x.png',
|
||||
},
|
||||
{
|
||||
href: 'https://www.instagram.com/modrinth/',
|
||||
alt: 'Instagram',
|
||||
src: 'https://cdn-raw.modrinth.com/email/instagram.png',
|
||||
},
|
||||
{
|
||||
href: 'https://www.youtube.com/@modrinth',
|
||||
alt: 'YouTube',
|
||||
src: 'https://cdn-raw.modrinth.com/email/youtube.png',
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/modrinth',
|
||||
alt: 'GitHub',
|
||||
src: 'https://cdn-raw.modrinth.com/email/github.png',
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<StyledTemplate :title="title">
|
||||
<Section class="bg-bg pb-4 pl-4 pr-4 pt-4">
|
||||
<Container class="max-w-[600px]">
|
||||
<Row>
|
||||
<Column>
|
||||
<Img
|
||||
src="https://cdn.modrinth.com/email/f740e2decee8764a4629bff677a284f9.png"
|
||||
width="29"
|
||||
alt=""
|
||||
class="block h-auto"
|
||||
/>
|
||||
</Column>
|
||||
</Row>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section class="bg-white pb-8 pl-8 pr-8 pt-8">
|
||||
<Container class="max-w-[600px]">
|
||||
<slot />
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<Section class="mb-4 bg-bg pb-4 pl-4 pr-4 pt-4">
|
||||
<Container class="max-w-[600px]">
|
||||
<Row>
|
||||
<Column class="align-middle">
|
||||
<VLink href="https://modrinth.com" aria-label="Modrinth">
|
||||
<Img
|
||||
src="https://cdn.modrinth.com/email/bd3357dfae4b1d266250372db3a0988f.png"
|
||||
width="175"
|
||||
alt="modrinth logo"
|
||||
class="block h-auto"
|
||||
/>
|
||||
</VLink>
|
||||
|
||||
<Row class="text-right align-middle">
|
||||
<Section class="m-0 inline-block pb-0 pl-0 pr-0 pt-0">
|
||||
<template v-for="(item, index) in socialLinks" :key="item.href">
|
||||
<VLink
|
||||
:href="item.href"
|
||||
:class="['inline-block', index !== socialLinks.length - 1 ? 'mr-4' : '']"
|
||||
>
|
||||
<Img width="20" height="20" :alt="item.alt" :src="item.src" />
|
||||
</VLink>
|
||||
</template>
|
||||
</Section>
|
||||
</Row>
|
||||
|
||||
<Text class="mb-0 mt-2 text-xs" :style="{ color: '#4d4d4d' }"> Rinth, Inc. </Text>
|
||||
<Section class="m-0 pb-0 pl-0 pr-0 pt-0">
|
||||
<Text class="m-0 text-xs text-secondary">800 N King St</Text>
|
||||
<Text class="m-0 text-xs text-secondary">Suite 304 #3133</Text>
|
||||
<Text class="m-0 text-xs text-secondary">Wilmington, DE 19801</Text>
|
||||
</Section>
|
||||
</Column>
|
||||
</Row>
|
||||
</Container>
|
||||
</Section>
|
||||
|
||||
<!-- <Text
|
||||
class="text-footerText text-2xs mb-4 mt-0 pb-0 pl-4 pr-4 pt-0 text-center font-sans"
|
||||
>
|
||||
This email was sent to you as a registered user of Modrinth. You can customize the
|
||||
emails you recieve in your
|
||||
<VLink href="https://modrinth.com/settings/notifications" class="text-green underline"
|
||||
>notification settings</VLink
|
||||
>. Some emails are required to keep your account secure and cannot be disabled.
|
||||
</Text> -->
|
||||
|
||||
<hr />
|
||||
|
||||
<Section v-if="supportInfo && supportInfo.length" class="mb-0 pb-0 pl-4 pr-4 pt-0">
|
||||
<Text
|
||||
v-for="(line, index) in supportInfo"
|
||||
:key="index"
|
||||
class="text-footerText text-2xs font-sans"
|
||||
>
|
||||
{{ line }}
|
||||
</Text>
|
||||
</Section>
|
||||
|
||||
<Section
|
||||
v-if="manualLinks && manualLinks.length"
|
||||
class="text-footerText text-2xs mb-4 pb-0 pl-4 pr-4 pt-0 font-sans"
|
||||
>
|
||||
<small class="text-muted text-2xs"
|
||||
>If you're having trouble with the links above, copy and paste these URLs into your web
|
||||
browser:</small
|
||||
>
|
||||
<Text class="text-2xs text-muted mt-0">
|
||||
<span v-for="(item, index) in manualLinks" :key="index" class="block break-words">
|
||||
<span v-if="item.label">
|
||||
<b>{{ item.label }}:</b><br />
|
||||
</span>
|
||||
{{ item.link }}
|
||||
</span>
|
||||
<!-- <span class="block break-words">
|
||||
<span> <b>Notification settings:</b><br /> </span>
|
||||
https://modrinth.com/settings/notifications
|
||||
</span> -->
|
||||
</Text>
|
||||
</Section>
|
||||
</StyledTemplate>
|
||||
</template>
|
||||
92
apps/frontend/src/templates/shared/StyledTemplate.vue
Normal file
92
apps/frontend/src/templates/shared/StyledTemplate.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<script setup lang="ts">
|
||||
import { Body, Head, Html, Section, Style, Tailwind } from '@vue-email/components'
|
||||
import type { Config } from 'tailwindcss'
|
||||
|
||||
defineProps<{
|
||||
title?: string
|
||||
}>()
|
||||
|
||||
const tailwindConfig = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
bg: { DEFAULT: '#ebebeb', raised: '#ffffff', super: '#e9e9e9' },
|
||||
divider: { DEFAULT: '#babfc5', dark: '#c8cdd3' },
|
||||
base: '#2c2e31',
|
||||
secondary: '#484d54',
|
||||
contrast: '#1a202c',
|
||||
accentContrast: '#ffffff',
|
||||
red: '#cb2245',
|
||||
orange: '#e08325',
|
||||
green: '#00af5c',
|
||||
blue: '#1f68c0',
|
||||
purple: '#8e32f3',
|
||||
gray: '#595b61',
|
||||
brand: {
|
||||
DEFAULT: '#00af5c',
|
||||
highlight: 'rgba(0, 175, 92, 0.25)',
|
||||
shadow: 'rgba(0, 175, 92, 0.7)',
|
||||
},
|
||||
highlight: {
|
||||
red: 'rgba(203, 34, 69, 0.25)',
|
||||
orange: 'rgba(224, 131, 37, 0.25)',
|
||||
green: 'rgba(0, 175, 92, 0.25)',
|
||||
blue: 'rgba(31, 104, 192, 0.25)',
|
||||
purple: 'rgba(142, 50, 243, 0.25)',
|
||||
gray: 'rgba(89, 91, 97, 0.25)',
|
||||
},
|
||||
tint: {
|
||||
red: 'rgba(203, 34, 69, 0.1)',
|
||||
orange: 'rgba(224, 131, 37, 0.1)',
|
||||
green: 'rgba(0, 175, 92, 0.1)',
|
||||
blue: 'rgba(31, 104, 192, 0.1)',
|
||||
purple: 'rgba(142, 50, 243, 0.1)',
|
||||
},
|
||||
link: { DEFAULT: '#1f68c0', hover: '#1f68c0', active: '#1f68c0' },
|
||||
muted: '#777777',
|
||||
footerText: '#4d4d4d',
|
||||
},
|
||||
fontSize: {
|
||||
base: ['16px', { lineHeight: '24px' }],
|
||||
'2xl': ['28px', { lineHeight: '32px' }],
|
||||
xs: ['13px', { lineHeight: '16px' }],
|
||||
'2xs': ['11px', { lineHeight: '16px' }],
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'Arial', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
} as Partial<Config>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Html lang="en">
|
||||
<Head>
|
||||
<title>{{ title }}</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Inter:700,400"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
<Style>
|
||||
/* Outlook.com centering + line-height fixes */ .ExternalClass { width:100%; }
|
||||
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {
|
||||
line-height:100%; } table { border-collapse:separate; } a, a:link, a:visited {
|
||||
text-decoration:none; color:#1f68c0; } a:hover { text-decoration:underline; }
|
||||
h1,h2,h3,h4,h5,h6 { color:#000 !important; margin:0; mso-line-height-rule:exactly; }
|
||||
</Style>
|
||||
</Head>
|
||||
|
||||
<Body>
|
||||
<Tailwind :config="tailwindConfig">
|
||||
<Section class="m-0 pb-0 pl-0 pr-0 pt-0 font-sans">
|
||||
<slot />
|
||||
</Section>
|
||||
</Tailwind>
|
||||
</Body>
|
||||
</Html>
|
||||
</template>
|
||||
Reference in New Issue
Block a user