feat: add new WebID link (#78)

* feat: added link for new webid * chore: removed unnecessary css * feat: added webid label to form input * chore: aligned styling with figma * refactor: add webid label to translations Co-authored-by: Wouter Janssens <wouter@digita.ai>
netwerk-digitaal-erfgoed · Apr 29, 2021 · 089ee76 · 089ee76
1 parent 7531abe
commit 089ee76
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 6 deletions.
diff --git a/packages/nde-erfgoed-manage/lib/features/authenticate/authenticate-root.component.ts b/packages/nde-erfgoed-manage/lib/features/authenticate/authenticate-root.component.ts
@@ -1,4 +1,5 @@
 import { html, property, PropertyValues, internalProperty, unsafeCSS, css } from 'lit-element';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { ArgumentError, Logger, Translator } from '@digita-ai/nde-erfgoed-core';
 import { Event, FormActors, FormRootStates, FormSubmissionStates, FormCleanlinessStates, FormValidationStates, FormEvents, Alert } from '@digita-ai/nde-erfgoed-components';
 import { ActorRef, Interpreter, State} from 'xstate';
@@ -122,14 +123,17 @@ export class AuthenticateRootComponent extends RxLitElement {
         ${ this.formActor ? html`
         <form>
           <nde-form-element .inverse="${true}" .actor="${this.formActor}" .translator="${this.translator}" field="webId">
+            <label slot="label" for="webid">${this.translator?.translate('nde.features.authenticate.pages.login.webid-label')}</label>
             <div slot="icon"></div>
-            <input type="text" slot="input" placeholder="${this.translator?.translate('nde.features.authenticate.pages.login.search-placeholder')}" />
+            <input type="text" slot="input" placeholder="${this.translator?.translate('nde.features.authenticate.pages.login.webid-placeholder')}" />
             <button slot="action" class="primary" ?disabled="${!this.enableSubmit}" @click="${() => this.formActor.send(FormEvents.FORM_SUBMITTED)}">${ unsafeSVG(Login) }</button>
           </nde-form-element>
         </form>
         ` : html``}
       </div>
-    `;
+      <div class="webid-container">
+        <p> ${unsafeHTML(this.translator?.translate('nde.features.authenticate.pages.login.create-webid'))}</p>
+      </div>`;
   }
 
   /**
@@ -148,6 +152,7 @@ export class AuthenticateRootComponent extends RxLitElement {
           gap: var(--gap-huge);
         }
 
+        
         .title-container {
           height: 50px;
           display: flex;
@@ -165,11 +170,25 @@ export class AuthenticateRootComponent extends RxLitElement {
           width: 50px;
           fill: var(--colors-foreground-inverse);
         }
-
+        
         .title-container h1 {
           font-size: var(--font-size-header-normal);
           font-weight: normal;
         }
+        
+        nde-form-element label {
+          color: white;
+        }
+
+        .webid-container p {
+          text-align: center;
+          color: var(--colors-foreground-light);
+          font-size: var(--font-size-small);
+        }
+
+        .webid-container p a {
+          color: var(--colors-foreground-light);
+        }
 
         .form-container {
           width: 400px;

diff --git a/packages/nde-erfgoed-manage/lib/i8n/nl-NL.json b/packages/nde-erfgoed-manage/lib/i8n/nl-NL.json
@@ -45,8 +45,18 @@
         "value": "Collectiebeheersysteem"
     },
     {
-        "key": "nde.features.authenticate.pages.login.search-placeholder",
+        "key": "nde.features.authenticate.pages.login.webid-placeholder",
         "locale": "nl-NL",
-        "value": "E.g. https://profile.janjanssens.nl/"
+        "value": "bv. https://profile.janjanssens.nl/"
+    },
+    {
+        "key": "nde.features.authenticate.pages.login.webid-label",
+        "locale": "nl-NL",
+        "value": "WebID"
+    },
+    {
+        "key": "nde.features.authenticate.pages.login.create-webid",
+        "locale": "nl-NL",
+        "value": "Nog geen WebID? Klik <a href=\"https://pods.nde.nl\">hier</a>."
     }
 ]
diff --git a/packages/nde-erfgoed-theme/lib/common/typography.css b/packages/nde-erfgoed-theme/lib/common/typography.css
@@ -17,3 +17,8 @@ body {
 svg {
   fill: var(--colors-foreground-normal);
 }
+
+a {
+  color: inherit;
+  text-underline-offset: 4px;
+}
diff --git a/specifications/pages/technical/create-authenticate-login-page.adoc b/specifications/pages/technical/create-authenticate-login-page.adoc
@@ -116,7 +116,7 @@ The following translations are to be written in the 'nl-NL.json' file. No other
 | `nde.features.authenticate.pages.login.title`
 | Collectiebeheersysteem
 
-| `nde.features.authenticate.pages.login.search-placeholder`
+| `nde.features.authenticate.pages.login.webid-placeholder`
 | E.g. https://profile.janjanssens.nl/
 
 |======================================