diff --git a/src/components/account-info.css b/src/components/account-info.css
index a0ef6ce2..6399e582 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -801,6 +801,26 @@
}
}
+ table {
+ width: 100%;
+
+ th {
+ text-align: left;
+ color: var(--text-insignificant-color);
+ font-weight: normal;
+ font-size: 0.8em;
+ text-transform: uppercase;
+ }
+
+ tbody tr td:first-child {
+ width: 40%;
+ }
+
+ input {
+ width: 100%;
+ }
+ }
+
footer {
display: flex;
justify-content: space-between;
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index 4fd29301..6ad26e91 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -1834,7 +1834,8 @@ function EditProfileSheet({ onClose = () => {} }) {
console.log('EditProfileSheet', account);
const { displayName, source } = account || {};
- const { note } = source || {};
+ const { note, fields } = source || {};
+ const fieldsAttributesRef = useRef(null);
return (
@@ -1858,11 +1859,34 @@ function EditProfileSheet({ onClose = () => {} }) {
const formData = new FormData(e.target);
const displayName = formData.get('display_name');
const note = formData.get('note');
+ const fieldsAttributesFields =
+ fieldsAttributesRef.current.querySelectorAll(
+ 'input[name^="fields_attributes"]',
+ );
+ const fieldsAttributes = [];
+ fieldsAttributesFields.forEach((field) => {
+ const name = field.name;
+ const [_, index, key] =
+ name.match(/fields_attributes\[(\d+)\]\[(.+)\]/) || [];
+ const value = field.value ? field.value.trim() : '';
+ if (index && key && value) {
+ if (!fieldsAttributes[index]) fieldsAttributes[index] = {};
+ fieldsAttributes[index][key] = value;
+ }
+ });
+ // Fill in the blanks
+ fieldsAttributes.forEach((field) => {
+ if (field.name && !field.value) {
+ field.value = '';
+ }
+ });
+
(async () => {
try {
const newAccount = await masto.v1.accounts.updateCredentials({
displayName,
note,
+ fieldsAttributes,
});
console.log('updated account', newAccount);
onClose?.({
@@ -1900,6 +1924,32 @@ function EditProfileSheet({ onClose = () => {} }) {
/>
+ {/* Table for fields; name and values are in fields, min 4 rows */}
+
Extra fields
+
+
+
+ Label |
+ Content |
+
+
+
+ {Array.from({ length: Math.max(4, fields.length) }).map(
+ (_, i) => {
+ const { name = '', value = '' } = fields[i] || {};
+ return (
+
+ );
+ },
+ )}
+
+