Show readonly fields in settings v2 profile name settings

authgear · Oct 7, 2024 · fa660a7 · fa660a7
1 parent 71f1f62
commit fa660a7
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 17 deletions.
diff --git a/authui/src/authflowv2/components/settings-item.css b/authui/src/authflowv2/components/settings-item.css
@@ -99,7 +99,7 @@
       grid-template-columns: var(--settings-item__grid-col-icon-width) auto 1.125rem;
     }
 
-    &:hover {
+    &[href]:hover {
       background-color: var(--settings-item__bg-color--hover);
       color: var(--settings-item__text-color--hover);
       @apply ring-inset

diff --git a/resources/authgear/templates/en/web/authflowv2/__settings_item.html b/resources/authgear/templates/en/web/authflowv2/__settings_item.html
@@ -65,6 +65,8 @@
     </ul>
   {{ end }}
 
-  <div class="settings-item__forward_arrow"></div>
+  {{ if $.Href }}
+    <div class="settings-item__forward_arrow"></div>
+  {{ end }}
 </a>
 {{ end}}
diff --git a/resources/authgear/templates/en/web/authflowv2/__settings_text_input.html b/resources/authgear/templates/en/web/authflowv2/__settings_text_input.html
@@ -1,3 +1,14 @@
+{{/* Example usage
+  {{ template "authflowv2/__settings_text_input.html"
+      (dict
+        "Label" "Full Name"
+        "Name" "/given_name"
+        "Value" "John"
+        "Disabled" "false"
+      )
+  }}
+*/}}
+
 {{ define "authflowv2/__settings_text_input.html" }}
 
 <label class="settings-text-input__label">
@@ -10,6 +21,7 @@
     {{ if $.InputAttrs }}{{htmlattr $.InputAttrs }}{{end}}
     name="{{ $.Name }}"
     value="{{ $.Value }}"
+    {{ if $.Disabled }}disabled{{end}}
   />
 </label>
 {{ end }}
diff --git a/resources/authgear/templates/en/web/authflowv2/settings_profile_edit_name.html b/resources/authgear/templates/en/web/authflowv2/settings_profile_edit_name.html
@@ -21,66 +21,72 @@
   {{ $.CSRFField }}
 
   <div class="flex flex-col gap-y-4">
-    {{ if (call $.IsEditable "/name") }}
+    {{ if (call $.IsReadable "/name") }}
       {{ template "authflowv2/__settings_text_input.html"
           (dict
             "Label" (translate "v2.page.settings-profile-edit-name.default.fullname-input-label" nil)
             "Name" "/name"
             "Value" $.Name
+            "Disabled" (not (call $.IsEditable "/name"))
           )
       }}
     {{ end }}
 
-    {{ if (call $.IsEditable "/given_name") }}
+    {{ if (call $.IsReadable "/given_name") }}
       {{ template "authflowv2/__settings_text_input.html"
           (dict
             "Label" (translate "v2.page.settings-profile-edit-name.default.given-name-input-label" nil)
             "Name" "/given_name"
             "Value" $.GivenName
+            "Disabled" (not (call $.IsEditable "/given_name"))
           )
       }}
     {{ end }}
 
-    {{ if (call $.IsEditable "/middle_name") }}
+    {{ if (call $.IsReadable "/middle_name") }}
       {{ template "authflowv2/__settings_text_input.html"
           (dict
             "Label" (translate "v2.page.settings-profile-edit-name.default.middle-name-input-label" nil)
             "Name" "/middle_name"
             "Value" $.MiddleName
+            "Disabled" (not (call $.IsEditable "/middle_name"))
           )
       }}
     {{ end }}
 
-    {{ if (call $.IsEditable "/family_name") }}
+    {{ if (call $.IsReadable "/family_name") }}
       {{ template "authflowv2/__settings_text_input.html"
           (dict
             "Label" (translate "v2.page.settings-profile-edit-name.default.family-name-input-label" nil)
             "Name" "/family_name"
             "Value" $.FamilyName
+            "Disabled" (not (call $.IsEditable "/family_name"))
           )
       }}
     {{ end }}
 
-    {{ if (call $.IsEditable "/nickname") }}
+    {{ if (call $.IsReadable "/nickname") }}
       {{ template "authflowv2/__settings_text_input.html"
           (dict
             "Label" (translate "v2.page.settings-profile-edit-name.default.nickname-input-label" nil)
             "Name" "/nickname"
             "Value" $.Nickname
+            "Disabled" (not (call $.IsEditable "/nickname"))
           )
       }}
     {{ end }}
-  </div>
 
-  <button
-    class="primary-btn"
-    type="submit"
-    name="x_action"
-    value="save"
-    data-authgear-event="authgear.button.update_profile"
-  >
-    {{ translate "v2.component.button.default.label-save" . }}
-  </button>
+  {{ if or (call $.IsEditable "/name") (call $.IsEditable "/given_name") (call $.IsEditable "/family_name") (call $.IsEditable "/middle_name") (call $.IsEditable "/nickname") }}
+    <button
+      class="primary-btn"
+      type="submit"
+      name="x_action"
+      value="save"
+      data-authgear-event="authgear.button.update_profile"
+    >
+      {{ translate "v2.component.button.default.label-save" . }}
+    </button>
+  {{ end }}
 </form>
 
 {{ end }}