refactor: move the mjml templates to the ui dir

ui/emails/Makefile

@@ -0,0 +1,17 @@
+MJML=npx mjml
+MJML_DIR=mjml
+MJML_FILES=$(wildcard $(MJML_DIR)/*.mjml)
+IMAGES_DIR_NAME=images
+MJML_IMAGES=$(MJML_DIR)/$(IMAGES_DIR_NAME)
+HTML_DIR=../../internal/mail/html
+IMAGES_DIR=$(HTML_DIR)/$(IMAGES_DIR_NAME)
+
+images:
+	rsync -a --delete $(MJML_IMAGES)/ $(IMAGES_DIR)
+
+.PHONY=images
+
+build: $(MJML_FILES) images
+	$(foreach file, $(MJML_FILES), $(MJML) $(file) --config.minify --config.minifyOptions='{"minifyCSS": true}' -o $(HTML_DIR)/$(basename $(notdir $(file))).html;)
+
+.PHONY=build

internal/mail/README.md → ui/emails/README.md

@@ -10,4 +10,7 @@ All templates in the `mjml` directory can be built by running the following comm
 
 ```
 make build
-```
+```
+
+This will build all templates to the `internal/mail/html` directory and sync the
+images.

ui/emails/mjml/includes/header.mjml

@@ -0,0 +1,10 @@
+<mj-section background-color="#242424" padding="0 0 20px 32px">
+  <mj-column>
+    <mj-image
+      padding="0"
+      align="left"
+      width="130px"
+      src="./images/canonical.jpg"
+    ></mj-image>
+  </mj-column>
+</mj-section>

ui/emails/mjml/user-invite.mjml

@@ -0,0 +1,64 @@
+<mjml>
+  <mj-head>
+    <mj-attributes>
+      <mj-text padding="0" />
+      <mj-class name="h4" font-size="24px" font-weight="275" />
+      <mj-all font-family="'Ubuntu variable', Ubuntu, Arial, 'libra sans', sans-serif" font-size="16px" color="#000" font-weight="300" line-height="24px" />
+    </mj-attributes>
+    <mj-style>
+    <!-- Test -->
+      @font-face {
+        font-family: 'Ubuntu variable';
+        font-stretch: 100%;
+        font-style: normal;
+        font-weight: 100 800;
+        src: url('https://assets.ubuntu.com/v1/f1ea362b-Ubuntu%5Bwdth,wght%5D-latin-v0.896a.woff2') format('woff2-variations');
+      }
+    </mj-style>
+  </mj-head>
+  <!-- test -->
+  <mj-body background-color="#F3F4F8">
+    <mj-wrapper>
+      <mj-include path="./includes/header.mjml" />
+      <mj-section padding="32px" padding-bottom="12px" background-color="#fff">
+        <mj-column>
+          <mj-text mj-class="h4">Verify your account</mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="32px" background-color="#fff">
+        <mj-column width="30%" padding="0px">
+          <mj-text font-weight="400">Account</mj-text>
+        </mj-column>
+        <mj-column width="70%">
+          <mj-text>{{ .Email }}</mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0 32px 32px 32px" background-color="#fff">
+        <mj-column width="30%">
+          <mj-text font-weight="400">Verification code</mj-text>
+        </mj-column>
+        <mj-column width="70%">
+          <mj-text font-size="32px">{{ .RecoveryCode }}</mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="0 32px 32px 32px" background-color="#fff">
+        <mj-column>
+          <mj-divider padding-left="0" padding-right="0" border-color="#e6e6e6" border-width="1px" padding-top="0"></mj-divider>
+          <mj-button align="left" border-radius="0" background-color="#0C8420" color="#fff" href="{{ .InviteUrl }}" padding-left="0" padding-right="0">
+            Verify your account
+          </mj-button>
+          <mj-text>or click this link</mj-text>
+          <mj-text><a style="color: #0066cc; text-decoration: none" href="{{ .InviteUrl }}">{{ .InviteUrl }}</a></mj-text>
+        </mj-column>
+      </mj-section>
+      <mj-section padding="32px" background-color="#F7F7F7">
+        <mj-column>
+          <mj-text font-size="14px" color="#666666">You are receiving this email because you are a user of Canonical
+            Identity Platform.</mj-text>
+          <mj-text font-size="14px" color="#666666">If you're not sure why you're receiving this please contact
+            support.</mj-text>
+        </mj-column>
+      </mj-section>
+    </mj-wrapper>
+  </mj-body>
+</mjml>