diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js
index 4d47de189..43a12f500 100644
--- a/app/soapbox/features/edit_profile/index.js
+++ b/app/soapbox/features/edit_profile/index.js
@@ -21,6 +21,7 @@ import {
} from 'immutable';
import { patchMe } from 'soapbox/actions/me';
import { updateNotificationSettings } from 'soapbox/actions/accounts';
+import Icon from 'soapbox/components/icon';
import { unescape } from 'lodash';
import { isVerified } from 'soapbox/utils/accounts';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
@@ -56,7 +57,7 @@ const mapStateToProps = state => {
// Forces fields to be maxFields size, filling empty values
const normalizeFields = (fields, maxFields) => (
- ImmutableList(fields).setSize(maxFields).map(field =>
+ ImmutableList(fields).setSize(Math.max(fields.size, maxFields)).map(field =>
field ? field : ImmutableMap({ name: '', value: '' }),
)
);
@@ -92,7 +93,7 @@ class EditProfile extends ImmutablePureComponent {
const initialState = account.withMutations(map => {
map.merge(map.get('source'));
map.delete('source');
- map.set('fields', normalizeFields(map.get('fields'), props.maxFields));
+ map.set('fields', normalizeFields(map.get('fields'), Math.min(props.maxFields, 4)));
map.set('stranger_notifications', strangerNotifications);
map.set('accepts_email_list', acceptsEmailList);
map.set('hide_network', hidesNetwork(account));
@@ -196,6 +197,20 @@ class EditProfile extends ImmutablePureComponent {
});
}
+ handleAddField = () => {
+ this.setState({
+ fields: this.state.fields.push(ImmutableMap({ name: '', value: '' })),
+ });
+ }
+
+ handleDeleteField = i => {
+ return () => {
+ this.setState({
+ fields: normalizeFields(this.state.fields.delete(i), Math.min(this.props.maxFields, 4)),
+ });
+ };
+ }
+
render() {
const { intl, maxFields, account, verifiedCanEditName, supportsEmailList } = this.props;
const verified = isVerified(account);
@@ -299,9 +314,22 @@ class EditProfile extends ImmutablePureComponent {
value={field.get('value')}
onChange={this.handleFieldChange(i, 'value')}
/>
+ {
+ this.state.fields.size > 4 &&