feat(templates): add MagicLink template for connection links

2024-06-17 12:11:14 +02:00 · 2024-06-17 12:11:14 +02:00 · 5e126ebcaf
parent 92b8ece1c3
commit 5e126ebcaf
2 changed files with 141 additions and 0 deletions
--- a/templates/MagicLink.tsx
+++ b/templates/MagicLink.tsx
@ -0,0 +1,140 @@
+import {
+	Body,
+	Button,
+	Container,
+	Heading,
+	Html,
+	Preview,
+	Section,
+	Text,
+} from 'jsx-email'
+import { Signature } from './components/Signature.tsx'
+import type { Template } from '../types.ts'
+import type { JSX } from 'preact'
+import {
+	bodyCss,
+	buttonCss,
+	headingCss,
+	messageCss,
+	rootCss,
+	textCss,
+} from './styles/base.tsx'
+import { BaseStyle } from './styles/base.tsx'
+
+function MagicLink(
+	{ message, device, ip, endpoint }: {
+		message?: string
+		device?: string
+		ip?: string
+		endpoint: string
+	},
+) {
+	return (
+		<Html lang='fr' style={{ fontSize: '14px' }}>
+			<BaseStyle />
+			<Preview>Nouveau lien de connection</Preview>
+			<Body style={bodyCss}>
+				<Container style={messageCss}>
+					<Section>
+						<Heading as='h1' style={headingCss}>
+							Nouveau lien de connection
+						</Heading>
+						<Text style={textCss}>
+							Une nouvelle demande de connection à été effectuée sur votre
+							compte.
+						</Text>
+						<Text style={detailsCss}>
+							<span>
+								<span style={{ fontWeight: 'bolder' }}>{'Date : '}</span>
+								{dateNow()}
+							</span>
+							<br />
+							<span>
+								<span style={{ fontWeight: 'bolder' }}>{'Appareil : '}</span>
+								{device?.length ? device : 'Iconnue'}
+							</span>
+							<br />
+							<span>
+								<span style={{ fontWeight: 'bolder' }}>{'Ip : '}</span>
+								{ip?.length ? ip : 'Inconnue'}
+							</span>
+						</Text>
+						{message?.length ? <Text style={textCss}>{message}</Text> : ''}
+						<Text style={infoCss}>
+							Si vous n'êtes pas à l'origine de cette demande vous pouvez
+							ignorer ce mail en toute sécurité.
+						</Text>
+
+						<Container
+							style={{ width: '100%', textAlign: 'center', padding: '1rem' }}
+						>
+							<Button href={endpoint} style={buttonCss}>Me connecter</Button>
+						</Container>
+					</Section>
+				</Container>
+				<Signature />
+			</Body>
+		</Html>
+	)
+}
+
+function dateNow() {
+	return new Date().toLocaleString('fr', {
+		weekday: 'long',
+		day: 'numeric',
+		month: 'long',
+		year: 'numeric',
+		hour: 'numeric',
+		minute: 'numeric',
+	})
+}
+
+const infoCss: JSX.CSSProperties = {
+	...textCss,
+	opacity: 0.7,
+}
+
+const detailsCss: JSX.CSSProperties = {
+	...textCss,
+	backgroundColor: rootCss.backgroundColor,
+	padding: '0.5rem',
+	borderRadius: '0.4rem',
+}
+
+const template: Template<typeof MagicLink, Parameters<typeof MagicLink>[0]> = {
+	props: [
+		{
+			name: 'Message',
+			description: "Message à afficher à l'utilisateur.",
+			required: false,
+			multiline: false,
+			tag: 'message',
+		},
+		{
+			name: 'Device',
+			description: 'User-Agent (ou equiv.) de la demande.',
+			required: false,
+			multiline: false,
+			tag: 'device',
+		},
+		{
+			name: 'Ip',
+			description: 'Addresse ip de la demande.',
+			required: false,
+			multiline: false,
+			tag: 'ip',
+		},
+		{
+			name: 'Endpoint',
+			description: 'Endpoint du lien "Me connecter".',
+			required: true,
+			multiline: false,
+			tag: 'endpoint',
+		},
+	],
+	name: 'magic-link',
+	description: 'Coh@bit connection magic link.',
+	builder: MagicLink,
+}
+
+export default template
--- a/templates/mod.ts
+++ b/templates/mod.ts
@ -1,2 +1,3 @@
+export { default as magicLinkTemplate } from './MagicLink.tsx'
 export { default as messageTemplate } from './Message.tsx'
 export { default as welcomeTemplate } from './Welcome.tsx'