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

+ + + + + + + + + {Array.from({ length: Math.max(4, fields.length) }).map( + (_, i) => { + const { name = '', value = '' } = fields[i] || {}; + return ( + + ); + }, + )} + +
LabelContent