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 }, ): JSX.Element { 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