fix 2fa login, add ViewComponents

josxha · Nov 3, 2023 · 26b0fa5 · 26b0fa5
1 parent d0a63f6
commit 26b0fa5
Show file tree

Hide file tree

Showing 11 changed files with 125 additions and 95 deletions.
diff --git a/KratosSelfService/KratosSelfService.csproj b/KratosSelfService/KratosSelfService.csproj
@@ -75,6 +75,7 @@
         <AdditionalFiles Include="Views\Logout\Logout.cshtml" />
         <AdditionalFiles Include="Views\Recovery\Recovery.cshtml" />
         <AdditionalFiles Include="Views\Registration\Registration.cshtml" />
+        <AdditionalFiles Include="Views\Shared\Components\KratosUiTextMessages\Default.cshtml" />
         <AdditionalFiles Include="Views\Verification\Verification.cshtml" />
         <AdditionalFiles Include="Views\Settings\Settings.cshtml"/>
     </ItemGroup>

diff --git a/KratosSelfService/Models/models.cs b/KratosSelfService/Models/models.cs
@@ -33,8 +33,7 @@ List<KratosSession> OtherSessions
 );
 
 public record SettingsModel(
-    KratosSettingsFlow flow,
-    string postUri
+    KratosSettingsFlow flow
 );
 
 public record VerificationModel(
@@ -63,3 +62,8 @@ public record KratosUiNodeModel(
     string? forgotPasswordUrl = null
 );
 
+public record KratosUiModel(
+    KratosUiContainer ui,
+    FlowType flowType,
+    string? forgotPasswordUrl = null
+);
diff --git a/KratosSelfService/ViewComponents/KratosUi.cs b/KratosSelfService/ViewComponents/KratosUi.cs
@@ -0,0 +1,13 @@
+using KratosSelfService.Models;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.ViewComponents;
+
+namespace KratosSelfService.ViewComponents;
+
+public class KratosUi : ViewComponent
+{
+    public async Task<ViewViewComponentResult> InvokeAsync(KratosUiModel model)
+    {
+        return View("Default", model);
+    }
+}
diff --git a/KratosSelfService/ViewComponents/KratosUiTextMessages.cs b/KratosSelfService/ViewComponents/KratosUiTextMessages.cs
@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.ViewComponents;
+using Ory.Kratos.Client.Model;
+
+namespace KratosSelfService.ViewComponents;
+
+public class KratosUiTextMessages : ViewComponent
+{
+    public async Task<ViewViewComponentResult> InvokeAsync(List<KratosUiText>? model)
+    {
+        return View("Default", model);
+    }
+}
diff --git a/KratosSelfService/Views/Login/Login.cshtml b/KratosSelfService/Views/Login/Login.cshtml
@@ -12,35 +12,28 @@
     </a>
 </p>
 <hr/>
-<form method="@Model.flow.Ui.Method.ToLower()" action="@Model.flow.Ui.Action">
-    <div class="mb-5">
-        @if (Model.flow.Ui.Messages != null)
-        {
-            foreach (var message in Model.flow.Ui.Messages)
-            {
-                @await Component.InvokeAsync("KratosUiTextMessage", message)
-            }
-        }
-        @foreach (var node in Model.flow.Ui.Nodes)
+<div class="mb-5">
+    @await Component.InvokeAsync("KratosUiTextMessages", Model.flow.Ui.Messages)
+
+    @await Component.InvokeAsync("KratosUi", new KratosUiModel(
+               Model.flow.Ui,
+               FlowType.Login,
+               Model.forgotPasswordUrl))
+</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++)
         {
-            var model = new KratosUiNodeModel(node, FlowType.Login, Model.forgotPasswordUrl);
-            @await Component.InvokeAsync("KratosUiNodeInput", model)
+            <div class="column is-one-third">
+                <a class="button is-fullwidth">
+                    <span class="icon">
+                        <i class="fab fa-google"></i>
+                    </span>
+                    <span>Google</span>
+                </a>
+            </div>
         }
     </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++)
-            {
-                <div class="column is-one-third">
-                    <a class="button is-fullwidth">
-                        <span class="icon">
-                            <i class="fab fa-google"></i>
-                        </span>
-                        <span>Google</span>
-                    </a>
-                </div>
-            }
-        </div>
-    </div>-->
-</form>
+</div>-->
diff --git a/KratosSelfService/Views/Recovery/Recovery.cshtml b/KratosSelfService/Views/Recovery/Recovery.cshtml
@@ -12,17 +12,8 @@
     </a>
 </p>
 <hr/>
-<form method="@Model.flow.Ui.Method.ToLower()" action="@Model.flow.Ui.Action">
-    @if (Model.flow.Ui.Messages != null)
-    {
-        foreach (var message in Model.flow.Ui.Messages)
-        {
-            @await Component.InvokeAsync("KratosUiTextMessage", message)
-        }
-    }
-    @foreach (var node in Model.flow.Ui.Nodes)
-    {
-        var model = new KratosUiNodeModel(node, FlowType.Recovery);
-        @await Component.InvokeAsync("KratosUiNodeInput", model)
-    }
-</form>
+@await Component.InvokeAsync("KratosUiTextMessages", Model.flow.Ui.Messages)
+
+@await Component.InvokeAsync("KratosUi", new KratosUiModel(
+           Model.flow.Ui,
+           FlowType.Recovery))
diff --git a/KratosSelfService/Views/Registration/Registration.cshtml b/KratosSelfService/Views/Registration/Registration.cshtml
@@ -12,35 +12,26 @@
     </a>
 </p>
 <hr/>
-<form method="@Model.flow.Ui.Method.ToLower()" action="@Model.flow.Ui.Action">
-    <div class="mb-5">
-        @if (Model.flow.Ui.Messages != null)
+<div class="mb-2">
+    @await Component.InvokeAsync("KratosUiTextMessages", Model.flow.Ui.Messages)
+
+    @await Component.InvokeAsync("KratosUi", new KratosUiModel(
+               Model.flow.Ui,
+               FlowType.Registration))
+</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++)
         {
-            foreach (var message in Model.flow.Ui.Messages)
-            {
-                @await Component.InvokeAsync("KratosUiTextMessage", message)
-            }
-        }
-        @foreach (var node in Model.flow.Ui.Nodes)
-        {
-            var model = new KratosUiNodeModel(node, FlowType.Registration);
-            @await Component.InvokeAsync("KratosUiNodeInput", model)
+            <div class="column is-one-third">
+                <a class="button is-fullwidth">
+                    <span class="icon">
+                        <i class="fab fa-google"></i>
+                    </span>
+                    <span>Google</span>
+                </a>
+            </div>
         }
     </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++)
-            {
-                <div class="column is-one-third">
-                    <a class="button is-fullwidth">
-                        <span class="icon">
-                            <i class="fab fa-google"></i>
-                        </span>
-                        <span>Google</span>
-                    </a>
-                </div>
-            }
-        </div>
-    </div>-->
-</form>
+</div>-->
diff --git a/KratosSelfService/Views/Settings/Settings.cshtml b/KratosSelfService/Views/Settings/Settings.cshtml
@@ -63,13 +63,7 @@
                         @OryTranslator.Get("settings.subtitle-instructions")
                     </div>
                 }
-                @if (Model.flow.Ui.Messages != null)
-                {
-                    foreach (var message in Model.flow.Ui.Messages)
-                    {
-                        @await Component.InvokeAsync("KratosUiTextMessage", message)
-                    }
-                }
+                @await Component.InvokeAsync("KratosUiTextMessages", Model.flow.Ui.Messages)
             </div>
             @foreach (var group in groups)
             {

diff --git a/KratosSelfService/Views/Shared/Components/KratosUi/Default.cshtml b/KratosSelfService/Views/Shared/Components/KratosUi/Default.cshtml
@@ -0,0 +1,30 @@
+@model KratosUiModel
+
+@{
+    // this component is used by all flows except the settings flow
+
+    var allGroups = Model.ui.Nodes
+        .GroupBy(node => node.Group).ToList();
+    var defaultNodes = allGroups
+        .First(group => group.Key == KratosUiNode.GroupEnum.Default)
+        .ToArray();
+    var groups = allGroups
+        .Where(group => group.Key != KratosUiNode.GroupEnum.Default)
+        .ToArray();
+}
+
+@foreach (var group in groups)
+{
+    <form class="mb-3" action="@Model.ui.Action" method="@Model.ui.Method">
+        @foreach (var node in defaultNodes)
+        {
+            var model = new KratosUiNodeModel(node, Model.flowType, Model.forgotPasswordUrl);
+            @await Component.InvokeAsync("KratosUiNodeInput", model)
+        }
+        @foreach (var node in group)
+        {
+            var model = new KratosUiNodeModel(node, Model.flowType, Model.forgotPasswordUrl);
+            @await Component.InvokeAsync("KratosUiNodeInput", model)
+        }
+    </form>
+}
diff --git a/KratosSelfService/Views/Shared/Components/KratosUiTextMessages/Default.cshtml b/KratosSelfService/Views/Shared/Components/KratosUiTextMessages/Default.cshtml
@@ -0,0 +1,9 @@
+@model List<KratosUiText>?
+
+@if (Model != null)
+{
+    foreach (var message in Model)
+    {
+        @await Component.InvokeAsync("KratosUiTextMessage", message)
+    }
+}
diff --git a/KratosSelfService/Views/Verification/Verification.cshtml b/KratosSelfService/Views/Verification/Verification.cshtml
@@ -6,17 +6,8 @@
 
 <h1 class="title has-text-centered">@OryTranslator.Get("verification.title")</h1>
 <hr/>
-<form method="@Model.flow.Ui.Method.ToLower()" action="@Model.flow.Ui.Action">
-    @if (Model.flow.Ui.Messages != null)
-    {
-        foreach (var message in Model.flow.Ui.Messages)
-        {
-            @await Component.InvokeAsync("KratosUiTextMessage", message)
-        }
-    }
-    @foreach (var node in Model.flow.Ui.Nodes)
-    {
-        var model = new KratosUiNodeModel(node, FlowType.Verification);
-        @await Component.InvokeAsync("KratosUiNodeInput", model)
-    }
-</form>
+@await Component.InvokeAsync("KratosUiTextMessages", Model.flow.Ui.Messages)
+
+@await Component.InvokeAsync("KratosUi", new KratosUiModel(
+           Model.flow.Ui,
+           FlowType.Verification))