Merge branch 'pvw-3201-add-multi-language-demo-rp' into 'main'

PVW-3201: multi language support demo RP

See merge request wallet/nl-wallet!1103

scripts/devenv/mock_relying_party.toml.template

@@ -15,19 +15,19 @@ sha256 = "${WALLET_WEB_SHA256}"
 docType = "com.example.pid"
 nameSpaces = { "com.example.pid" = { bsn = true } }
 
-[[usecases.xyz_bank.items_requests]]
+[[usecases.online_marketplace.items_requests]]
 docType = "com.example.pid"
-nameSpaces = { "com.example.pid" = { given_name = true, family_name = true, birth_date = true, bsn = true } }
+nameSpaces = { "com.example.pid" = { given_name = true, family_name = true, birth_date = true } }
 
-[[usecases.xyz_bank.items_requests]]
+[[usecases.online_marketplace.items_requests]]
 docType = "com.example.address"
 nameSpaces = { "com.example.address" = { resident_street = true, resident_house_number = true, resident_postal_code = true } }
 
-[[usecases.online_marketplace.items_requests]]
+[[usecases.xyz_bank.items_requests]]
 docType = "com.example.pid"
-nameSpaces = { "com.example.pid" = { given_name = true, family_name = true, birth_date = true } }
+nameSpaces = { "com.example.pid" = { given_name = true, family_name = true, birth_date = true, bsn = true } }
 
-[[usecases.online_marketplace.items_requests]]
+[[usecases.xyz_bank.items_requests]]
 docType = "com.example.address"
 nameSpaces = { "com.example.address" = { resident_street = true, resident_house_number = true, resident_postal_code = true } }
 

scripts/devenv/mrp_verification_server.toml.template

@@ -22,14 +22,14 @@ ephemeral_id_secret = "${MRP_VERIFICATION_SERVER_EPHEMERAL_ID_SECRET}"
 certificate = "${MOCK_RELYING_PARTY_CRT_MIJN_AMSTERDAM}"
 private_key = "${MOCK_RELYING_PARTY_KEY_MIJN_AMSTERDAM}"
 
-[verifier.usecases.xyz_bank]
-certificate = "${MOCK_RELYING_PARTY_CRT_XYZ_BANK}"
-private_key = "${MOCK_RELYING_PARTY_KEY_XYZ_BANK}"
-
 [verifier.usecases.online_marketplace]
 certificate = "${MOCK_RELYING_PARTY_CRT_ONLINE_MARKETPLACE}"
 private_key = "${MOCK_RELYING_PARTY_KEY_ONLINE_MARKETPLACE}"
 
+[verifier.usecases.xyz_bank]
+certificate = "${MOCK_RELYING_PARTY_CRT_XYZ_BANK}"
+private_key = "${MOCK_RELYING_PARTY_KEY_XYZ_BANK}"
+
 [verifier.usecases.monkey_bike]
 certificate = "${MOCK_RELYING_PARTY_CRT_MONKEY_BIKE}"
 private_key = "${MOCK_RELYING_PARTY_KEY_MONKEY_BIKE}"

scripts/setup-devenv.sh

@@ -221,20 +221,20 @@ export MOCK_RELYING_PARTY_KEY_MIJN_AMSTERDAM
 MOCK_RELYING_PARTY_CRT_MIJN_AMSTERDAM=$(< "${TARGET_DIR}/mock_relying_party/mijn_amsterdam.crt.der" ${BASE64})
 export MOCK_RELYING_PARTY_CRT_MIJN_AMSTERDAM
 
-# Generate relying party key and cert
-generate_mock_relying_party_key_pair xyz_bank
-MOCK_RELYING_PARTY_KEY_XYZ_BANK=$(< "${TARGET_DIR}/mock_relying_party/xyz_bank.key.der" ${BASE64})
-export MOCK_RELYING_PARTY_KEY_XYZ_BANK
-MOCK_RELYING_PARTY_CRT_XYZ_BANK=$(< "${TARGET_DIR}/mock_relying_party/xyz_bank.crt.der" ${BASE64})
-export MOCK_RELYING_PARTY_CRT_XYZ_BANK
-
 # Generate relying party key and cert
 generate_mock_relying_party_key_pair online_marketplace
 MOCK_RELYING_PARTY_KEY_ONLINE_MARKETPLACE=$(< "${TARGET_DIR}/mock_relying_party/online_marketplace.key.der" ${BASE64})
 export MOCK_RELYING_PARTY_KEY_ONLINE_MARKETPLACE
 MOCK_RELYING_PARTY_CRT_ONLINE_MARKETPLACE=$(< "${TARGET_DIR}/mock_relying_party/online_marketplace.crt.der" ${BASE64})
 export MOCK_RELYING_PARTY_CRT_ONLINE_MARKETPLACE
 
+# Generate relying party key and cert
+generate_mock_relying_party_key_pair xyz_bank
+MOCK_RELYING_PARTY_KEY_XYZ_BANK=$(< "${TARGET_DIR}/mock_relying_party/xyz_bank.key.der" ${BASE64})
+export MOCK_RELYING_PARTY_KEY_XYZ_BANK
+MOCK_RELYING_PARTY_CRT_XYZ_BANK=$(< "${TARGET_DIR}/mock_relying_party/xyz_bank.crt.der" ${BASE64})
+export MOCK_RELYING_PARTY_CRT_XYZ_BANK
+
 # Generate relying party key and cert
 generate_mock_relying_party_key_pair monkey_bike
 MOCK_RELYING_PARTY_KEY_MONKEY_BIKE=$(< "${TARGET_DIR}/mock_relying_party/monkey_bike.key.der" ${BASE64})

wallet_core/Cargo.toml

@@ -37,6 +37,7 @@ rust-version = "1.80"
 async_fn_in_trait = "allow"
 
 [workspace.dependencies]
+accept-language = "3.1.0"
 aes-gcm = "0.10.3"
 android_logger = { version = "0.14.1", default-features = false }
 anyhow = "1.0.66"

wallet_core/mock_relying_party/Cargo.toml

@@ -15,13 +15,15 @@ doctest = false
 allow_http_return_url = ["wallet_server/allow_http_return_url"]
 
 [dependencies]
+accept-language.workspace = true
 anyhow.workspace = true
 askama.workspace = true
 axum = { workspace = true, features = ["http1", "query", "tokio", "tower-log", "tracing"] }
 base64.workspace = true
-config = { workspace = true, features = ["toml"] }
+config = { workspace = true, features = ["preserve_order", "toml"] }
 futures = { workspace = true, features = ["std"] }
 http.workspace = true
+indexmap.workspace = true
 nutype = { workspace = true, features = ["serde"] }
 reqwest = { workspace = true, features = ["rustls-tls-webpki-roots"] }
 sentry = { workspace = true, features = [
@@ -58,3 +60,6 @@ url = { workspace = true, features = ["serde"] }
 nl_wallet_mdoc.path = "../mdoc"
 wallet_common = { path = "../wallet_common", features = ["sentry"] }
 wallet_server = { path = "../wallet_server", features = ["disclosure"] }
+
+[dev-dependencies]
+rstest.workspace = true

wallet_core/mock_relying_party/assets/css/demo_bar.css

@@ -1,53 +1,157 @@
 aside {
-    order: -1;
+  order: -1;
 
-    width: 100vw;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 16px;
-    padding: 16px;
-    background: #f2f1fe;
-    color: #152a62;
+  width: 100vw;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  gap: 16px;
+  color: #152a62;
+}
+
+aside:has(.text) {
+  background: #f2f1fe;
 }
 
 @media screen and (min-width: 500px) {
-    aside {
-        padding: 8px 24px;
-    }
+  aside {
+    padding: 8px 24px 8px 94px; /* 24 + 16 + 54 */
+  }
 }
 
 aside b {
-    font-weight: 700;
+  font-weight: 700;
 }
 
 aside a {
-    color: #383ede;
+  color: #383ede;
 }
 
 aside a:hover {
-    color: #3237c4;
-    text-decoration: none;
+  color: #3237c4;
+  text-decoration: none;
+}
+
+aside .demo-bar {
+  flex-grow: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
 }
 
-aside::before {
-    content: " ";
-    background: url("../non-free/images/nl-wallet.svg") no-repeat center center / cover;
-    width: 40px;
-    height: 40px;
+aside .demo-bar::before {
+  content: " ";
+  background: url("../non-free/images/nl-wallet.svg") no-repeat center center / cover;
+  width: 40px;
+  height: 40px;
 }
 
 aside .text {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 @media screen and (min-width: 500px) {
-    aside .text {
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
-    }
+  aside {
+    justify-content: right;
+  }
+
+  aside .demo-bar {
+    flex-grow: 1;
+  }
+
+  aside .text {
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+  }
+}
+
+.lang-selector {
+  position: relative;
+}
+
+.lang-selector label[for="lang_toggle"] {
+  display: flex;
+  align-items: center;
+
+  padding: 4px 8px;
+  gap: 4px;
+  border-radius: 2px;
+
+  background: #fcfcfc;
+  color: #383ede;
+  font-weight: 700;
+  text-transform: uppercase;
+  line-height: 1.25;
+
+  user-select: none;
+}
+
+.lang-selector label[for="lang_toggle"]:hover {
+  background-color: #f1f1f1;
+  cursor: pointer;
+}
+
+.lang-selector label[for="lang_toggle"]::after {
+  content: " ";
+  background: url("../non-free/images/down.svg") no-repeat center center / contain;
+
+  width: 16px;
+  height: 16px;
+}
+
+#lang_toggle {
+  display: none;
+}
+
+#lang_toggle:checked + .lang-modal {
+  display: block;
+}
+
+.lang-selector .lang-modal {
+  position: absolute;
+  right: 0;
+  z-index: 1;
+
+  margin-top: 2px;
+
+  background: #fcfcfc;
+  box-shadow: 0px 4px 40px 0px #00000029;
+  border-radius: 2px;
+
+  overflow: hidden;
+
+  display: none;
+}
+
+.lang-selector .lang-modal button {
+  display: flex;
+  padding: 12px 24px 12px 12px;
+  gap: 12px;
+  color: #152a62;
+  width: 100%;
+}
+
+.lang-selector .lang-modal button:not(:disabled):hover {
+  background-color: #f1f1f1;
+  cursor: pointer;
+}
+
+.lang-selector .lang-modal button::before {
+  content: " ";
+  width: 24px;
+  height: 24px;
+}
+
+.lang-selector .lang-modal button:disabled::before {
+  content: " ";
+  background-color: #152a62;
+  mask: url("../non-free/images/checkmark.svg") no-repeat center center / contain;
+  width: 24px;
+  height: 24px;
 }