use ory elements l10n strings

josxha · Oct 20, 2023 · 4ccefb5 · 4ccefb5
1 parent e80afba
commit 4ccefb5
Show file tree

Hide file tree

Showing 19 changed files with 102 additions and 59 deletions.
diff --git a/KratosSelfService/CustomTranslator.cs b/KratosSelfService/CustomTranslator.cs
@@ -2,17 +2,17 @@
 
 namespace KratosSelfService;
 
-public class CustomTranslator(IStringLocalizer<CustomTranslator> localizer) : ICustomTranslator
+public class CustomTranslator(IStringLocalizer<OryElementsTranslator> localizer) : ICustomTranslator
 {
-    public string GetTranslation(string text)
+    private IStringLocalizer<OryElementsTranslator> Localizer { get; } = localizer;
+
+    public string Get(string text)
     {
         return Localizer[text];
     }
-
-    private IStringLocalizer<CustomTranslator> Localizer { get;  } = localizer;
 }
 
 public interface ICustomTranslator
 {
-    string GetTranslation(string text);
+    string Get(string text);
 }
diff --git a/KratosSelfService/Extensions/GroupEnumExt.cs b/KratosSelfService/Extensions/GroupEnumExt.cs
@@ -4,15 +4,16 @@ namespace KratosSelfService.Extensions;
 
 public static class GroupEnumExt
 {
-    public static string ToLocalString(this KratosUiNode.GroupEnum instance, ICustomTranslator translator)
+    public static string ToLocalString(this KratosUiNode.GroupEnum instance, IOryElementsTranslator oryTranslator)
     {
         return instance switch
         {
-            KratosUiNode.GroupEnum.Password => translator.GetTranslation("Change Password"),
-            KratosUiNode.GroupEnum.Profile => translator.GetTranslation("Profile Settings"),
-            KratosUiNode.GroupEnum.Totp => translator.GetTranslation("Manage 2FA TOTP Authenticator App"),
-            KratosUiNode.GroupEnum.LookupSecret => translator.GetTranslation("Manage 2FA Backup Recovery Codes"),
-            KratosUiNode.GroupEnum.Webauthn => translator.GetTranslation("WebAuthn Login"),
+            KratosUiNode.GroupEnum.Password => oryTranslator.Get("settings.title-password"),
+            KratosUiNode.GroupEnum.Profile => oryTranslator.Get("settings.title-profile"),
+            KratosUiNode.GroupEnum.Totp => oryTranslator.Get("settings.title-totp"),
+            KratosUiNode.GroupEnum.LookupSecret => oryTranslator.Get("settings.title-lookup-secret"),
+            KratosUiNode.GroupEnum.Webauthn => oryTranslator.Get("settings.title-webauthn"),
+            KratosUiNode.GroupEnum.Oidc => oryTranslator.Get("settings.title-oidc"),
             _ => instance.ToString()
         };
     }

diff --git a/KratosSelfService/OryElementsTranslator.cs b/KratosSelfService/OryElementsTranslator.cs
@@ -0,0 +1,18 @@
+using Microsoft.Extensions.Localization;
+
+namespace KratosSelfService;
+
+public class OryElementsTranslator(IStringLocalizer<OryElementsTranslator> localizer) : IOryElementsTranslator
+{
+    private IStringLocalizer<OryElementsTranslator> Localizer { get; } = localizer;
+
+    public string Get(string text)
+    {
+        return Localizer[text];
+    }
+}
+
+public interface IOryElementsTranslator
+{
+    string Get(string text);
+}
diff --git a/...SelfService/Resources/OryElements.de.resx → ...e/Resources/OryElementsTranslator.de.resx b/...SelfService/Resources/OryElements.de.resx → ...e/Resources/OryElementsTranslator.de.resx
diff --git a/...SelfService/Resources/OryElements.en.resx → ...e/Resources/OryElementsTranslator.en.resx b/...SelfService/Resources/OryElements.en.resx → ...e/Resources/OryElementsTranslator.en.resx
diff --git a/...SelfService/Resources/OryElements.es.resx → ...e/Resources/OryElementsTranslator.es.resx b/...SelfService/Resources/OryElements.es.resx → ...e/Resources/OryElementsTranslator.es.resx
diff --git a/...SelfService/Resources/OryElements.fr.resx → ...e/Resources/OryElementsTranslator.fr.resx b/...SelfService/Resources/OryElements.fr.resx → ...e/Resources/OryElementsTranslator.fr.resx
diff --git a/...SelfService/Resources/OryElements.nl.resx → ...e/Resources/OryElementsTranslator.nl.resx b/...SelfService/Resources/OryElements.nl.resx → ...e/Resources/OryElementsTranslator.nl.resx
diff --git a/...SelfService/Resources/OryElements.pt.resx → ...e/Resources/OryElementsTranslator.pt.resx b/...SelfService/Resources/OryElements.pt.resx → ...e/Resources/OryElementsTranslator.pt.resx
diff --git a/...SelfService/Resources/OryElements.se.resx → ...e/Resources/OryElementsTranslator.se.resx b/...SelfService/Resources/OryElements.se.resx → ...e/Resources/OryElementsTranslator.se.resx
diff --git a/KratosSelfService/Startup.cs b/KratosSelfService/Startup.cs
@@ -14,6 +14,7 @@ public void ConfigureServices(IServiceCollection services)
         // localisation
         services.AddLocalization(options => options.ResourcesPath = "Resources");
         services.AddSingleton<ICustomTranslator, CustomTranslator>();
+        services.AddSingleton<IOryElementsTranslator, OryElementsTranslator>();
 
         // own services
         services.AddSingleton<EnvService>();

diff --git a/KratosSelfService/Views/Entrance/Login.cshtml b/KratosSelfService/Views/Entrance/Login.cshtml
@@ -1,30 +1,32 @@
 @model KratosLoginFlow
 @{
-    ViewData["Title"] = Translator.GetTranslation("Sign In");
+    ViewData["Title"] = OryTranslator.Get("login.title");
     Layout = "_CardLayout";
 }
 
-<h1 class="title has-text-centered">@Translator.GetTranslation("Sign In")</h1>
+<h1 class="title has-text-centered">@OryTranslator.Get("login.title")</h1>
 <p class="has-text-centered">
-    @Translator.GetTranslation("No account yet?")
+    @OryTranslator.Get("login.registration-label")
     <a href="registration">
-        @Translator.GetTranslation("Sign Up")
+        @OryTranslator.Get("login.registration-button")
     </a>
 </p>
 <hr/>
 <form method="@Model.Ui.Method.ToLower()" action="@Model.Ui.Action">
-    @if (Model.Ui.Messages != null)
-    {
-        foreach (var message in Model.Ui.Messages)
-        {
-            @await Component.InvokeAsync("KratosUiTextMessage", message)
-        }
-    }
-    @foreach (var node in Model.Ui.Nodes)
-    {
-        @await Component.InvokeAsync("KratosUiNodeInput", node)
-    }
-    <div class="field separator mt-5">@Translator.GetTranslation("Or sign in with")</div>
+    <div class="mb-5">
+        @if (Model.Ui.Messages != null)
+            {
+                foreach (var message in Model.Ui.Messages)
+                {
+                    @await Component.InvokeAsync("KratosUiTextMessage", message)
+                }
+            }
+            @foreach (var node in Model.Ui.Nodes)
+            {
+                @await Component.InvokeAsync("KratosUiNodeInput", node)
+            }
+    </div>
+    <!--<div class="field separator">Or sign in with</div>
     <div class="field">
         <div class="columns is-mobile is-multiline">
             @for (var i = 0; i < 1; i++)
@@ -39,5 +41,5 @@
                 </div>
             }
         </div>
-    </div>
+    </div>-->
 </form>
diff --git a/KratosSelfService/Views/Entrance/Recovery.cshtml b/KratosSelfService/Views/Entrance/Recovery.cshtml
@@ -1,14 +1,14 @@
 @model KratosRecoveryFlow
 @{
-    ViewData["Title"] = Translator.GetTranslation("Reset Password");
+    ViewData["Title"] = OryTranslator.Get("recovery.title");
     Layout = "_CardLayout";
 }
 
-<h1 class="title has-text-centered">@Translator.GetTranslation("Reset Password")</h1>
+<h1 class="title has-text-centered">@OryTranslator.Get("recovery.title")</h1>
 <p class="has-text-centered">
-    @Translator.GetTranslation("Remember your password?")
+    @OryTranslator.Get("recovery.login-label")
     <a href="login">
-        @Translator.GetTranslation("Sign In")
+        @OryTranslator.Get("recovery.login-button")
     </a>
 </p>
 <hr/>

diff --git a/KratosSelfService/Views/Entrance/Registration.cshtml b/KratosSelfService/Views/Entrance/Registration.cshtml
@@ -1,30 +1,32 @@
 @model KratosRegistrationFlow
 @{
-    ViewData["Title"] = Translator.GetTranslation("Sign Up");
+    ViewData["Title"] = OryTranslator.Get("registration.title");
     Layout = "_CardLayout";
 }
 
-<h1 class="title has-text-centered">@Translator.GetTranslation("Sign Up")</h1>
+<h1 class="title has-text-centered">@OryTranslator.Get("registration.title")</h1>
 <p class="has-text-centered">
-    @Translator.GetTranslation("Already have an account?")
+    @OryTranslator.Get("registration.login-label")
     <a href="login">
-        @Translator.GetTranslation("Sign In")
+        @OryTranslator.Get("registration.login-button")
     </a>
 </p>
 <hr/>
 <form method="@Model.Ui.Method.ToLower()" action="@Model.Ui.Action">
-    @if (Model.Ui.Messages != null)
-    {
-        foreach (var message in Model.Ui.Messages)
-        {
-            @await Component.InvokeAsync("KratosUiTextMessage", message)
-        }
-    }
-    @foreach (var node in Model.Ui.Nodes)
-    {
-        @await Component.InvokeAsync("KratosUiNodeInput", node)
-    }
-    <div class="field separator mt-5">@Translator.GetTranslation("Or sign in with")</div>
+    <div class="mb-5">
+        @if (Model.Ui.Messages != null)
+            {
+                foreach (var message in Model.Ui.Messages)
+                {
+                    @await Component.InvokeAsync("KratosUiTextMessage", message)
+                }
+            }
+            @foreach (var node in Model.Ui.Nodes)
+            {
+                @await Component.InvokeAsync("KratosUiNodeInput", node)
+            }
+    </div>
+    <!--<div class="field separator">Or sign up with</div>
     <div class="field">
         <div class="columns is-mobile is-multiline">
             @for (var i = 0; i < 1; i++)
@@ -39,5 +41,5 @@
                 </div>
             }
         </div>
-    </div>
+    </div>-->
 </form>
diff --git a/KratosSelfService/Views/Entrance/Verification.cshtml b/KratosSelfService/Views/Entrance/Verification.cshtml
@@ -1,10 +1,10 @@
 @model KratosVerificationFlow
 @{
-    ViewData["Title"] = Translator.GetTranslation("Verify your account");
+    ViewData["Title"] = OryTranslator.Get("verification.title");
     Layout = "_CardLayout";
 }
 
-<h1 class="title has-text-centered">@Translator.GetTranslation("Verify your account")</h1>
+<h1 class="title has-text-centered">@OryTranslator.Get("verification.title")</h1>
 <hr/>
 <form method="@Model.Ui.Method.ToLower()" action="@Model.Ui.Action">
     @if (Model.Ui.Messages != null)

diff --git a/KratosSelfService/Views/Settings/Settings.cshtml b/KratosSelfService/Views/Settings/Settings.cshtml
@@ -1,9 +1,7 @@
-@inject ICustomTranslator Translator
-@using KratosSelfService.Extensions
-@using KratosSelfService.Services
+@using KratosSelfService.Extensions
 @model SettingsModel
 @{
-    ViewData["Title"] = Translator.GetTranslation("Account Settings");
+    ViewData["Title"] = CustomTranslator.Get("settings.title");
     Layout = "_CardLayout";
     var allGroups = Model.flow.Ui.Nodes
         .GroupBy(node => node.Group).ToList();
@@ -15,7 +13,7 @@
 }
 
 <section class="section">
-    <h1 class="title">@Translator.GetTranslation("Account Settings")</h1>
+    <h1 class="title">@CustomTranslator.Get("settings.title")</h1>
     @if (Model.flow.Ui.Messages != null)
     {
         foreach (var message in Model.flow.Ui.Messages)
@@ -26,7 +24,7 @@
     @foreach (var group in groups)
     {
         <hr/>
-        <h3 class="subtitle mt-3">@group.Key.ToLocalString(Translator)</h3>
+        <h3 class="subtitle mt-3">@group.Key.ToLocalString(OryTranslator)</h3>
         <form class="mb-3" action="@Model.postUri" method="post">
             @foreach (var node in defaultNodes)
             {

diff --git a/KratosSelfService/Views/Shared/Components/KratosUiNodeInput/Default.cshtml b/KratosSelfService/Views/Shared/Components/KratosUiNodeInput/Default.cshtml
@@ -31,6 +31,26 @@
                                    onclick="@inputAttr.Onclick" pattern="@inputAttr.Pattern"/>
                         </div>
                     </label>
+                    if (inputAttr.Type == KratosUiNodeInputAttributes.TypeEnum.Password && Model.Group == KratosUiNode.GroupEnum.Password)
+                    {
+                        <!--<div class="field">
+                            <div class="control">
+                                <div class="is-flex is-justify-content-space-between is-mobile">
+                                    <div>
+                                        -<label for="rememberMeCheck" class="checkbox">
+                                            <input type="checkbox" id="rememberMeCheck">
+                                            Remember me
+                                        </label>
+                                    </div>
+                                    <p>
+                                        <a href="recovery">
+                                            @OryTranslator.Get("login.forgot-password")
+                                        </a>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>-->
+                    }
                     break;
                 case KratosUiNodeInputAttributes.TypeEnum.Checkbox:
                     break;

diff --git a/KratosSelfService/Views/Shared/_Layout.cshtml b/KratosSelfService/Views/Shared/_Layout.cshtml
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="@Translator.GetTranslation("en")">
+<html lang="@CustomTranslator.Get("en")">
 <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

diff --git a/KratosSelfService/Views/_ViewImports.cshtml b/KratosSelfService/Views/_ViewImports.cshtml
@@ -1,5 +1,6 @@
 @using KratosSelfService
 @using KratosSelfService.Models
 @using Ory.Kratos.Client.Model
-@inject ICustomTranslator Translator
+@inject IOryElementsTranslator OryTranslator
+@inject ICustomTranslator CustomTranslator
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers