angular

2026-07-17 14:34:44 +02:00
parent 357642ad22
commit d30d9cfdde
15 changed files with 569 additions and 152 deletions
--- a/apps/api/src/oidc/templates/layouts/base.hbs
+++ b/apps/api/src/oidc/templates/layouts/base.hbs
@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="color-scheme" content="light">
+    <title>{{title}} - {{branding.productName}}</title>
+    <style>
+      * { box-sizing: border-box; }
+      body {
+        background: #f3f6f7;
+        color: #18202a;
+        font-family: Arial, Helvetica, sans-serif;
+        margin: 0;
+        min-height: 100vh;
+        padding: 24px;
+      }
+      .page {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        min-height: calc(100vh - 48px);
+      }
+      main {
+        background: #ffffff;
+        border: 1px solid #d8e0e7;
+        border-radius: 8px;
+        box-shadow: 0 16px 40px rgb(24 32 42 / 8%);
+        max-width: 460px;
+        overflow: hidden;
+        width: 100%;
+      }
+      .brand {
+        align-items: center;
+        border-bottom: 1px solid #e7ecef;
+        display: flex;
+        gap: 12px;
+        min-height: 68px;
+        padding: 16px 28px;
+      }
+      .brand img { display: block; max-height: 36px; max-width: 180px; }
+      .brand-name { color: #26313d; font-size: 1rem; font-weight: 700; }
+      .content { padding: 28px; }
+      h1 { font-size: 1.45rem; letter-spacing: 0; margin: 0 0 22px; }
+      form { display: grid; gap: 16px; margin-top: 16px; }
+      label { display: grid; gap: 7px; font-weight: 700; }
+      input {
+        border: 1px solid #aebbc7;
+        border-radius: 6px;
+        color: #18202a;
+        font: inherit;
+        min-height: 44px;
+        padding: 10px 12px;
+        width: 100%;
+      }
+      input:focus { border-color: {{branding.primaryColor}}; outline: 3px solid rgb(15 107 110 / 18%); }
+      button {
+        background: {{branding.primaryColor}};
+        border: 1px solid {{branding.primaryColor}};
+        border-radius: 6px;
+        color: #ffffff;
+        cursor: pointer;
+        font: inherit;
+        font-weight: 700;
+        min-height: 44px;
+        padding: 10px 14px;
+        width: 100%;
+      }
+      button:hover { filter: brightness(0.92); }
+      button:focus-visible, a:focus-visible { outline: 3px solid rgb(15 107 110 / 25%); outline-offset: 2px; }
+      button.secondary { background: #ffffff; color: {{branding.primaryColor}}; }
+      a { color: {{branding.primaryColor}}; font-weight: 700; overflow-wrap: anywhere; text-decoration: none; }
+      a:hover { text-decoration: underline; }
+      .form-link { margin: 18px 0 0; text-align: center; }
+      .intro { color: #3a4551; line-height: 1.5; margin: 0 0 16px; }
+      .message { border-radius: 6px; line-height: 1.45; margin: 0 0 16px; padding: 12px; }
+      .message.error { background: #fff1f0; border: 1px solid #efb5ae; color: #8d2b20; }
+      .consent-details { display: grid; gap: 10px; margin: 0 0 16px; }
+      .consent-details div { display: grid; gap: 5px; }
+      dt { color: #637083; font-size: 0.82rem; font-weight: 700; }
+      dd { margin: 0; overflow-wrap: anywhere; }
+      .scope-list { display: grid; gap: 8px; margin: 16px 0; }
+      .scope-item { border: 1px solid #d8e0e7; border-radius: 6px; display: grid; gap: 4px; padding: 10px 12px; }
+      .scope-item span { color: #637083; font-size: 0.9rem; line-height: 1.35; }
+      footer { color: #637083; font-size: 0.78rem; line-height: 1.4; padding: 0 28px 24px; text-align: center; }
+      @media (max-width: 520px) {
+        body { padding: 12px; }
+        .page { min-height: calc(100vh - 24px); }
+        .brand { padding: 14px 20px; }
+        .content { padding: 24px 20px; }
+        footer { padding: 0 20px 20px; }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="page">
+      <main>
+        <header class="brand">
+          {{#if branding.logoUrl}}
+            <img src="{{branding.logoUrl}}" alt="{{branding.productName}}">
+          {{else}}
+            <span class="brand-name">{{branding.productName}}</span>
+          {{/if}}
+        </header>
+        <section class="content">
+          <h1>{{title}}</h1>
+          {{{body}}}
+        </section>
+        <footer>{{branding.companyName}}</footer>
+      </main>
+    </div>
+  </body>
+</html>