107 lines
2.3 KiB
Vue
107 lines
2.3 KiB
Vue
<script setup>
|
|
import {
|
|
Body,
|
|
Container,
|
|
Heading,
|
|
Html,
|
|
Img,
|
|
Preview,
|
|
Text,
|
|
} from '@vue-email/components';
|
|
|
|
import { format } from 'date-fns';
|
|
|
|
defineProps({
|
|
user: {
|
|
type: Object,
|
|
default: () => mockUser,
|
|
},
|
|
address: {
|
|
type: String,
|
|
default: 'http://localhost:5100',
|
|
},
|
|
ip: {
|
|
type: String,
|
|
default: '127.0.0.1',
|
|
},
|
|
country: {
|
|
type: String,
|
|
default: 'Unknown',
|
|
},
|
|
timestamp: {
|
|
type: Date,
|
|
default: () => new Date(),
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
// defineProps' default factory (above, in <script setup>) references this. It must live in a plain
|
|
// <script> block: Vue's compiler forbids defineProps from referencing variables declared inside
|
|
// <script setup> itself, since that block gets hoisted out of the setup() function.
|
|
const mockUser = {
|
|
id: 1,
|
|
username: 'DebuggingLibrarian',
|
|
email: 'debug@alerts.traxxx.me',
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Html>
|
|
<Body style="font-family: sans-serif;">
|
|
<Preview>Your traxxx password has been changed</Preview>
|
|
|
|
<Container>
|
|
<Img
|
|
:src="`${address}/img/logo.png`"
|
|
width="150"
|
|
alt="traxxx"
|
|
style="margin: 15px auto 25px auto;"
|
|
/>
|
|
|
|
<Heading
|
|
as="h3"
|
|
style="color: #f65596; margin: 0 auto 0 auto;"
|
|
>Hi, {{ user.username }}</Heading>
|
|
|
|
<Heading
|
|
as="h3"
|
|
style="margin-top: 30px;"
|
|
>Your traxxx password was changed.</Heading>
|
|
|
|
<Text>Device used to change your password:</Text>
|
|
|
|
<table
|
|
align="center"
|
|
width="100%"
|
|
border="0"
|
|
cellpadding="0"
|
|
cellspacing="0"
|
|
role="presentation"
|
|
style="font-size: 14px;"
|
|
>
|
|
<tbody>
|
|
<tr>
|
|
<td style="padding: 4px 8px 4px 0;">IP:</td>
|
|
<td style="padding: 4px 0;">{{ ip }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 4px 8px 4px 0;">Country:</td>
|
|
<td style="padding: 4px 0;">{{ country }}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 4px 8px 4px 0;">Timestamp:</td>
|
|
<td style="padding: 4px 0;">{{ format(timestamp, 'yyyy-MM-dd hh:mm:ss') }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<Text style="font-size: 16px; margin: 20px 0;">If this change was made by you, you can ignore this e-mail. If this was not you, please <a
|
|
href="mailto:account@traxxx.me"
|
|
style="color: #f65596; text-decoration: none;"
|
|
>contact us</a> immediately.</Text>
|
|
</Container>
|
|
</Body>
|
|
</Html>
|
|
</template>
|