141 lines
3 KiB
TypeScript
141 lines
3 KiB
TypeScript
|
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
|