From ff6c71e587d113a68a5541bdfe798f78a4e794bc Mon Sep 17 00:00:00 2001
From: sbwalker <shaun.walker@siliqon.com>
Date: Mon, 20 Oct 2025 16:23:00 -0400
Subject: [PATCH] reorganize user profile to prepare for pass keys

---
 .../Modules/Admin/UserProfile/Index.razor     | 83 ++++++++++++-------
 1 file changed, 51 insertions(+), 32 deletions(-)

diff --git a/Oqtane.Client/Modules/Admin/UserProfile/Index.razor b/Oqtane.Client/Modules/Admin/UserProfile/Index.razor
index 2b5d01ee..aae03fc0 100644
--- a/Oqtane.Client/Modules/Admin/UserProfile/Index.razor
+++ b/Oqtane.Client/Modules/Admin/UserProfile/Index.razor
@@ -27,7 +27,6 @@
     }
     <TabStrip>
         <TabPanel Name="Identity" ResourceKey="Identity">
-            <ModuleMessage Message="@_passwordrequirements" Type="MessageType.Info" />
             <div class="container">
                 <div class="row mb-1 align-items-center">
                     <Label Class="col-sm-3" For="username" HelpText="Your username. Note that this field can not be modified." ResourceKey="Username"></Label>
@@ -35,36 +34,6 @@
                         <input id="username" class="form-control" @bind="@_username" readonly />
                     </div>
                 </div>
-                <div class="row mb-1 align-items-center">
-                    <Label Class="col-sm-3" For="password" HelpText="If you wish to change your password you can enter it here. Please choose a sufficiently secure password." ResourceKey="Password"></Label>
-                    <div class="col-sm-9">
-                        <div class="input-group">
-                            <input id="password" type="@_passwordtype" class="form-control" @bind="@_password" autocomplete="new-password" />
-                            <button type="button" class="btn btn-secondary" @onclick="@TogglePassword" tabindex="-1">@_togglepassword</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="row mb-1 align-items-center">
-                    <Label Class="col-sm-3" For="confirm" HelpText="If you are changing your password you must enter it again to confirm it matches" ResourceKey="Confirm"></Label>
-                    <div class="col-sm-9">
-                        <div class="input-group">
-                            <input id="confirm" type="@_passwordtype" class="form-control" @bind="@_confirm" autocomplete="new-password" />
-                            <button type="button" class="btn btn-secondary" @onclick="@TogglePassword" tabindex="-1">@_togglepassword</button>
-                        </div>
-                    </div>
-                </div>
-                @if (_allowtwofactor)
-                {
-                    <div class="row mb-1 align-items-center">
-                        <Label Class="col-sm-3" For="twofactor" HelpText="Indicates if you are using two factor authentication. Two factor authentication requires you to enter a verification code sent via email after you sign in." ResourceKey="TwoFactor"></Label>
-                        <div class="col-sm-9">
-                            <select id="twofactor" class="form-select" @bind="@_twofactor" required>
-                                <option value="True">@SharedLocalizer["Yes"]</option>
-                                <option value="False">@SharedLocalizer["No"]</option>
-                            </select>
-                        </div>
-                    </div>
-                }
                 <div class="row mb-1 align-items-center">
                     <Label Class="col-sm-3" For="email" HelpText="Your email address where you wish to receive notifications" ResourceKey="Email"></Label>
                     <div class="col-sm-9">
@@ -99,7 +68,57 @@
             <br />
             <button type="button" class="btn btn-success" @onclick="Save">@SharedLocalizer["Save"]</button>
             <button type="button" class="btn btn-secondary" @onclick="Cancel">@SharedLocalizer["Cancel"]</button>
-            <button type="button" class="btn btn-danger" @onclick="Logout">@Localizer["Logout Everywhere"]</button>
+        </TabPanel>
+        <TabPanel Name="Security" ResourceKey="Security">
+            <ModuleMessage Message="@_passwordrequirements" Type="MessageType.Info" />
+            <div class="container">
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="password" HelpText="If you wish to change your password you can enter it here. Please choose a sufficiently secure password." ResourceKey="Password"></Label>
+                    <div class="col-sm-9">
+                        <div class="input-group">
+                            <input id="password" type="@_passwordtype" class="form-control" @bind="@_password" autocomplete="new-password" />
+                            <button type="button" class="btn btn-secondary" @onclick="@TogglePassword" tabindex="-1">@_togglepassword</button>
+                        </div>
+                    </div>
+                </div>
+                <div class="row mb-1 align-items-center">
+                    <Label Class="col-sm-3" For="confirm" HelpText="If you are changing your password you must enter it again to confirm it matches" ResourceKey="Confirm"></Label>
+                    <div class="col-sm-9">
+                        <div class="input-group">
+                            <input id="confirm" type="@_passwordtype" class="form-control" @bind="@_confirm" autocomplete="new-password" />
+                            <button type="button" class="btn btn-secondary" @onclick="@TogglePassword" tabindex="-1">@_togglepassword</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <br />
+            <button type="button" class="btn btn-success" @onclick="Save">@SharedLocalizer["Save"]</button>
+            <button type="button" class="btn btn-secondary" @onclick="Cancel">@SharedLocalizer["Cancel"]</button>
+            <br /><br />
+            @if (_allowtwofactor)
+            {
+                <Section Name="MFA" Heading="Multi-Factor Authentication" ResourceKey="MFA" Expanded="true">
+                    <div class="container">
+                        <div class="row mb-1 align-items-center">
+                            <Label Class="col-sm-3" For="twofactor" HelpText="Indicates if you are using two factor authentication. Two factor authentication requires you to enter a verification code sent via email after you sign in." ResourceKey="TwoFactor"></Label>
+                            <div class="col-sm-9">
+                                <select id="twofactor" class="form-select" @bind="@_twofactor" required>
+                                    <option value="True">@SharedLocalizer["Yes"]</option>
+                                    <option value="False">@SharedLocalizer["No"]</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </Section>
+            }
+            <Section Name="External" Heading="External Login" ResourceKey="External" Expanded="true">
+            </Section>
+            <Section Name="Passkeys" Heading="Passkeys" ResourceKey="Passkeys" Expanded="true">
+            </Section>
+            <Section Name="Logout" Heading="Logout" ResourceKey="Logout" Expanded="true">
+                <button type="button" class="btn btn-danger" @onclick="Logout">@Localizer["Logout Everywhere"]</button>
+            </Section>
+            <br />
         </TabPanel>
         <TabPanel Name="Profile" ResourceKey="Profile">
             <div class="container">