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