From f42a33838f7e7ef19b44f571626dfe537b75a0c2 Mon Sep 17 00:00:00 2001 From: Hendrik Saly Date: Thu, 26 Dec 2024 12:49:18 +0100 Subject: [PATCH] Assets, email layout --- .keycloakify/realm-kc-26.json | 4 +- Makefile | 7 ++ emails/eliatra-layout.tsx | 117 ++++++++++++++++++++++++ emails/layout.tsx | 37 -------- emails/templates/assets/kc-logo.png | Bin 5935 -> 0 bytes emails/templates/email-verification.tsx | 44 +++++---- package-lock.json | 4 +- src/login/main.css | 12 ++- src/login/meod.svg | 31 ------- vite.config.ts | 2 +- 10 files changed, 158 insertions(+), 100 deletions(-) create mode 100644 Makefile create mode 100644 emails/eliatra-layout.tsx delete mode 100644 emails/layout.tsx delete mode 100644 emails/templates/assets/kc-logo.png delete mode 100644 src/login/meod.svg diff --git a/.keycloakify/realm-kc-26.json b/.keycloakify/realm-kc-26.json index 6fef067..f9860d2 100644 --- a/.keycloakify/realm-kc-26.json +++ b/.keycloakify/realm-kc-26.json @@ -1626,10 +1626,10 @@ "strictTransportSecurity": "max-age=31536000; includeSubDomains" }, "smtpServer": {}, - "loginTheme": "keycloakify-starter", + "loginTheme": "meod", "accountTheme": "", "adminTheme": "keycloakify-starter", - "emailTheme": "keycloakify-starter", + "emailTheme": "meod", "eventsEnabled": false, "eventsListeners": ["keycloakify-logging", "jboss-logging"], "enabledEventTypes": [], diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..9943242 --- /dev/null +++ b/Makefile @@ -0,0 +1,7 @@ +all: build +prevmail: + npx email preview ./emails/ +prevkk: + npx keycloakify start-keycloak --keycloak-version 26 +build: + npm run build-keycloak-theme \ No newline at end of file diff --git a/emails/eliatra-layout.tsx b/emails/eliatra-layout.tsx new file mode 100644 index 0000000..7d4fb19 --- /dev/null +++ b/emails/eliatra-layout.tsx @@ -0,0 +1,117 @@ +import { Body, Button, Container, Head, Hr, Html, Img, Preview, Section, Text } from 'jsx-email'; +import {PropsWithChildren, ReactNode} from "react"; + +export interface EmailProps { + userFirstname: string; + userLastname: string; + locale: string; + buttonText: string; + buttonLink: string; + emailAddress: string; + preview: string; +} + +const main = { + backgroundColor: '#ffffff', + fontFamily: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif' +}; + +const container = { + margin: '0 auto', + padding: '20px 0 48px' +}; + +const logo = { + margin: '0 auto' +}; + +const paragraph = { + fontSize: '16px', + lineHeight: '26px' +}; + +const btnContainer = { + textAlign: 'center' as const +}; + +const hr = { + borderColor: '#cccccc', + margin: '20px 0' +}; + +const footer = { + color: '#8898aa', + fontSize: '12px' +}; + +const baseUrl = 'https://raw.githubusercontent.com/eliatra-opensearch-enterprise-distro/meod-assets/refs/heads/main/img/'; + +export const templateName = "Eliatra Default"; + +export const previewProps = { + userFirstname: 'Mister', + userLastname: 'Spock', + locale: 'en', + preview: 'This is a preview text', + buttonLink: "https://eliatra.com", + buttonText: "HIT ME", + emailAddress: "spock@enterprise.com", + children: Dummy Text

Dummy Text +} as EmailProps; + +export const EmailLayout = ({ + userFirstname, + userLastname, + locale, + buttonText, + buttonLink, + emailAddress, + preview, + children, + }: PropsWithChildren) => { + return ( + + + {preview} + + + Eliatra + Hi {userFirstname} {userLastname}, + + {children} + +

+ +
+ + Best, +
+ The Eliatra team + +
+ Sent to {emailAddress} on behalf of the MEOD application. + © 2025 | Eliatra, 77 Lower Camden Street, D02 XE80 Dublin, Ireland | www.eliatra.com + + + +); +}; + +//needed for email previewer +export const Template = EmailLayout + + + + + diff --git a/emails/layout.tsx b/emails/layout.tsx deleted file mode 100644 index 5363a88..0000000 --- a/emails/layout.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import { Body, Container, Head, Html, Preview, Section } from "jsx-email"; -import { PropsWithChildren, ReactNode } from "react"; - -const main = { - backgroundColor: "#f6f9fc", - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', -}; - -const container = { - backgroundColor: "#ffffff", - margin: "0 auto", - marginBottom: "64px", - padding: "20px 0 48px", -}; - -const box = { - padding: "0 48px", -}; - -export const EmailLayout = ({ - locale, - children, - preview, -}: PropsWithChildren<{ preview: ReactNode; locale: string }>) => { - return ( - - - {preview} - - -
{children}
- - - - ); -}; diff --git a/emails/templates/assets/kc-logo.png b/emails/templates/assets/kc-logo.png deleted file mode 100644 index 7e5a1717d5f10ccf71e771310da863c3f9361dab..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5935 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 diff --git a/emails/templates/email-verification.tsx b/emails/templates/email-verification.tsx index 4ece93f..5dd0470 100644 --- a/emails/templates/email-verification.tsx +++ b/emails/templates/email-verification.tsx @@ -1,5 +1,5 @@ import { Text, render } from "jsx-email"; -import { EmailLayout } from "../layout"; +import { EmailLayout, EmailProps } from "../eliatra-layout"; import { createVariablesHelper, GetSubject, @@ -9,13 +9,6 @@ import { interface TemplateProps extends Omit {} -const paragraph = { - color: "#777", - fontSize: "16px", - lineHeight: "24px", - textAlign: "left" as const, -}; - export const previewProps: TemplateProps = { locale: "en", themeName: "vanilla", @@ -26,21 +19,26 @@ export const templateName = "Email Verification"; const { exp } = createVariablesHelper("email-verification.ftl"); export const Template = ({ locale }: TemplateProps) => ( - - -

- Someone has created a {exp("user.firstName")} account with this email address. If - this was you, click the link below to verify your email address -

-

- Link to e-mail address verification -

-

- This link will expire within {exp("linkExpirationFormatter(linkExpiration)")}. -

-

If you didn't create this account, just ignore this message.

- - + + +

+ Someone has created a {exp("user.firstName")} account with this email address. If + this was you, click the link below to verify your email address +

+

+ The link will expire within {exp("linkExpirationFormatter(linkExpiration)")}. + If the link is already expired just try to login and a new verification link will be sent. +

+

If you didn't create this account, just ignore this message.

+ + ); export const getTemplate: GetTemplate = async (props) => { diff --git a/package-lock.json b/package-lock.json index a767e68..256bff6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "meod", - "version": "1.0.1", + "version": "1.0.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "meod", - "version": "1.0.1", + "version": "1.0.2", "license": "MIT", "dependencies": { "jsx-email": "^2.5.4", diff --git a/src/login/main.css b/src/login/main.css index 31aea09..62e8550 100644 --- a/src/login/main.css +++ b/src/login/main.css @@ -1,10 +1,14 @@ .kcHtmlClass { - background: url("https://eliatra.com/_next/static/media/logo.56850517.png") no-repeat left top; - background-size: 150px; + border-top-width: 20px; + border-top-style: solid; + border-top-color: #651fff; + background: url("https://raw.githubusercontent.com/eliatra-opensearch-enterprise-distro/meod-assets/refs/heads/main/img/Eliatra_logo.svg") no-repeat; + background-size: 100px; + background-position: left 20px top 20px; } .login-pf body { - background-image: url("https://eliatra.com/_next/static/media/EliatraBackground.ae12357b.svg") ; + background-image: url("https://raw.githubusercontent.com/eliatra-opensearch-enterprise-distro/meod-assets/refs/heads/main/img/Eliatra_background.svg") ; } .pf-c-button.pf-m-primary { @@ -22,5 +26,5 @@ .kcHeaderWrapperClass { content-visibility: hidden; - background: url("./meod.svg") no-repeat center; + background: url("https://raw.githubusercontent.com/eliatra-opensearch-enterprise-distro/meod-assets/refs/heads/main/img/meod_logo_light.svg") no-repeat center; } \ No newline at end of file diff --git a/src/login/meod.svg b/src/login/meod.svg deleted file mode 100644 index cb95f57..0000000 --- a/src/login/meod.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 8fbde03..1805085 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -14,7 +14,7 @@ export default defineConfig({ templatesSrcDirPath: import.meta.dirname + "/emails/templates", themeNames: buildContext.themeNames, keycloakifyBuildDirPath: buildContext.keycloakifyBuildDirPath, - locales: ["en", "pl"], + locales: ["en", "de"], cwd: import.meta.dirname, esbuild: {}, // optional esbuild options });