cohabit/mailer
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: cohabit:2f663f0e08cf3bbb2b93888ff737f818c05c716d
Branches Tags
cohabit:main
cohabit:0.3.2
cohabit:0.3.1
cohabit:0.3.0
cohabit:0.2.1
cohabit:0.2.0
cohabit:0.1.2
cohabit:0.1.1
cohabit:0.1.0
cohabit:0.0.0-alpha-2
cohabit:0.0.0-alpha-1
..
compare: cohabit:5e126ebcaf0540c7e25bdd865c8dd953945619f3
Branches Tags
cohabit:main
cohabit:0.3.2
cohabit:0.3.1
cohabit:0.3.0
cohabit:0.2.1
cohabit:0.2.0
cohabit:0.1.2
cohabit:0.1.1
cohabit:0.1.0
cohabit:0.0.0-alpha-2
cohabit:0.0.0-alpha-1

5 commits
2f663f0e08 ... 5e126ebcaf

Author SHA1 Message Date
Julien Oculi 5e126ebcaf feat(templates): add MagicLink template for connection links 2024-06-17 12:11:14 +02:00
Julien Oculi 92b8ece1c3 refactor(templates): move some css styles to avoid duplication 2024-06-17 12:06:12 +02:00
Julien Oculi 495e5e2e7e refactor(templates): simplify ternary condition for undefined 2024-06-17 12:01:56 +02:00
Julien Oculi 901c8fd672 fix(templates): resize header logo in Welcome 2024-06-17 12:00:37 +02:00
Julien Oculi fd1011619c refactor: add to templates package export 2024-06-17 11:02:49 +02:00
5 changed files with 171 additions and 21 deletions
Show stats Expand all files Collapse all files

3
deno.json
View file

@ -4,7 +4,8 @@
"exports": { "exports": {
".": "./mod.ts", ".": "./mod.ts",
"./cli": "./cli.ts", "./cli": "./cli.ts",
"./types": "./types.ts" "./types": "./types.ts",
"./templates": "./templates/mod.ts"
}, },
"tasks": { "tasks": {
"compile": "deno compile --allow-read --allow-env --allow-net=0.0.0.0 --allow-sys=osRelease,networkInterfaces --allow-run=/usr/sbin/sendmail,whoami --output=bin/cohamail --target=x86_64-unknown-linux-gnu ./cli.ts", "compile": "deno compile --allow-read --allow-env --allow-net=0.0.0.0 --allow-sys=osRelease,networkInterfaces --allow-run=/usr/sbin/sendmail,whoami --output=bin/cohamail --target=x86_64-unknown-linux-gnu ./cli.ts",

140
templates/MagicLink.tsx Normal file
View file

@ -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

30
templates/Welcome.tsx
View file

@ -12,7 +12,14 @@ import {
import { Signature } from './components/Signature.tsx' import { Signature } from './components/Signature.tsx'
import type { Template } from '../types.ts' import type { Template } from '../types.ts'
import type { JSX } from 'preact' import type { JSX } from 'preact'
import { bodyCss, messageCss, rootCss, textCss } from './styles/base.tsx' import {
bodyCss,
buttonCss,
headingCss,
messageCss,
rootCss,
textCss,
} from './styles/base.tsx'
import { BaseStyle } from './styles/base.tsx' import { BaseStyle } from './styles/base.tsx'
function Welcome( function Welcome(
@ -90,9 +97,7 @@ function Welcome(
style={{ width: '100%', textAlign: 'center', padding: '1rem' }} style={{ width: '100%', textAlign: 'center', padding: '1rem' }}
> >
<Button <Button
href={(endpoint && endpoint.length > 1) href={endpoint?.length ? endpoint : 'https://cohabit.fr/profil'}
? endpoint
: 'https://cohabit.fr/profil'}
style={buttonCss} style={buttonCss}
> >
Accéder à mon compte Accéder à mon compte
@ -106,14 +111,6 @@ function Welcome(
) )
} }
const headingCss: JSX.CSSProperties = {
fontFamily: 'Garamond, serif',
color: rootCss.accentColor,
textAlign: 'center',
margin: '-1rem 0 3rem',
fontSize: '2.5rem',
}
const preCss: JSX.CSSProperties = { const preCss: JSX.CSSProperties = {
fontFamily: 'monospace', fontFamily: 'monospace',
fontSize: '1rem', fontSize: '1rem',
@ -122,18 +119,11 @@ const preCss: JSX.CSSProperties = {
backgroundColor: rootCss.backgroundColor, backgroundColor: rootCss.backgroundColor,
} }
const buttonCss: JSX.CSSProperties = {
color: 'white',
padding: '1rem',
borderRadius: '0.4rem',
fontSize: '1.2rem',
backgroundColor: rootCss.accentColor,
}
const imgCss: JSX.CSSProperties = { const imgCss: JSX.CSSProperties = {
display: 'inline', display: 'inline',
padding: '1rem', padding: '1rem',
transform: 'translateY(40%)', transform: 'translateY(40%)',
maxHeight: '3rem',
} }
const template: Template<typeof Welcome, Parameters<typeof Welcome>[0]> = { const template: Template<typeof Welcome, Parameters<typeof Welcome>[0]> = {

3
templates/mod.ts Normal file
View file

@ -0,0 +1,3 @@
export { default as magicLinkTemplate } from './MagicLink.tsx'
export { default as messageTemplate } from './Message.tsx'
export { default as welcomeTemplate } from './Welcome.tsx'

16
templates/styles/base.tsx
View file

@ -19,10 +19,26 @@ export const messageCss: JSX.CSSProperties = {
textWrap: 'balance', textWrap: 'balance',
} }
export const headingCss: JSX.CSSProperties = {
fontFamily: 'Garamond, serif',
color: rootCss.accentColor,
textAlign: 'center',
margin: '-1rem 0 3rem',
fontSize: '2.5rem',
}
export const textCss: JSX.CSSProperties = { export const textCss: JSX.CSSProperties = {
fontSize: '1rem', fontSize: '1rem',
} }
export const buttonCss: JSX.CSSProperties = {
color: 'white',
padding: '1rem',
borderRadius: '0.4rem',
fontSize: '1.2rem',
backgroundColor: rootCss.accentColor,
}
export const rawCss = ` export const rawCss = `
a { a {
color: ${rootCss.accentColor}; color: ${rootCss.accentColor};