Fix: Translate label of Name field properly

Feat: Add confirmation email; The submitter now also gets an email

Author: TobiasDeBruijn

frontend/eslint.config.js

@@ -20,6 +20,9 @@ export default [
         sourceType: 'module',
       },
     },
+    rules: {
+      "@typescript-eslint/no-namespace": "off"
+    }
   },
   {
     ignores: [

frontend/src/plugins/locales/en.ts

@@ -8,7 +8,7 @@ const EN: Locale = {
     subtitle: "Declare digitally at Sticky",
     invalidFieldsError: "One or multiple fields are incorreect",
     form: {
-      name: "Naam",
+      name: "Name",
       iban: "IBAN",
       email: "Email",
       value: "Amount",

frontend/src/scripts/digidecs.ts

@@ -3,6 +3,19 @@ import {ApiError} from "@/scripts/core/error";
 import {fetch1} from "@/scripts/core/fetch1";
 import {server} from "@/main";
 
+export enum DigidecsLocale {
+  NL,
+  EN,
+}
+
+export namespace DigidecsLocale {
+  export function serverName(locale: DigidecsLocale): string {
+    switch(locale) {
+      case DigidecsLocale.EN: return "En"
+      case DigidecsLocale.NL: return "Nl"
+    }
+  }
+}
 
 export class Digidecs {
   trackingId: string;
@@ -22,6 +35,7 @@ export class Digidecs {
     commission: string,
     notes: string | null,
     attachments: File[],
+    locale: Locale,
   ): Promise<Result<Digidecs, ApiError>> {
     const r = await fetch1(`${server}/api/digidecs/start`, {
       method: 'POST',
@@ -36,6 +50,7 @@ export class Digidecs {
         what: what,
         commission: commission,
         notes: notes,
+        locale: DigidecsLocale.serverName(locale),
         attachments: attachments.map((att) => {
           return {
             name: att.name,
@@ -89,6 +104,4 @@ export class Digidecs {
       return Result.err(r.unwrapErr());
     }
   }
-  
-  
-}
+}

frontend/src/views/HomeView.vue

@@ -118,7 +118,7 @@
 
 import {defineComponent} from "vue";
 import {InputValidationRules} from "@/main";
-import {Digidecs} from "@/scripts/digidecs";
+import {Digidecs, DigidecsLocale} from "@/scripts/digidecs";
 import MaterialBanner from "@/views/components/MaterialBanner.vue";
 
 interface Data {
@@ -230,7 +230,8 @@ export default defineComponent({
         this.form.what,
         this.form.commission,
         this.form.notes,
-        this.form.files
+        this.form.files,
+        this.getCurrentLocale(),
       );
 
       if(r.isErr()) {
@@ -261,7 +262,14 @@ export default defineComponent({
 
       this.$router.push('/complete');
     },
-
+    getCurrentLocale(): DigidecsLocale {
+      const currentLocale = this.$i18n.locale;
+      switch(currentLocale) {
+        case "nl": return DigidecsLocale.NL;
+        case "en-US": return DigidecsLocale.EN;
+        default: return DigidecsLocale.NL;
+      }
+    },
     displayError() {
       this.error = this.$t('error');
       this.loading = false;

server/src/email/mod.rs

@@ -15,6 +15,11 @@ use tracing::{debug, error, trace};
 pub mod ipv4;
 pub mod template;
 
+pub enum EmailLanguage {
+    Nl,
+    En,
+}
+
 #[derive(Debug, Error)]
 pub enum SendError {
     #[error("Failed to parse email address")]
@@ -37,31 +42,39 @@ pub struct Attachment {
     pub mime: String,
 }
 
-pub async fn send_email(
+pub struct TreasurerEmailData<'a> {
+    pub to: &'a str,
+    pub body: &'a str,
+    pub reply_to_name: &'a str,
+    pub reply_to_email: &'a str,
+    pub commission: &'a str,
+    pub attachments: Vec<Attachment>,
+}
+
+pub async fn send_treasurer_email(
     smtp_config: &SmtpConfig,
     local_addr4: Ipv4Addr,
-    to: &str,
-    body: String,
-    reply_to_name: String,
-    reply_to_email: &str,
-    commission: &str,
-    attachments: Vec<Attachment>,
+    data: TreasurerEmailData<'_>,
 ) -> Result<(), SendError> {
-    let mb_to = Mailbox::from_str(to)?;
+    let mb_to = Mailbox::from_str(data.to)?;
 
     let mb_from = Mailbox::new(
         Some(smtp_config.from_name.clone()),
         Address::from_str(&smtp_config.from_email)?,
     );
 
-    let mb_reply_to = Mailbox::new(Some(reply_to_name), Address::from_str(&reply_to_email)?);
+    let mb_reply_to = Mailbox::new(
+        Some(data.reply_to_name.to_string()),
+        Address::from_str(data.reply_to_email)?,
+    );
 
     let msg = Message::builder()
         .reply_to(mb_reply_to)
         .from(mb_from)
         .to(mb_to)
         .subject(format!(
-            "[DigiDecs] Nieuwe declaratie: {commission} ({})",
+            "[DigiDecs] Nieuwe declaratie: {} ({})",
+            data.commission,
             rand::thread_rng()
                 .sample_iter(rand::distributions::Alphanumeric)
                 .take(6)
@@ -70,9 +83,9 @@ pub async fn send_email(
         ));
 
     let mut mp = MultiPart::mixed().build();
-    mp = mp.singlepart(SinglePart::html(body));
+    mp = mp.singlepart(SinglePart::html(data.body.to_string()));
 
-    for att in attachments {
+    for att in data.attachments {
         mp = mp.singlepart(
             lettre::message::Attachment::new(att.name)
                 .body(att.content, ContentType::parse(&att.mime)?),
@@ -81,24 +94,71 @@ pub async fn send_email(
 
     let msg = msg.multipart(mp)?;
 
+    let mut conn = smtp_connect(smtp_config, local_addr4).await?;
+
+    trace!("Sending email");
+    conn.send(msg.envelope(), &msg.formatted()).await?;
+
+    Ok(())
+}
+
+pub async fn send_submitter_email(
+    smtp_config: &SmtpConfig,
+    local_addr4: Ipv4Addr,
+    to_email: &str,
+    body: String,
+    name: &str,
+    locale: &EmailLanguage,
+) -> Result<(), SendError> {
+    let mb_to = Mailbox::new(Some(name.to_string()), Address::from_str(to_email)?);
+
+    let mb_from = Mailbox::new(
+        Some(smtp_config.from_name.clone()),
+        Address::from_str(&smtp_config.from_email)?,
+    );
+
+    let msg = Message::builder()
+        .to(mb_to)
+        .from(mb_from)
+        .subject(submitter_subject(locale))
+        .singlepart(SinglePart::html(body))?;
+
+    let mut conn = smtp_connect(smtp_config, local_addr4).await?;
+    trace!("Sending email");
+    conn.send(msg.envelope(), &msg.formatted()).await?;
+
+    Ok(())
+}
+
+fn submitter_subject(locale: &EmailLanguage) -> String {
+    match locale {
+        EmailLanguage::Nl => "Je DigiDecs is ontvangen!".into(),
+        EmailLanguage::En => "Your DigiDecs has been received!".into(),
+    }
+}
+
+async fn smtp_connect(
+    config: &SmtpConfig,
+    bind_addr: Ipv4Addr,
+) -> Result<AsyncSmtpConnection, SendError> {
     let client_id =
-        ClientId::Domain(get_ehlo_domain(&smtp_config.from_email).ok_or(SendError::EmailParse)?);
+        ClientId::Domain(get_ehlo_domain(&config.from_email).ok_or(SendError::EmailParse)?);
 
     trace!("Opening SMTP connection");
     let mut conn = AsyncSmtpConnection::connect_tokio1(
-        (smtp_config.smtp_relay.as_str(), 587),
+        (config.smtp_relay.as_str(), 587),
         Some(Duration::from_secs(3)),
         &client_id,
         // We cannot do STARTTLS (which uses port 465, which is blocked by Hetzner), so use port 587
         // Port 587 starts out with regular SMTP commands, after the EHLO we upgrade to STARTTLS
         None,
-        Some(IpAddr::V4(local_addr4)),
+        Some(IpAddr::V4(bind_addr)),
     )
     .await?;
 
     if conn.can_starttls() {
         conn.starttls(
-            TlsParameters::new_rustls(smtp_config.smtp_relay.as_str().into())?,
+            TlsParameters::new_rustls(config.smtp_relay.as_str().into())?,
             &client_id,
         )
         .await?;
@@ -107,15 +167,11 @@ pub async fn send_email(
     trace!("Checking SMTP connection");
     if conn.test_connected().await {
         debug!("SMTP connection OK");
+        Ok(conn)
     } else {
         error!("Could not connect to server (SMTP)");
-        return Err(SendError::Connect);
+        Err(SendError::Connect)
     }
-
-    trace!("Sending email");
-    conn.send(msg.envelope(), &msg.formatted()).await?;
-
-    Ok(())
 }
 
 fn get_ehlo_domain(email: &str) -> Option<String> {

server/src/email/template.rs

@@ -1,10 +1,14 @@
+use crate::email::EmailLanguage;
 use handlebars::{Handlebars, RenderError};
 use serde::Serialize;
 
-static TEMPLATE: &str = include_str!("templates/email_template.hbs");
+static TREASURER_TEMPLATE: &str = include_str!("templates/treasurer.hbs");
+static SUBMITTER_NL_TEMPLATE: &str = include_str!("templates/submitter_nl.hbs");
+static SUBMITTER_EN_TEMPLATE: &str = include_str!("templates/submitter_en.hbs");
+static HEADER_PARTIAL: &str = include_str!("templates/header.partial.hbs");
 
 #[derive(Debug, Serialize)]
-pub struct TemplateData {
+pub struct TreasurerData {
     pub name: String,
     pub iban: String,
     pub email: String,
@@ -14,12 +18,34 @@ pub struct TemplateData {
     pub notes: Option<String>,
 }
 
-pub fn render_template(data: &TemplateData) -> Result<String, RenderError> {
+#[derive(Debug, Serialize)]
+pub struct SubmitterData {
+    pub first_name: String,
+}
+
+pub fn render_treasurer(data: &TreasurerData) -> Result<String, RenderError> {
+    render_template(TREASURER_TEMPLATE, &data)
+}
+
+pub fn render_submitter(
+    data: &SubmitterData,
+    locale: &EmailLanguage,
+) -> Result<String, RenderError> {
+    let t = match locale {
+        EmailLanguage::Nl => SUBMITTER_NL_TEMPLATE,
+        EmailLanguage::En => SUBMITTER_EN_TEMPLATE,
+    };
+
+    render_template(t, &data)
+}
+
+fn render_template<T: Serialize>(template: &str, data: &T) -> Result<String, RenderError> {
     let mut engine = Handlebars::new();
     engine.set_strict_mode(true);
+    engine.register_partial("header", HEADER_PARTIAL)?;
 
     #[cfg(debug_assertions)]
     engine.set_dev_mode(true);
 
-    engine.render_template(TEMPLATE, data)
+    engine.render_template(template, data)
 }

server/src/email/templates/email_template.hbs

@@ -0,0 +1,23 @@
+<head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Oxygen&display=swap" rel="stylesheet">
+
+    <style>
+        .container {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+        }
+
+        p, h3 {
+            font-family: 'Oxygen', sans-serif;
+        }
+
+        .banner {
+            background-color: #197052;
+            color: white;
+            padding: 8px
+        }
+    </style>
+</head>