[reclaim-ui] 319/459: internationalization finished

[gnunet]

This is an automated email from the git hooks/post-receive script.

martin-schanzenbach pushed a commit to branch master
in repository reclaim-ui.

commit 05095179a38b923d530abf66273b62c500e2e68d
Author: anna wimbauer <anna.wibauer@gmx.de>
AuthorDate: Mon Oct 5 13:03:05 2020 +0200

    internationalization finished
---
 src/app/app.component.html                         |  2 +-
 src/app/app.component.ts                           |  5 ++
 .../authorization-request.component.html           | 26 +++++------
 .../authorization-request.component.ts             |  7 ++-
 .../edit-authorizations.component.html             | 16 +++----
 .../edit-authorizations.component.ts               |  7 ++-
 .../edit-credentials.component.html                | 43 ++++++++----------
 .../edit-credentials/edit-credentials.component.ts |  9 +++-
 src/app/edit-identity/edit-identity.component.html | 53 +++++++++++-----------
 src/app/edit-identity/edit-identity.component.ts   |  5 ++
 src/app/identity-list/identity-list.component.html | 40 ++++++++--------
 src/app/identity-list/identity-list.component.ts   | 11 +++--
 src/app/new-identity/new-identity.component.html   | 12 ++---
 src/app/new-identity/new-identity.component.ts     |  5 ++
 14 files changed, 134 insertions(+), 107 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 10bb6fa..8137d4b 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,5 +2,5 @@
 <router-outlet></router-outlet>
 <div style="margin: 1em" (click)="toggleExperimental()">
   <i [className]="isExperimental() ? 'fa fa-toggle-on' : 'fa 
fa-toggle-off'"></i>
-  Exerimental features <b *ngIf="isExperimental()">enabled</b><span 
*ngIf="!isExperimental()">disabled</span>
+  <b 
*ngIf="isExperimental()">{{getMessage("app.html:experimentalEnabled")}}</b><span
 
*ngIf="!isExperimental()">{{getMessage("app.html:experimentalDisabled")}}</span>
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index a3b7a5a..8cfabc0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -22,4 +22,9 @@ export class AppComponent {
     this.configService.get().experiments = 
!this.configService.get().experiments;
   }
 
+  //Internationalization
+  getMessage(key, sub?){
+    return browser.i18n.getMessage(key, sub);
+  }
+
 }
diff --git a/src/app/authorization-request/authorization-request.component.html 
b/src/app/authorization-request/authorization-request.component.html
index 3f80249..5d8c059 100644
--- a/src/app/authorization-request/authorization-request.component.html
+++ b/src/app/authorization-request/authorization-request.component.html
@@ -1,23 +1,22 @@
 <div style="text-align: center;">
   <i class="fa fa-2x fa-openid"></i> 
-  <b class="fa-2x" > 
{{browser.i18n.getMessage("authorization-request.html:3")}} </b>
+  <b class="fa-2x" > {{getMessage("authorization-request.html:personalInfo")}} 
</b>
   <br/>
   <span *ngIf="isClientVerified() === undefined">
     <i class="fa fa-2x fa-circle-o-notch fa-spin fa-fw"></i> 
-    <b class="fa-2x" > Verifying request, please stand by...</b>
+    <b class="fa-2x" > 
{{getMessage("authorization-request.html:verifyRequest")}}</b>
   </span>
   <br/>
 </div>
 <div class="card" *ngIf="isClientVerified()" style="margin-left:30%; 
width:40%;">
   <div class="card-body" >
     <strong>{{ oidcService.clientName }}</strong>
-    asks you to share personal information.<br/>
-    Choose an identity to let it access the following information:
+    {{getMessage("authorization-request.html:chooseId")}}
     <ul>
       <li *ngFor="let attribute of 
getRequestedStandardScopesWithDescription()"><strong>{{attribute}}</strong></li>
     </ul>
     <div *ngIf="getRequestedNonStandardClaims().length > 0">
-      as well as the following additional attributes:
+      {{getMessage("authorization-request.html:attributes")}}
       <ul>
         <li *ngFor="let attribute of 
getRequestedNonStandardClaims()"><strong>{{attribute}}</strong></li>
       </ul>
@@ -26,32 +25,29 @@
   <!-- Sharing disclaimer -->
   <div class="alert alert-warning alert-dismissible fade show mb-1" 
role="alert">
     <i class="fa fa-exclamation-triangle mr-2"></i>
-    <strong>Be careful when sharing personal data with third parties!</strong>
-    If you do not want to share information from any of your identities with
-    <i>{{ oidcService.clientName }}</i>, you may decline the request.
-    You may also permanently remove or edit information from an identity before
-    sharing.
+    
<strong>{{getMessage("authorization-request.html:personalDataWarning1")}}</strong>
+    {{getMessage("authorization-request.html:personalDataWarning2", 
oidcService.clientName)}}
   </div>
   <div style="margin: 1em;">
     <button class="btn btn-danger m-1 mt-4" *ngIf="isClientVerified()" 
(click)="cancelRequest()" style="margin-bottom: -4%;">
-      <span class="fa fa-ban"></span> Decline
+      <span class="fa fa-ban"></span> {{getMessage("Decline")}}
     </button>
     <button class="btn btn-primary m-1 mt-4" [routerLink]="['/']" 
*ngIf="isClientVerified()">
-      <span class="fa fa-arrow-circle-right"></span> Select identity...
+      <span class="fa fa-arrow-circle-right"></span> 
{{getMessage("authorization-request.html:selectId")}}
     </button>
   </div>
 </div>
 <div *ngIf="isClientVerified() !== undefined && !isClientVerified()" 
style="text-align: center;">
   <div class="alert alert-danger show" role="alert">
-    <b >Authorization failed.</b><br/>
+    <b >{{getMessage("authorization-request.html:authFailed")}}</b><br/>
     <button class="btn btn-primary mt-4" *ngIf="!isClientVerified()" 
(click)="retryVerify();">
-      <span class="fa fa-openid"></span> Retry
+      <span class="fa fa-openid"></span> 
{{getMessage("authorization-request.html:retry")}}
     </button>
   </div>
 </div>
 <div *ngIf="isClientVerified() === undefined" style="text-align: center;">
   <button class="btn btn-danger mt-4" *ngIf="isClientVerified() === undefined" 
(click)="cancelRequest()">
-    <span class="fa fa-ban"></span> Cancel verification request
+    <span class="fa fa-ban"></span> 
{{getMessage("authorization-request.html:cancelRequest")}}
   </button>
 </div>
 
diff --git a/src/app/authorization-request/authorization-request.component.ts 
b/src/app/authorization-request/authorization-request.component.ts
index 51de344..f7ed07b 100644
--- a/src/app/authorization-request/authorization-request.component.ts
+++ b/src/app/authorization-request/authorization-request.component.ts
@@ -32,7 +32,7 @@ export class AuthorizationRequestComponent implements OnInit {
 
   cancelRequest() {
     this.oidcService.cancelAuthorization().subscribe(() => {
-      console.log('Request cancelled');
+      
console.log(this.getMessage("authorization-request.ts:requestCancelled"));
       this.router.navigate(['/']);
       //Manually reset this component
     });
@@ -42,5 +42,10 @@ export class AuthorizationRequestComponent implements OnInit 
{
     this.oidcService.getClientName();
   }
 
+  //Internationalization
+  getMessage(key, sub?){
+    return browser.i18n.getMessage(key, sub);
+  }
+
 
 }
diff --git a/src/app/edit-authorizations/edit-authorizations.component.html 
b/src/app/edit-authorizations/edit-authorizations.component.html
index 87dfe55..c8de885 100644
--- a/src/app/edit-authorizations/edit-authorizations.component.html
+++ b/src/app/edit-authorizations/edit-authorizations.component.html
@@ -2,7 +2,7 @@
 <div class="m-2 card">
   <div class="card-avatar card-img-top">
     <div class="card-avatar-character text-dark" >
-      Manage authorizations for <i>{{ identity.name }}</i>
+      {{getMessage("edit-authorizations.html:manageAuths")}} <i>{{ 
identity.name }}</i>
     </div>
   </div>
   <div class="card-body">
@@ -13,12 +13,12 @@
           <tr>
             <th scope="col">
               <h6 class="card-subtitle mb-2">
-                Authorized Entity:
+                {{getMessage("edit-authorizations.html:authEntity")}}
               </h6>
             </th>
             <th scope="col">
               <h6 class="card-subtitle mb-2">
-                Shared attributes:
+                {{getMessage("edit-authorizations.html:sharedAttributes")}}
               </h6>
             </th>
             <th scope="col"></th>
@@ -38,15 +38,15 @@
             </td>
             <td>
               <button class="btn btn-primary" *ngIf="showConfirmRevoke != 
ticket" (click)="confirmRevoke(ticket)">
-                <span class="fa fa-unlink"></span> Revoke
+                <span class="fa fa-unlink"></span> {{getMessage("Revoke")}}
               </button>
               <div class="alert alert-danger fade show" 
*ngIf="showConfirmRevoke == ticket">
-                Do you really want to revoke this authorization?<br/><br/>
+                
{{getMessage("edit-authorizations.html:revokeVerifikation")}}<br/><br/>
                 <button class="btn btn-primary m-2" 
(click)="revokeTicket(ticket)">
-                  <span class="fa fa-check"></span> Yes
+                  <span class="fa fa-check"></span> {{getMessage("Yes")}}
                 </button>
                 <button class="btn btn-primary m-2" 
(click)="hideConfirmRevoke()">
-                  <span class="fa fa-close"></span> No
+                  <span class="fa fa-close"></span> {{getMessage("No")}}
                 </button>
               </div>
             </td>
@@ -57,7 +57,7 @@
     <!-- Edit card buttons -->
     <div>
       <button class="btn btn-primary" [routerLink]="['/edit-identity', 
identity.name]">
-        <span class="fa fa-back"></span> Back to {{identity.name}}
+        <span class="fa fa-back"></span> 
{{getMessage("edit-authorizations.html:BackTo", identity.name)}}
       </button>
     </div>
   </div>
diff --git a/src/app/edit-authorizations/edit-authorizations.component.ts 
b/src/app/edit-authorizations/edit-authorizations.component.ts
index 79b2efe..8de668c 100644
--- a/src/app/edit-authorizations/edit-authorizations.component.ts
+++ b/src/app/edit-authorizations/edit-authorizations.component.ts
@@ -54,7 +54,7 @@ export class EditAuthorizationsComponent implements OnInit {
 
   getAudienceName(ticket) {
     if (undefined === this.audienceNames[ticket.audience]) {
-      return 'Unknown';
+      return this.getMessage("unknown");
     }
     return this.audienceNames[ticket.audience];
   }
@@ -140,5 +140,10 @@ export class EditAuthorizationsComponent implements OnInit 
{
     });
   }
 
+  //Internationalization
+  getMessage(key, sub?){
+    return browser.i18n.getMessage(key, sub);
+  }
+
 
 }
diff --git a/src/app/edit-credentials/edit-credentials.component.html 
b/src/app/edit-credentials/edit-credentials.component.html
index 4e53513..3a8b341 100644
--- a/src/app/edit-credentials/edit-credentials.component.html
+++ b/src/app/edit-credentials/edit-credentials.component.html
@@ -2,12 +2,12 @@
 <div class="m-2 card">
   <div class="card-avatar card-img-top">
     <div class="card-avatar-character text-dark" >
-      Third party credentials for <i>{{ identity.name }}</i>
+      {{getMessage("edit-credentials.html:credentialsFor")}} <i>{{ 
identity.name }}</i>
     </div>
   </div>
   <!-- Credential management -->
   <div class="card-body">
-    <h3 >Link account:</h3>
+    <h3 >{{getMessage("edit-credentials.html:linkAccount")}}</h3>
     <!--IdProvider-Discovery-->
     <div>
       <!--Email not found Warning-->
@@ -17,26 +17,23 @@
       </div>
       <!--Issuer Discovery Warning-->
       <div *ngIf="!isValidEmailforDiscovery()" class="alert alert-primary 
alert-dismissible fade show" role="alert" >
-        <span class="fa fa-warning"></span> This account is not compatible 
with re:claimID.
+        <span class="fa fa-warning"></span> 
{{getMessage("edit-credentials.html:notCompatible")}}
       </div>
       <div *ngIf="!newIdProviderDiscovered() && !loggedIn()"
         class="alert alert-secondary alert-dismissible fade show my-2" 
role="alert" >
-        <span class="fa fa-info"> </span>  <b class="ml-2">INFO</b><br/>
-        It is possible to link your external
-        accounts with a re:claimID identity. To do so, enter you email address
-        below and click "Check compatibility". <br/><i>NOTE:</i> Not all 
external accounts
-        support linking to re:claimID identities.<br/>
+        <span class="fa fa-info"> </span>  <b 
class="ml-2">{{getMessage("edit-credentials.html:info")}}</b><br/>
+        {{getMessage("edit-credentials.html:linkAccountInfo")}}
       </div>
       <div *ngIf="!newIdProviderDiscovered()" class="my-2 col-lg-4">
         <input placeholder="user@example.com" [(ngModel)]="webfingerEmail">
         <button *ngIf="!newIdProviderDiscovered()" class="btn btn-primary 
fhg-link" (click)="discoverIdProvider()" >
-          <span class="fa fa-search"></span> Check compatibility
+          <span class="fa fa-search"></span> 
{{getMessage("edit-credentials.html:checkCompatability")}}
         </button>
       </div>
       <!--Description-->
       <!--Link account-->
       <div *ngIf="newIdProviderDiscovered() && !loggedIn()" class="mb-3 px-2">
-          <div class="mx-n2" >Available claims to request:</div>
+          <div class="mx-n2" 
>{{getMessage("edit-credentials.html:availableClaims")}}</div>
           <div *ngFor="let scope of scopes" class="mx-2">
             <i class="fa text-primary" [class.fa-toggle-off]="!scope.chosen" 
[class.fa-toggle-on]="scope.chosen" 
[class.text-muted]="necessaryScope(scope.scope)" 
(click)="!necessaryScope(scope.scope) && scope.chosen = !scope.chosen"></i>
             <span class="ml-1" 
[class.text-muted]="necessaryScope(scope.scope)">{{scope.scope}}</span>
@@ -44,25 +41,25 @@
             <!--<label class="form-check-label" 
for="scope.chosen">{{scope.scope}}</label>-->
           </div>
         <button class="btn btn-primary mb-1 mt-2 fhg-link" 
(click)="loginFhgAccount()" >
-          <span class="fa fa-link"></span> Link
+          <span class="fa fa-link"></span> 
{{getMessage("edit-credentials.html:link")}}
         </button>
         <button class="btn btn-primary mb-1 fhg-link" 
(click)="cancelLinking()" >
-          <span class="fa fa-close"></span> Cancel
+          <span class="fa fa-close"></span> {{getMessage("Cancel")}}
         </button>
       </div>
     </div>
     <hr />
 
-    <h3 >Credentials:</h3>
+    <h3 >{{getMessage("edit-credentials.html:credentials")}}</h3>
     <!-- Credential creation warning -->
     <div
       *ngIf="loggedIn() && !credentialNameValid(newCredential) || 
!credentialTypeValid(newCredential) || !credentialValueValid(newCredential)"
       class="alert alert-primary alert-dismissible fade show" role="alert" >
-      <span class="fa fa-warning"></span> Note:
+      <span class="fa fa-warning"></span> 
{{getMessage("edit-credentials.html:note")}}
       <ul>
-        <li>Only use alphanumeric credential names.</li>
-        <li>You cannot define the same name twice.</li>
-        <li>Types and values may not be empty!</li>
+        <li>{{getMessage("edit-credentials.html:note1")}}</li>
+        <li>{{getMessage("edit-credentials.html:note2")}}</li>
+        <li>{{getMessage("edit-credentials.html:note3")}}</li>
       </ul>
     </div>
 
@@ -70,10 +67,10 @@
     <table class="table pb-1" style="">
       <thead>
         <tr>
-          <th >Name</th>
-          <th >Type</th>
-          <th >Expires</th>
-          <th >Issuer</th>
+          <th >{{getMessage("edit-credentials.html:name")}}</th>
+          <th >{{getMessage("edit-credentials.html:type")}}</th>
+          <th >{{getMessage("edit-credentials.html:expires")}}</th>
+          <th >{{getMessage("edit-credentials.html:issuer")}}</th>
         </tr>
       </thead>
       <tbody>
@@ -101,7 +98,7 @@
             </button>
           </td>
           <td>
-            <div *ngIf="!isCredentialValid(credential)"> <span 
style="color:#f00" > Expired </span> <span
+            <div *ngIf="!isCredentialValid(credential)"> <span 
style="color:#f00" > {{getMessage("edit-credentials.html:expired")}} </span> 
<span
                 class="fa fa-times"></span> </div>
           </td>
         </tr>
@@ -134,7 +131,7 @@
     <!-- Edit card buttons -->
     <div>
       <button class="btn btn-primary" (click)="goBack()" 
[disabled]="!canGoBack()">
-        <span class="fa fa-save"></span> Back
+        <span class="fa fa-save"></span> {{getMessage("Back")}}
       </button>
     </div>
   </div>
diff --git a/src/app/edit-credentials/edit-credentials.component.ts 
b/src/app/edit-credentials/edit-credentials.component.ts
index f97b357..1970a14 100644
--- a/src/app/edit-credentials/edit-credentials.component.ts
+++ b/src/app/edit-credentials/edit-credentials.component.ts
@@ -275,10 +275,10 @@ export class EditCredentialsComponent implements OnInit {
     },
     error => {
       if (error.status == 404){
-        this.errorMassage = 'No account found with this email'
+        this.errorMassage = this.getMessage("edit-credentials.ts:noAccount");
       }
       else{
-        this.errorMassage = 'An Error has occured - This may have been caused 
by a wrong e-mail address'
+        this.errorMassage = 
this.getMessage("edit-credentials.ts:errorWrongAddress");
       }
       this.emailNotFoundAlertClosed = false;
         setTimeout(() => this.emailNotFoundAlertClosed = true, 20000);
@@ -361,5 +361,10 @@ export class EditCredentialsComponent implements OnInit {
     this.scopes = [];
   }
 
+  //Internationalization
+  getMessage(key, sub?){
+    return browser.i18n.getMessage(key, sub);
+  }
+
 
 }
diff --git a/src/app/edit-identity/edit-identity.component.html 
b/src/app/edit-identity/edit-identity.component.html
index cb98c17..3b1c67d 100644
--- a/src/app/edit-identity/edit-identity.component.html
+++ b/src/app/edit-identity/edit-identity.component.html
@@ -12,10 +12,9 @@
   <!-- Attribute table -->
   <div class="card-body">
     <div>
-      <h3 class="card-subtitle mb-2"  >Basic user information <span 
(click)="showGeneralInfo = !showGeneralInfo" class="fa 
fa-question-circle"></span></h3>
+      <h3 class="card-subtitle mb-2"> 
{{getMessage("edit-identity.html:basicInfo")}} <span (click)="showGeneralInfo = 
!showGeneralInfo" class="fa fa-question-circle"></span></h3>
       <div class="alert alert-secondary fade show" *ngIf="showGeneralInfo" >
-        The attributes below correspond to the standard scopes of the OpenID 
Connect
-        specification: ``profile'', ``email'', ``phone'' and ``address''.
+        {{getMessage("edit-identity.html:standardScopes")}}
       </div>
 
       <div class="table pb-1">
@@ -30,7 +29,7 @@
             </div>
             <div class="col-sm">
               <input *ngIf="!isClaimCred(claim)" placeholder="Value" 
[(ngModel)]="claim.value">
-              <span *ngIf="isClaimCred(claim)"  >{{ getCredValue(claim) }} 
issued by <i>{{ getIssuer(claim) }}</i> as attribute for ``{{ claim.value 
}}''</span>
+              <span *ngIf="isClaimCred(claim)"  
>{{getMessage("edit-identity.html:claimAsAttribute", [getCredValue(claim), 
getIssuer(claim), claim.value])}}</span>
             </div>
             <div class="col-sm">
               <button class="btn btn-primary" (click)="deleteAttribute(claim)" 
*ngIf="!isClaimCred(claim)">
@@ -71,7 +70,7 @@
                 <i *ngIf="isClaimRequested(claim)" class="fa 
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></div>
             <div class="col-sm">
               <input *ngIf="!isClaimCred(claim)" placeholder="Value" 
[(ngModel)]="claim.value">
-              <span *ngIf="isClaimCred(claim)" >{{ getCredValue(claim) }} 
issued by <i>{{ getIssuer(claim) }}</i> as attribute for ``{{ claim.value 
}}''</span>
+              <span *ngIf="isClaimCred(claim)" 
>{{getMessage("edit-identity.html:claimAsAttribute", [getCredValue(claim), 
getIssuer(claim), claim.value])}}</span>
             </div>
             <div class="col-sm">
               <button class="btn btn-primary" (click)="deleteAttribute(claim)" 
*ngIf="!isClaimCred(claim)">
@@ -114,7 +113,7 @@
                 <i *ngIf="isClaimRequested(claim)" class="fa 
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></div>
             <div class="col-sm">
               <input *ngIf="!isClaimCred(claim)" placeholder="Value" 
[(ngModel)]="claim.value">
-              <span *ngIf="isClaimCred(claim)" >{{ getCredValue(claim) }} 
issued by <i>{{ getIssuer(claim) }}</i> as attribute for ``{{ claim.value 
}}''</span>
+              <span *ngIf="isClaimCred(claim)" 
>{{getMessage("edit-identity.html:claimAsAttribute", [getCredValue(claim), 
getIssuer(claim), claim.value])}}</span>
             </div>
             <div class="col-sm">
               <button class="btn btn-primary" (click)="deleteAttribute(claim)" 
*ngIf="!isClaimCred(claim)">
@@ -156,7 +155,7 @@
                 <i *ngIf="isClaimRequested(claim)" class="fa 
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></div>
             <div class="col-sm">
               <input *ngIf="!isClaimCred(claim)" placeholder="Value" 
[(ngModel)]="claim.value">
-              <span *ngIf="isClaimCred(claim)" >{{ getCredValue(claim) }} 
issued by <i>{{ getIssuer(claim) }}</i> as attribute for ``{{ claim.value 
}}''</span>
+              <span *ngIf="isClaimCred(claim)" 
>{{getMessage("edit-identity.html:claimAsAttribute", [getCredValue(claim), 
getIssuer(claim), claim.value])}}</span>
             </div>
             <div class="col-sm">
               <button class="btn btn-primary" (click)="deleteAttribute(claim)" 
*ngIf="!isClaimCred(claim)">
@@ -176,14 +175,14 @@
                 <i *ngIf="isClaimRequested(claim)" class="fa 
fa-openid"></i><b> {{ getDescription(claim) }}</b></div></div>
             <div class="col-sm">
               <select *ngIf="isExperimental()" class="custom-select" 
(change)="claim.flag=$event.target.value; ">
-                <option value="0">Plain</option>
-                <option value="1">Credential</option>
+                <option value="0">{{ getMessage("edit-identity.html:plain") 
}}</option>
+                <option value="1">{{ 
getMessage("edit-identity.html:credential") }}</option>
               </select>
 
               <input *ngIf="claim.flag == '0'" placeholder="Value" 
[(ngModel)]="claim.value">
               <select *ngIf="claim.flag == '1'" class="custom-select"
                 (change)="claim.credential=$event.target.value; " >
-                <option value="">Select credential source</option>
+                <option value="">{{ 
getMessage("edit-identity.html:selectSource") }}</option>
                 <option *ngFor="let cred of credentials" value={{cred.id}}>
                 {{cred.name}}
                 </option>
@@ -191,7 +190,7 @@
 
               <select class="custom-select"
                 *ngIf="(claim.credential !== '') && (claim.flag == '1')" 
(change)="claim.value=$event.target.value">
-                <option value="">Select claim</option>
+                <option value="">{{ 
getMessage("edit-identity.html:selectClaim") }}</option>
                 <option *ngFor="let att of credentialValuesForClaim(claim)" 
value={{att.name}}>
                 {{att.value}} <i>({{att.name}})</i>
                 </option>
@@ -207,9 +206,9 @@
       </div>
 
 
-      <h3 class="card-subtitle mb-2" >Additional information <span 
(click)="showExtraInfo = !showExtraInfo" class="fa 
fa-question-circle"></span></h3>
+      <h3 class="card-subtitle mb-2" >{{ 
getMessage("edit-identity.html:additionalInfo") }}<span (click)="showExtraInfo 
= !showExtraInfo" class="fa fa-question-circle"></span></h3>
       <div class="alert alert-secondary fade show" *ngIf="showExtraInfo" >
-        Non-standard claims which are not explicitly covered in the OpenID 
Connect core specification.
+        {{ getMessage("edit-identity.html:non-standardClaims") }}
       </div>
 
       <!-- Missing "non-standard" claims that are requested -->
@@ -223,14 +222,14 @@
             <div class="col-sm">
               <input *ngIf="!isClaimCredentialRequested(missing)" 
placeholder="Value" [(ngModel)]="missing.value">
               <select *ngIf="isClaimCredentialRequested(missing)" 
class="custom-select" (change)="missing.credential=$event.target.value; ">
-                <option value="">Select credential source</option>
+                <option value="">{{ 
getMessage("edit-identity.html:selectSource") }}</option>
                 <option *ngFor="let cred of credentials" value={{cred.id}}>
                   {{cred.name}}
                 </option>
               </select>
 
               <select *ngIf="isClaimCredentialRequested(missing) && 
missing.credential !== ''" class="custom-select" 
(change)="missing.value=$event.target.value">
-                <option value="">Select claim</option>
+                <option value="">{{ 
getMessage("edit-identity.html:selectClaim") }}</option>
                 <option *ngFor="let claim of credentialValuesForCred(missing)" 
value={{claim.name}}>
                   {{claim.value}} <i>({{claim.name}})</i>
                 </option>
@@ -253,7 +252,7 @@
             </div>
             <div class="col-sm">
               <input *ngIf="!isClaimCred(attribute)" placeholder="Value" 
[(ngModel)]="attribute.value">
-              <span *ngIf="isClaimCred(attribute)" >{{ getCredValue(attribute) 
}} issued by <i>{{ getIssuer(attribute) }}</i> as attribute for ``{{ 
attribute.value }}''</span>
+              <span *ngIf="isClaimCred(attribute)" 
>{{getMessage("edit-identity.html:claimAsAttribute", [getCredValue(claim), 
getIssuer(claim), claim.value])}}</span>
             </div>
             <div class="col-sm">
               <button class="btn btn-primary" 
(click)="deleteAttribute(attribute)" *ngIf="!isClaimCred(attribute)">
@@ -272,13 +271,13 @@
             <div class="col-sm">
 
               <select *ngIf="isExperimental()" class="custom-select" 
(change)="newAttribute.flag=$event.target.value; ">
-                <option value="0">Plain</option>
-                <option value="1">Credential</option>
+                <option value="0">{{ getMessage("edit-identity.html:plain") 
}}</option>
+                <option value="1">{{ 
getMessage("edit-identity.html:credential") }}</option>
               </select>
               <input *ngIf="newAttribute.flag == '0'" placeholder="Value" 
[class.text-danger]="!attributeValueValid(newAttribute)" 
[(ngModel)]="newAttribute.value">
               <select *ngIf="newAttribute.flag == '1'" class="custom-select"
                 (change)="newAttribute.credential=$event.target.value; " >
-                <option value="">Select credential source</option>
+                <option value="">{{ 
getMessage("edit-identity.html:selectSource") }}</option>
                 <option *ngFor="let cred of credentials" value={{cred.id}}>
                 {{cred.name}}
                 </option>
@@ -286,7 +285,7 @@
 
               <select class="custom-select"
                 *ngIf="newAttribute.credential !== '' && newAttribute.flag == 
'1'" (change)="newAttribute.value=$event.target.value">
-                <option value="" >Select claim</option>
+                <option value="" >{{ 
getMessage("edit-identity.html:selectClaim") }}</option>
                 <option *ngFor="let claim of 
credentialValuesForClaim(newAttribute)" value={{claim.name}}>
                 {{claim.value}} <i>({{claim.name}})</i>
                 </option>
@@ -302,11 +301,11 @@
     </div>
     <!-- Attribute creation warning -->
     <div *ngIf="!attributeNameValid(newAttribute) || 
!attributeValueValid(newAttribute)" class="alert alert-primary 
alert-dismissible fade show" role="alert">
-      <span class="fa fa-warning"></span> Note:
+      <span class="fa fa-warning"></span> {{ 
getMessage("edit-identity.html:note") }}
       <ul>
-        <li>Only use alphanumeric attribute names.</li>
-        <li>You cannot define the same name twice.</li>
-        <li>Attribute values may not be empty!</li>
+        <li>{{ getMessage("edit-identity.html:note1") }}</li>
+        <li>{{ getMessage("edit-identity.html:note2") }}</li>
+        <li>{{ getMessage("edit-identity.html:note3") }}</li>
       </ul>
     </div>
 
@@ -315,15 +314,15 @@
     <!-- Edit card buttons -->
     <div>
       <button class="btn btn-primary" (click)="saveIdentity()" 
[disabled]="!canSaveIdentity()">
-        <span class="fa fa-save"></span> Save and Back
+        <span class="fa fa-save"></span> {{ getMessage("SaveAndBack") }}
       </button>
       <button *ngIf="!inOpenIdFlow()" class="btn btn-primary" 
[routerLink]="['/edit-authorizations', identity.name]" [style.float]="'right'">
         <span class="fa fa-openid"></span>
-        Manage authorizations
+        {{ getMessage("edit-identity.html:manageAuths") }}
       </button>
       <button *ngIf="!inOpenIdFlow() && isExperimental()" class="btn 
btn-primary" [routerLink]="['/edit-credentials', identity.name]" 
[style.float]="'right'">
         <span class="fa fa-openid"></span>
-        Manage credentials
+        {{ getMessage("edit-identity.html:manageCreds") }}
       </button>
     </div>
   </div>
diff --git a/src/app/edit-identity/edit-identity.component.ts 
b/src/app/edit-identity/edit-identity.component.ts
index 8f9d1e8..4bbd9d8 100644
--- a/src/app/edit-identity/edit-identity.component.ts
+++ b/src/app/edit-identity/edit-identity.component.ts
@@ -535,4 +535,9 @@ export class EditIdentityComponent implements OnInit {
     return this.configService.get().experiments;
   }
 
+  //Internationalization
+  getMessage(key, sub?){
+    return browser.i18n.getMessage(key, sub);
+  }
+
 }
diff --git a/src/app/identity-list/identity-list.component.html 
b/src/app/identity-list/identity-list.component.html
index 704ba99..d60c499 100644
--- a/src/app/identity-list/identity-list.component.html
+++ b/src/app/identity-list/identity-list.component.html
@@ -3,7 +3,7 @@
   <div class="logo"><img src="assets/reclaim_icon.png"/></div>
   <hr>
   <div style="text-align: center; font-size: 18px;">
-    <strong> Unable to connect to GNUnet. <br/> Maybe it is not running? 
</strong>
+    <strong> {{ getMessage("identity-list.html:unableToConnect") }} </strong>
   </div>
 </oid-modal>
 
@@ -16,7 +16,7 @@
     <input class="form-control mr-sm-2" type="search" [(ngModel)]="searchTerm" 
name="searchTerm" placeholder="Search identities" style="border-radius: 2em;">
     </div>
     <button class="btn btn-primary" [routerLink]="['/new-identity']" >
-      <span class="fa fa-user-plus"></span> New identity
+      <span class="fa fa-user-plus"></span> {{ 
getMessage("identity-list.html:newId") }}
     </button>
   </div>
   <br/>
@@ -25,7 +25,7 @@
 <!-- Cancel authorization -->
 <div style="margin-bottom: 1em; text-align: center;" *ngIf="inOpenIdFlow()">
     <button *ngIf="inOpenIdFlow()" class="btn btn-danger mt-2" 
(click)="cancelRequest()">
-      <span class="fa fa-ban"></span> Decline authorization request
+      <span class="fa fa-ban"></span> {{ 
getMessage("identity-list.html:declineRequest") }}
     </button>
 </div>
 
@@ -33,7 +33,7 @@
 <div *ngFor="let err of errorInfos" class="alert alert-danger show" 
role="alert">
   <b>ERROR</b>
   <button class="btn btn-primary ml-4" 
(click)="errorInfos.splice(errorInfos.indexOf(err,0), 1)">
-    <span>Dismiss</span>
+    <span>{{ getMessage("identity-list.html:dismiss") }}</span>
   </button>
   <br/>
   {{err}}
@@ -41,16 +41,16 @@
 
 <!-- No identities present -->
 <div *ngIf="isConnected() && 0 == identities.length" style="text-align: 
center;" class="alert alert-secondary alert-dismissible fade show" role="alert">
-  You don't have any identities yet.<br/><br/>
+  {{ getMessage("identity-list.html:noId") }}<br/><br/>
   <button class="btn btn-primary" [routerLink]="['/new-identity']">
-    <span class="fa fa-plus"></span> Add your first identity!
+    <span class="fa fa-plus"></span> {{ 
getMessage("identity-list.html:addFirstId") }}
   </button>
 </div>
 
 <!-- Identity cards -->
 <!-- No match -->
 <div *ngIf="canSearch()">
-  <div *ngIf="(identities | search: searchTerm).length == 0" 
style="text-align: center;" class="alert alert-secondary alert-dismissible fade 
show" role="alert"  >No matching identities.</div>
+  <div *ngIf="(identities | search: searchTerm).length == 0" 
style="text-align: center;" class="alert alert-secondary alert-dismissible fade 
show" role="alert">{{ getMessage("identity-list.html:noMatchingIds") }}</div>
 </div>
 <!-- Cards -->
 <div class="card-columns p-2 mr-5 ml-5" [ngStyle]="{'column-count': '1'}" 
style="display: flex; flex-direction:column; align-items:center">
@@ -69,33 +69,33 @@
     </div>
     <!-- Identity deletion confirmation -->
     <div class="alert alert-danger fade show" [hidden]="showConfirmDelete != 
identity">
-      Do you really want to delete this identity?<br/><br/>
+      {{ getMessage("identity-list.html:verifyDelete") }}<br/><br/>
       <button class="btn btn-primary" (click)="deleteIdentity(identity)">
-        <span class="fa fa-trash"></span> Delete
+        <span class="fa fa-trash"></span> {{ getMessage("Delete") }}
       </button>
       <button class="btn btn-primary" (click)="hideConfirmDelete()">
-        <span class="fa fa-close"></span> Cancel
+        <span class="fa fa-close"></span> {{ getMessage("Cancel") }}
       </button>
     </div>
     <!-- Maybe add some info to identities? - dialog -->
     <div class="alert alert-secondary fade show" 
[hidden]="hasAttributes(identity)" >
-      This identity has no attributes. Maybe try <a class="buttonlink" 
[routerLink]="['/edit-identity', identity.name]">adding some?</a>
+      {{ getMessage("identity-list.html:noAttributes1") }} <a 
class="buttonlink" [routerLink]="['/edit-identity', identity.name]">{{ 
getMessage("identity-list.html:noAttributes2") }}</a>
     </div>
     <div [hidden]="!isAnyRequestedClaimMissing(identity)"
       class="alert alert-warning alert-dismissible fade show"
       [class.alert-warning]="!isAnyRequiredClaimMissing(identity)"
       [class.alert-danger]="isAnyRequiredClaimMissing(identity)"
       role="alert" >
-      <span class="fa fa-openid"></span> This identity is missing some 
requested information:
+      <span class="fa fa-openid"></span> {{ 
getMessage("identity-list.html:missingInformation") }}
       <ul>
         <li *ngIf="isProfileRequested() && isProfileMissing(identity)"><b>{{ 
getProfileDescription() }}</b></li>
         <li *ngIf="isEmailRequested() && isEmailMissing(identity)"><b>{{ 
getEmailDescription() }}</b></li>
         <li *ngIf="isPhoneRequested() && isPhoneMissing(identity)"><b>{{ 
getPhoneDescription() }}</b></li>
         <li *ngIf="isAddressRequested() && isAddressMissing(identity)"><b>{{ 
getAddressDescription() }}</b></li>
-        <li *ngFor="let attr of 
getMissingClaims(identity)"><b>{{attr.name}}</b><i *ngIf="!isOptional(attr)"> 
(required)</i></li>
+        <li *ngFor="let attr of 
getMissingClaims(identity)"><b>{{attr.name}}</b><i *ngIf="!isOptional(attr)"> 
({{ getMessage("identity-list.html:required") }})</i></li>
       </ul>
       <button class="btn btn-primary" [routerLink]="['/edit-identity', 
identity.name]">
-        <span class="fa fa-edit"></span> Edit identity
+        <span class="fa fa-edit"></span> {{ 
getMessage("identity-list.html:editId") }}
       </button>
     </div>
 
@@ -121,14 +121,14 @@
           </div>
           <div *ngIf="(openIdentity != identity) && 
hasLotsOfAttributes(identity)" class="ml-4">
             <div>
-              <i>... and {{ attributes[identity.pubkey].length - 5 }} more 
attributes</i><br/>
+              <i>{{ getMessage("identity-list.html:moreAttributes", 
attributes[identity.pubkey].length - 5) }}</i><br/>
             </div>
           </div>
         </div>
         </div>
         <button class="btn btn-primary mt-3" (click)="openIdentity = identity" 
*ngIf="(openIdentity != identity) && hasLotsOfAttributes(identity)">
           <i class="fa fa-expand"></i>
-            Show all attributes
+          {{ getMessage("identity-list.html:showAll") }}
         </button>
       </div>
     </div>
@@ -136,8 +136,8 @@
       <button [disabled]="!isClientVerified() || 
isAnyRequiredClaimMissing(identity)"
         (click)="loginIdentity(identity)"
         class="btn btn-primary mr-1 openid-login">
-        <span *ngIf="isClientVerified()" >Share information marked with <i 
class="fa fa-openid text-primary"></i> from this identity.</span>
-        <span *ngIf="!isClientVerified()" ><i class="fa 
fa-exclamation-circle"></i> Sharing disabled</span>
+        <span *ngIf="isClientVerified()" >{{ 
getMessage("identity-list.html:shareInfo1") }} <i class="fa fa-openid 
text-primary"></i> {{ getMessage("identity-list.html:shareInfo2") }}</span>
+        <span *ngIf="!isClientVerified()" ><i class="fa 
fa-exclamation-circle"></i> {{ getMessage("identity-list.html:sharingDisabled") 
}}</span>
       </button>
     </div>
   </div>
@@ -148,12 +148,12 @@
       <div class="card-avatar-character text-dark">
         <!--<div class="icon m-1 text-uppercase" 
[style.background-color]="intToRGB(identity.pubkey)">{{ 
identity.name[0]}}</div>-->
         <i class="fa fa-user-circle"></i>
-        <span class="m-1" style="display: inline-block" ><i> New 
Identity</i></span>
+        <span class="m-1" style="display: inline-block" ><i>{{ 
getMessage("identity-list.html:newId") }}</i></span>
       </div>
     </div>
     <div class="card-body">
       <div style="text-align:center" class="mb-4">
-        <i>Click to add a new identity.</i>
+        <i>{{ getMessage("identity-list.html:addId") }}</i>
       </div>
       <div style="text-align:center">
         <img src="assets/reclaim_icon.png" style="width: 5em;opacity: 0.3;">
diff --git a/src/app/identity-list/identity-list.component.ts 
b/src/app/identity-list/identity-list.component.ts
index 5b48d98..40d3f69 100644
--- a/src/app/identity-list/identity-list.component.ts
+++ b/src/app/identity-list/identity-list.component.ts
@@ -126,7 +126,7 @@ export class IdentityListComponent implements OnInit {
       }
     },
     err => {
-      this.errorInfos.push("Error retrieving references for ``" + 
identity.name + "''");
+      this.errorInfos.push(this.getMessage("identity-list.ts:errorReferences", 
identity.name));
       console.log(err);
     });
   }
@@ -156,7 +156,7 @@ export class IdentityListComponent implements OnInit {
       this.updateMissingClaims(identity);
     },
     err => {
-      this.errorInfos.push("Error retrieving attributes for ``" + 
identity.name + "''");
+      this.errorInfos.push(this.getMessage("identity-list.ts:errorAttributes", 
identity.name));
       console.log(err);
     });
   }
@@ -168,7 +168,7 @@ export class IdentityListComponent implements OnInit {
         this.updateIdentities();
       },
       err => {
-        this.errorInfos.push("Failed deleting identity ``" + identity.name + 
"''");
+        
this.errorInfos.push(this.getMessage("identity-list.ts:errorDeletingId", 
identity.name));
         console.log(err);
       });
   }
@@ -479,4 +479,9 @@ export class IdentityListComponent implements OnInit {
   isSharingInfoOpened(identity): boolean {
     return this.showSharingInfo == identity;
   }
+
+  //Internationalization
+  getMessage(key, sub?){
+    return browser.i18n.getMessage(key, sub);
+  }
 }
diff --git a/src/app/new-identity/new-identity.component.html 
b/src/app/new-identity/new-identity.component.html
index 83a8805..ca723a5 100644
--- a/src/app/new-identity/new-identity.component.html
+++ b/src/app/new-identity/new-identity.component.html
@@ -3,30 +3,30 @@
   <div class="m-2 card" style="text-align:center; width:100%; max-width: 
50em;">
     <div class="card-avatar card-img-top">
       <div class="card-avatar-character text-dark">
-        New identity        
+        {{getMessage("new-identity.html:newId")}}     
       </div>
     </div>
     <!-- Invalid input -->
     <div *ngIf="'' !== newIdentity.name && !canSave() && !isDuplicate()" 
class="alert alert-danger alert-dismissible fade show" role="alert">
-      Only Alphanumeric input. No spaces or special characters allowed.
+      {{getMessage("new-identity.html:inputSpecification")}}   
     </div>
     <!--Identity already exists -->  
     <div *ngIf="isDuplicate()" class="alert alert-warning alert-dismissible 
fade show" role="alert"> 
-      An identity with this username already exists.
+      {{getMessage("new-identity.html:usernameDuplicate")}}   
     </div>
     <!-- Input text -->
     <div *ngIf="'' === newIdentity.name || canSave()" class="alert 
alert-secondary alert-dismissible fade show" role="alert">
-      Enter a username for your new identity
+      {{getMessage("new-identity.html:enterUsername")}}
     </div>
     <div class="card-body">
       <input [class.text-danger]="'' !== newIdentity.name && !canSave()" 
style="text-align: center; border: 1px solid #111;" 
(keyup.enter)="saveIdentity()" pattern="^[a-zA-Z0-9-]+" placeholder="Username" 
title="Only Alphanumeric input. No spaces or special characters allowed." 
class="mr-2" [(ngModel)]="newIdentity.name" autofocus>
       <br/>
       <br/>
       <button [disabled]="!canSave()" [style.inactive]="!canSave()"  class="-1 
btn btn-primary" (click)="saveIdentity()">
-        <span class="fa fa-save"></span> Save
+        <span class="fa fa-save"></span> {{getMessage("Save")}} 
       </button>
       <button class="m-1 btn btn-danger" (click)="cancelAddIdentity()">
-        <span class="fa fa-close"></span> Cancel
+        <span class="fa fa-close"></span> {{getMessage("Cancel")}} 
       </button>
     </div>
   </div>
diff --git a/src/app/new-identity/new-identity.component.ts 
b/src/app/new-identity/new-identity.component.ts
index bf1a87e..833bdae 100644
--- a/src/app/new-identity/new-identity.component.ts
+++ b/src/app/new-identity/new-identity.component.ts
@@ -80,4 +80,9 @@ export class NewIdentityComponent implements OnInit {
     });
   }
 
+  //Internationalization
+  getMessage(key, sub?){
+    return browser.i18n.getMessage(key, sub);
+  }
+
 }

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.