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 7e5a171..0000000 Binary files a/emails/templates/assets/kc-logo.png and /dev/null differ 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 });