ref(totp): restart login link

- make the instruction numbered list on configure totp

Author: ronmrcdo

theme/keywind/login/components/button/icon.ftl

@@ -1,6 +1,6 @@
 <#macro kw component="span" rest...>
   <${component}
-    class="absolute left-0 ml-3 text-lg"
+    class="ml-3 text-lg text-primary-600"
     <#list rest as attrName, attrValue>
       ${attrName}="${attrValue}"
     </#list>

theme/keywind/login/components/label/totp.ftl

@@ -1,5 +1,5 @@
 <#macro kw>
   <#compress>
-    ${msg("authenticatorCode")}
+    ${msg("authenticatorCode")} *
   </#compress>
 </#macro>

theme/keywind/login/components/layout/username.ftl

@@ -4,13 +4,14 @@
 
 <#macro kw>
   <#nested "show-username">
-  <div class="mb-4">
-    <div class="font-bold mb-2 text-center">${auth.attemptedUsername}</div>
-    <@buttonPrimary.kw component="a" href="${url.loginRestartFlowUrl}">
-      <@buttonIcon.kw component="span">
-        <@iconExternalLink.kw />
-      </@buttonIcon.kw>
-      ${msg("restartLoginTooltip")}
-    </@buttonPrimary.kw>
+  <div class="mb-4 flex items-center justify-center">
+    <div class="font-bold text-center">${auth.attemptedUsername}</div>
+    <@buttonIcon.kw
+      component="a"
+      href="${url.loginRestartFlowUrl}"
+      title="${msg('restartLoginTooltip')}"
+    >
+      <@iconExternalLink.kw />
+    </@buttonIcon.kw>
   </div>
 </#macro>

theme/keywind/login/login-config-totp.ftl

@@ -15,7 +15,7 @@
   <#if section="header">
     ${msg("loginTotpTitle")}
   <#elseif section="form">
-    <ol class="list-none space-y-2">
+    <ol class="list-decimal pl-4 space-y-2">
       <li>
         <p>${msg("loginTotpStep1")}</p>
 
@@ -74,27 +74,28 @@
         <@inputPrimary.kw
           autocomplete="off"
           autofocus=true
-          invalid=["userLabel"]
-          name="userLabel"
+          invalid=["totp"]
+          name="totp"
           type="text"
           id="totp"
         >
-          <@labelUserDevice.kw />
+          <@labelTotp.kw />
         </@inputPrimary.kw>
+        <input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" />
+        <#if mode??><input type="hidden" id="mode" name="mode" value="${mode}"/></#if>
       </div>
+
       <div>
         <@inputPrimary.kw
           autocomplete="off"
           autofocus=true
-          invalid=["totp"]
-          name="totp"
+          invalid=["userLabel"]
+          name="userLabel"
           type="text"
           id="totp"
         >
-          <@labelTotp.kw />
+          <@labelUserDevice.kw />
         </@inputPrimary.kw>
-        <input type="hidden" id="totpSecret" name="totpSecret" value="${totp.totpSecret}" />
-        <#if mode??><input type="hidden" id="mode" name="mode" value="${mode}"/></#if>
       </div>
 
       <#if isAppInitiatedAction??>