Skip to content

frontend login & email theme setup with nodejs maven build integration #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fwiech wants to merge 3 commits into
base: main
Choose a base branch
from
Open

frontend login & email theme setup with nodejs maven build integration #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
48ffe67
create keycloak themes maven project
fwiech Jun 11, 2021
8944ea0
setup scss for apps login theme
fwiech Jun 12, 2021
be5bd7e
add email theme setup
fwiech Jun 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion keycloak/docker/pom.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
</fileSet>

<fileSet>
<directory>../themes</directory>
<directory>../themes/target/classes/theme</directory>
<outputDirectory>themes</outputDirectory>
</fileSet>

Expand Down
1 change: 1 addition & 0 deletions keycloak/themes/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node/
122 changes: 122 additions & 0 deletions keycloak/themes/pom.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<groupId>com.github.thomasdarimont.keycloak</groupId>
<artifactId>keycloak-project-example</artifactId>
<version>${revision}</version>
<relativePath>../../pom.xml</relativePath>
</parent>
<modelVersion>4.0.0</modelVersion>

<artifactId>themes</artifactId>
<packaging>jar</packaging>
<name>${project.organization.name} Keycloak Themes</name>

<properties>
<dir.login>src/main/resources/theme/apps/login</dir.login>
<dir.email>src/main/resources/theme/apps/email</dir.email>
</properties>

<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${frontend-maven-plugin.version}</version>
<executions>

<!-- Download NPM tools -->
<execution>
<id>setup node</id>
<phase>initialize</phase>
<goals>
<goal>install-node-and-yarn</goal>
</goals>
<configuration>
<nodeVersion>v16.1.0</nodeVersion>
<yarnVersion>v1.22.10</yarnVersion>
</configuration>
</execution>

<!-- LOGIN THEME -->
<!-- Download NPM packages -->
<execution>
<id>login theme - yarn install</id>
<phase>initialize</phase>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<workingDirectory>${dir.login}</workingDirectory>
<arguments>install</arguments>
</configuration>
</execution>
<!-- Compile stuff -->
<execution>
<id>login theme - compile-scss</id>
<phase>generate-resources</phase>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<workingDirectory>${dir.login}</workingDirectory>
<arguments>compile</arguments>
</configuration>
</execution>

<!-- EMAIL THEME -->
<execution>
<id>emil theme - yarn install</id>
<phase>initialize</phase>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<workingDirectory>${dir.email}</workingDirectory>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>build email theme</id>
<phase>generate-resources</phase>
<goals>
<goal>yarn</goal>
</goals>
<configuration>
<workingDirectory>${dir.email}</workingDirectory>
<arguments>build</arguments>
</configuration>
</execution>

</executions>

<configuration>
<installDirectory>${project.basedir}</installDirectory>
</configuration>

</plugin>
</plugins>

<resources>
<resource>
<directory>src/main/resources</directory>
<excludes>
<exclude>theme/apps/login/resources/scss/**</exclude>

<exclude>theme/apps/email/scripts/**</exclude>
<exclude>theme/apps/email/mjml/**</exclude>
<exclude>theme/apps/email/common/**</exclude>

<exclude>**/node_modules/**</exclude>
<exclude>**/package.json</exclude>
<exclude>**/yarn.lock</exclude>
<exclude>**/.gitignore</exclude>
</excludes>
</resource>
</resources>

</build>

</project>
2 changes: 2 additions & 0 deletions keycloak/themes/src/main/resources/theme/apps/email/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules/
html/
32 changes: 32 additions & 0 deletions keycloak/themes/src/main/resources/theme/apps/email/common/styles.mjml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<mj-attributes>
<!-- GLOBALS -->
<mj-all align="center" />
<mj-all
font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
/>
<mj-all color="rgb(40, 42, 48)" />

<!-- COMPONENTS -->
<mj-button
background-color="#0366d6"
color="white"
border-radius="5px"
/>

<mj-navbar-link text-transform="none" padding="0 10px" />

<!-- TEXT -->
<mj-class
name="logo"
font-size="14px"
/>
<mj-class
name="headline"
font-size="24px"
line-height="32px"
/>

<mj-class name="text-m" font-size="14px" line-height="20px" color="rgb(107, 111, 118)" />
<mj-class name="text-s" font-size="12px" line-height="16px" />
<mj-class name="text-xs" font-size="11px" line-height="18px" />
</mj-attributes>
32 changes: 32 additions & 0 deletions keycloak/themes/src/main/resources/theme/apps/email/mjml/email-verification.mjml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<mjml lang="en">
<mj-head>
<mj-include path="../common/styles.mjml" />
</mj-head>
<mj-body background-color="#fff">
<mj-wrapper padding="32px 0px">
<mj-section padding="40px 20px" border-radius="8px" background-color="rgb(239, 241, 244)">
<mj-column>
<mj-text mj-class="logo" padding="0">ACME</mj-text>
<mj-text mj-class="headline">Your email verification link</mj-text>
<mj-button href="${link}">Verify email</mj-button>
<mj-text mj-class="text-m" align="center">
This link will expire within
${linkExpirationFormatter(linkExpiration)}.
</mj-text>
<mj-divider
border-width="1px"
border-color="white"
padding="10px 0"
/>

<mj-navbar>
<mj-navbar-link href="/">${realmName}</mj-navbar-link>
<mj-navbar-link href="/privacy">Privacy</mj-navbar-link>
<mj-navbar-link href="/terms">Terms</mj-navbar-link>
<mj-navbar-link href="/imprint">Imprint</mj-navbar-link>
</mj-navbar>
</mj-column>
</mj-section>
</mj-wrapper>
</mj-body>
</mjml>
29 changes: 29 additions & 0 deletions keycloak/themes/src/main/resources/theme/apps/email/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "keycloak-email-theme",
"version": "0.1.0",
"scripts": {
"start": "npm run watch & npm run serve",
"watch": "nodemon --watch 'mjml/**' --watch 'common/**' --ext 'mjml' --exec 'ts-node scripts/compile.ts'",
"build": "ts-node scripts/compile.ts",
"serve": "ts-node scripts/serve.ts",
"mjml": "mjml"
},
"devDependencies": {
"@types/express": "^4.17.12",
"@types/fs-extra": "^9.0.11",
"@types/glob": "^7.1.3",
"@types/mjml": "^4.7.0",
"@types/node": "^15.12.2",
"@types/serve-index": "^1.7.30",
"@types/serve-static": "^1.13.9",
"express": "^4.17.1",
"fs-extra": "^10.0.0",
"glob": "^7.1.7",
"mjml": "^4.9.3",
"nodemon": "^2.0.7",
"serve-index": "^1.9.1",
"serve-static": "^1.14.1",
"ts-node": "^10.0.0",
"typescript": "^4.3.2"
}
}
30 changes: 30 additions & 0 deletions keycloak/themes/src/main/resources/theme/apps/email/scripts/compile.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import glob from "glob";
import fs from "fs-extra";
import mjml2html from "mjml";

const inputPath = "./mjml";
const filePath = "./common";
const outputPath = "./html";
const extension = ".ftl";

const compileFile = (filename: string) => {
const content = fs.readFileSync(filename, "utf8");

const parseResult = mjml2html(content, { filePath });

if (parseResult.errors.length) {
console.log(`MJML Errors in file: ${filename}`);
parseResult.errors.forEach((e) => console.log(e));
}

const outputFilename = filename
.replace(inputPath, outputPath)
.replace(".mjml", extension);

fs.ensureFileSync(outputFilename);
fs.writeFileSync(outputFilename, parseResult.html);
};

fs.ensureDirSync(outputPath);

glob("./mjml/**/*.mjml", (_, files: string[]) => files.forEach(compileFile));
19 changes: 19 additions & 0 deletions keycloak/themes/src/main/resources/theme/apps/email/scripts/serve.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { join } from "path";
import express from "express";
import serveStatic from "serve-static";
import serveIndex from "serve-index";

const servePath = join(__dirname, "../html");

const PORT = 3000;

const app = express();
express.static.mime.define({ "text/html": ["ftl"] });

app.use(serveStatic(servePath + "/"));
app.use(serveIndex(servePath, { view: "details" }));

app.listen(PORT);
console.log(
`Serving Email Templates from ${servePath} on http://localhost:${PORT}`
);
1 change: 1 addition & 0 deletions keycloak/themes/src/main/resources/theme/apps/email/theme.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
parent=base
Loading