163 lines
3.8 KiB
TypeScript
163 lines
3.8 KiB
TypeScript
import {
|
|
Body,
|
|
Button,
|
|
Container,
|
|
Heading,
|
|
Html,
|
|
Img,
|
|
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, messageCss, rootCss, textCss } from './styles/base.tsx'
|
|
import { BaseStyle } from './styles/base.tsx'
|
|
|
|
function Welcome(
|
|
{ firstname, lastname, login }: {
|
|
firstname: string
|
|
lastname: string
|
|
login: string
|
|
},
|
|
) {
|
|
return (
|
|
<Html lang='fr' style={{ fontSize: '14px' }}>
|
|
<BaseStyle />
|
|
<Preview>Bienvenue au FabLab Coh@bit</Preview>
|
|
<Body style={bodyCss}>
|
|
<Container style={messageCss}>
|
|
<Section>
|
|
<Heading as='h1' style={headingCss}>
|
|
Bienvenue au<Img
|
|
src='https://cohabit.fr/images/logo.svg'
|
|
alt='FabLab Cohabit'
|
|
style={imgCss}
|
|
/>
|
|
</Heading>
|
|
<Text style={textCss}>
|
|
Bravo ! Vous avez rejoint le FabLab Coh@bit en tant que{' '}
|
|
{firstname} {lastname}.
|
|
</Text>
|
|
<Text style={textCss}>
|
|
Votre identifiant est <span style={preCss}>{login}</span>.
|
|
</Text>
|
|
<Text style={textCss}>
|
|
Laissez parler votre créativité, vous êtes prêt à collaborer avec
|
|
toute une communauté ouverte et accueillante.
|
|
</Text>
|
|
<Text style={textCss}>
|
|
Par où commencer ?
|
|
</Text>
|
|
|
|
<ul style={{ fontSize: '1rem' }}>
|
|
<li>
|
|
Accéder au <a href='https://cohabit.fr'>site de Coh@bit</a>{' '}
|
|
et découvrir le FabLab.
|
|
</li>
|
|
<li>
|
|
Découvrir et participer aux{' '}
|
|
<a href='https://cohabit.fr/projets'>projets en cours</a>{' '}
|
|
au FabLab.
|
|
</li>
|
|
<li>
|
|
Explorer les{' '}
|
|
<a href='https://git.cohabit.fr'>sources et archives</a>{' '}
|
|
du FabLab.
|
|
</li>
|
|
<li>
|
|
Se documenter et parcourrir le{' '}
|
|
<a href='https://projets.cohabit.fr'>wiki</a> du FabLab.
|
|
</li>
|
|
<li>
|
|
Visionner les{' '}
|
|
<a href='https://toot.aquilenet.fr/@cohabit_fablab@tube.aquilenet.fr'>
|
|
tutoriels vidéos
|
|
</a>{' '}
|
|
du FabLab.
|
|
</li>
|
|
<li>
|
|
<a href='https://matrix.to/#/!thtlRrlXFrbifqMNCG:matrix.org?via=matrix.org'>
|
|
Échanger et communiquer
|
|
</a>{' '}
|
|
avec les autres usagers du FabLab.
|
|
</li>
|
|
</ul>
|
|
|
|
<Container
|
|
style={{ width: '100%', textAlign: 'center', padding: '1rem' }}
|
|
>
|
|
<Button href='https://cohabit.fr/profil' style={buttonCss}>
|
|
Accéder à mon compte
|
|
</Button>
|
|
</Container>
|
|
</Section>
|
|
</Container>
|
|
<Signature />
|
|
</Body>
|
|
</Html>
|
|
)
|
|
}
|
|
|
|
const headingCss: JSX.CSSProperties = {
|
|
fontFamily: 'Garamond, serif',
|
|
color: rootCss.accentColor,
|
|
textAlign: 'center',
|
|
margin: '-1rem 0 3rem',
|
|
fontSize: '2.5rem',
|
|
}
|
|
|
|
const preCss: JSX.CSSProperties = {
|
|
fontFamily: 'monospace',
|
|
fontSize: '1rem',
|
|
padding: '0.2rem',
|
|
borderRadius: '0.4rem',
|
|
backgroundColor: rootCss.backgroundColor,
|
|
}
|
|
|
|
const buttonCss: JSX.CSSProperties = {
|
|
color: 'white',
|
|
padding: '1rem',
|
|
borderRadius: '0.4rem',
|
|
fontSize: '1.2rem',
|
|
backgroundColor: rootCss.accentColor,
|
|
}
|
|
|
|
const imgCss: JSX.CSSProperties = {
|
|
display: 'inline',
|
|
padding: '1rem',
|
|
transform: 'translateY(40%)',
|
|
}
|
|
|
|
const template: Template<typeof Welcome, Parameters<typeof Welcome>[0]> = {
|
|
props: [
|
|
{
|
|
name: 'Prénom',
|
|
description: "Prénom de l'usager.",
|
|
required: true,
|
|
multiline: false,
|
|
tag: 'firstname',
|
|
},
|
|
{
|
|
name: 'Nom',
|
|
description: "Nom de famille de l'usager.",
|
|
required: true,
|
|
multiline: false,
|
|
tag: 'lastname',
|
|
},
|
|
{
|
|
name: 'Login',
|
|
description: "Login de l'usager.",
|
|
required: true,
|
|
multiline: false,
|
|
tag: 'login',
|
|
},
|
|
],
|
|
name: 'welcome',
|
|
description: 'Coh@bit welcome mail for new users.',
|
|
builder: Welcome,
|
|
}
|
|
|
|
export default template
|