moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show birth date field on registration page when required 

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-01-19 23:59:10 +01:00
parent 5e76b5afca
commit 409cb3819e
6 changed files with 127 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
app/soapbox/components/birth_date_input.js Normal file
View File

@ -0,0 +1,71 @@
import PropTypes from 'prop-types';
import React from 'react';
import DatePicker from 'react-datepicker';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import 'react-datepicker/dist/react-datepicker.css';
import { getFeatures } from 'soapbox/utils/features';
const messages = defineMessages({
birthDatePlaceholder: { id: 'edit_profile.fields.birth_date_placeholder', defaultMessage: 'Your birth date' },
});
const mapStateToProps = state => {
const features = getFeatures(state.get('instance'));
return {
supportsBirthDates: features.birthDates,
minAge: state.getIn(['instance', 'pleroma', 'metadata', 'birth_date_min_age']),
};
};
export default @connect(mapStateToProps)
@injectIntl
class EditProfile extends ImmutablePureComponent {
static propTypes = {
hint: PropTypes.node,
required: PropTypes.bool,
supportsBirthDates: PropTypes.bool,
minAge: PropTypes.number,
onChange: PropTypes.func.isRequired,
value: PropTypes.instanceOf(Date),
};
isDateValid = date => {
const { minAge } = this.props;
const allowedDate = new Date();
allowedDate.setDate(allowedDate.getDate() - minAge);
return date && allowedDate.setHours(0, 0, 0, 0) >= new Date(date).setHours(0, 0, 0, 0);
}
render() {
const { intl, value, onChange, supportsBirthDates, hint, required } = this.props;
if (!supportsBirthDates) return null;
return (
<div className='datepicker'>
{hint && (
<div className='datepicker__hint'>
{hint}
</div>
)}
<div className='datepicker__input'>
<DatePicker
selected={value}
dateFormat='d MMMM yyyy'
wrapperClassName='react-datepicker-wrapper'
onChange={onChange}
placeholderText={intl.formatMessage(messages.birthDatePlaceholder)}
filterDate={this.isDateValid}
required={required}
/>
</div>
</div>
);
}
}

24
app/soapbox/features/auth_login/components/registration_form.js
View File

@ -14,6 +14,7 @@ import { accountLookup } from 'soapbox/actions/accounts';
import { register, verifyCredentials } from 'soapbox/actions/auth';
import { openModal } from 'soapbox/actions/modal';
import { getSettings } from 'soapbox/actions/settings';
import BirthDateInput from 'soapbox/components/birth_date_input';
import ShowablePassword from 'soapbox/components/showable_password';
import CaptchaField from 'soapbox/features/auth_login/components/captcha';
import {
@ -46,6 +47,7 @@ const mapStateToProps = (state, props) => ({
needsApproval: state.getIn(['instance', 'approval_required']),
supportsEmailList: getFeatures(state.get('instance')).emailList,
supportsAccountLookup: getFeatures(state.get('instance')).accountLookup,
birthDateRequired: state.getIn(['instance', 'pleroma', 'metadata', 'birth_date_required']),
});
export default @connect(mapStateToProps)
@ -61,6 +63,7 @@ class RegistrationForm extends ImmutablePureComponent {
supportsEmailList: PropTypes.bool,
supportsAccountLookup: PropTypes.bool,
inviteToken: PropTypes.string,
birthDateRequired: PropTypes.bool,
}
static contextTypes = {
@ -129,6 +132,12 @@ class RegistrationForm extends ImmutablePureComponent {
this.setState({ passwordMismatch: !this.passwordsMatch() });
}
onBirthDateChange = birthDate => {
this.setState({
birthDate,
});
}
launchModal = () => {
const { dispatch, intl, needsConfirmation, needsApproval } = this.props;
@ -197,6 +206,7 @@ class RegistrationForm extends ImmutablePureComponent {
onSubmit = e => {
const { dispatch, inviteToken } = this.props;
const { birthDate } = this.state;
if (!this.passwordsMatch()) {
this.setState({ passwordMismatch: true });
@ -211,6 +221,10 @@ class RegistrationForm extends ImmutablePureComponent {
if (inviteToken) {
params.set('token', inviteToken);
}
if (birthDate) {
params.set('birth_date', birthDate.toISOString().slice(0, 10));
}
});
this.setState({ submissionLoading: true });
@ -245,8 +259,8 @@ class RegistrationForm extends ImmutablePureComponent {
}
render() {
const { instance, intl, supportsEmailList } = this.props;
const { params, usernameUnavailable, passwordConfirmation, passwordMismatch } = this.state;
const { instance, intl, supportsEmailList, birthDateRequired } = this.props;
const { params, usernameUnavailable, passwordConfirmation, passwordMismatch, birthDate } = this.state;
const isLoading = this.state.captchaLoading || this.state.submissionLoading;
return (
@ -311,6 +325,12 @@ class RegistrationForm extends ImmutablePureComponent {
error={passwordMismatch === true}
required
/>
{!birthDateRequired &&
<BirthDateInput
value={birthDate}
onChange={this.onBirthDateChange}
required
/>}
{instance.get('approval_required') &&
<SimpleTextarea
label={<FormattedMessage id='registration.reason' defaultMessage='Why do you want to join?' />}

44
app/soapbox/features/edit_profile/index.js
View File

@ -5,17 +5,16 @@ import {
import { unescape } from 'lodash';
import PropTypes from 'prop-types';
import React from 'react';
import DatePicker from 'react-datepicker';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import 'react-datepicker/dist/react-datepicker.css';
import { updateNotificationSettings } from 'soapbox/actions/accounts';
import { patchMe } from 'soapbox/actions/me';
import snackbar from 'soapbox/actions/snackbar';
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import BirthDateInput from 'soapbox/components/birth_date_input';
import Icon from 'soapbox/components/icon';
import {
SimpleForm,
@ -69,7 +68,6 @@ const makeMapStateToProps = () => {
verifiedCanEditName: soapbox.get('verifiedCanEditName'),
supportsEmailList: features.emailList,
supportsBirthDates: features.birthDates,
minAge: state.getIn(['instance', 'pleroma', 'metadata', 'birth_date_min_age']),
};
};
@ -102,7 +100,6 @@ class EditProfile extends ImmutablePureComponent {
verifiedCanEditName: PropTypes.bool,
supportsEmailList: PropTypes.bool,
supportsBirthDates: PropTypes.bool,
minAge: PropTypes.number,
};
state = {
@ -117,6 +114,7 @@ class EditProfile extends ImmutablePureComponent {
const acceptsEmailList = account.getIn(['pleroma', 'accepts_email_list']);
const discoverable = account.getIn(['source', 'pleroma', 'discoverable']);
const birthDate = account.getIn(['pleroma', 'birth_date']);
const hideBirthDate = account.getIn(['pleroma', 'hide_birth_date']);
const initialState = account.withMutations(map => {
map.merge(map.get('source'));
@ -126,6 +124,7 @@ class EditProfile extends ImmutablePureComponent {
map.set('accepts_email_list', acceptsEmailList);
map.set('hide_network', hidesNetwork(account));
map.set('discoverable', discoverable);
map.set('hide_birth_date', hideBirthDate);
if (birthDate) map.set('birthDate', new Date(birthDate));
unescapeParams(map, ['display_name', 'bio']);
});
@ -168,6 +167,7 @@ class EditProfile extends ImmutablePureComponent {
hide_followers_count: state.hide_network,
hide_follows_count: state.hide_network,
birth_date: state.birthDate?.toISOString().slice(0, 10),
hide_birth_date: state.hide_birth_date,
}, this.getFieldParams().toJS());
}
@ -235,7 +235,7 @@ class EditProfile extends ImmutablePureComponent {
};
}
handleBirthDateChange = (birthDate) => {
handleBirthDateChange = birthDate => {
this.setState({
birthDate,
});
@ -255,15 +255,8 @@ class EditProfile extends ImmutablePureComponent {
};
}
isDateValid = date => {
const { minAge } = this.props;
const allowedDate = new Date();
allowedDate.setDate(allowedDate.getDate() - minAge);
return date && allowedDate.setHours(0, 0, 0, 0) >= new Date(date).setHours(0, 0, 0, 0);
}
render() {
const { intl, maxFields, account, verifiedCanEditName, supportsEmailList, supportsBirthDates } = this.props;
const { intl, maxFields, account, verifiedCanEditName, supportsBirthDates, supportsEmailList } = this.props;
const verified = isVerified(account);
const canEditName = verifiedCanEditName || !verified;
@ -292,23 +285,11 @@ class EditProfile extends ImmutablePureComponent {
onChange={this.handleTextChange}
rows={3}
/>
{supportsBirthDates && (
<div className='datepicker'>
<div className='datepicker__hint'>
<FormattedMessage id='edit_profile.fields.birth_date_label' defaultMessage='Birth date' />
</div>
<div className='datepicker__input'>
<DatePicker
selected={this.state.birthDate}
dateFormat='d MMMM yyyy'
wrapperClassName='react-datepicker-wrapper'
<BirthDateInput
hint={<FormattedMessage id='edit_profile.fields.birth_date_label' defaultMessage='Birth date' />}
value={this.state.birthDate}
onChange={this.handleBirthDateChange}
placeholderText={intl.formatMessage(messages.birthDatePlaceholder)}
filterDate={this.isDateValid}
/>
</div>
</div>
)}
<div className='fields-row'>
<div className='fields-row__column fields-row__column-6'>
<ProfilePreview account={this.makePreviewAccount()} />
@ -363,6 +344,13 @@ class EditProfile extends ImmutablePureComponent {
checked={this.state.discoverable}
onChange={this.handleCheckboxChange}
/>
{supportsBirthDates && <Checkbox
label={<FormattedMessage id='edit_profile.fields.hide_birth_date_label' defaultMessage='Hide my birth date' />}
hint={<FormattedMessage id='edit_profile.hints.hide_birth_date' defaultMessage='Your birth date will not be shown on your profile.' />}
name='hide_birth_date'
checked={this.state.hide_birth_date}
onChange={this.handleCheckboxChange}
/>}
{supportsEmailList && <Checkbox
label={<FormattedMessage id='edit_profile.fields.accepts_email_list_label' defaultMessage='Subscribe to newsletter' />}
hint={<FormattedMessage id='edit_profile.hints.accepts_email_list' defaultMessage='Opt-in to news and marketing updates.' />}

1
app/styles/forms.scss
View File

@ -638,6 +638,7 @@ code {
.datepicker {
padding: 0;
margin-bottom: 8px;
border: none;
&__hint {
padding-bottom: 0;

2
package.json
View File

@ -118,7 +118,7 @@
"qrcode.react": "^1.0.0",
"react": "^16.13.1",
"react-color": "^2.18.1",
"react-datepicker": "^4.1.1",
"react-datepicker": "^4.6.0",
"react-dom": "^16.13.1",
"react-helmet": "^6.0.0",
"react-hotkeys": "^1.1.4",

28
yarn.lock
View File

@ -3292,10 +3292,10 @@ data-urls@^2.0.0:
whatwg-mimetype "^2.3.0"
whatwg-url "^8.0.0"
date-fns@^2.0.1:
version "2.23.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.23.0.tgz#4e886c941659af0cf7b30fafdd1eaa37e88788a9"
integrity sha512-5ycpauovVyAk0kXNZz6ZoB9AYMZB4DObse7P3BPWmyEjXNORTI8EJ6X0uaSAq4sCHzM1uajzrkr6HnsLQpxGXA==
date-fns@^2.24.0:
version "2.28.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
debug@2.6.9, debug@^2.6.9:
version "2.6.9"
@ -7820,16 +7820,16 @@ react-color@^2.18.1:
reactcss "^1.2.0"
tinycolor2 "^1.4.1"
react-datepicker@^4.1.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.2.1.tgz#72caf5055bc7c4eb0279c1f6d7624ded053edc4c"
integrity sha512-0gcvHMnX8rS1fV90PjjsB7MQdsWNU77JeVHf6bbwK9HnFxgwjVflTx40ebKmHV+leqe+f+FgUP9Nvqbe5RGyfA==
react-datepicker@^4.6.0:
version "4.6.0"
resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-4.6.0.tgz#10fc7c5b9c72df5c3e29712d559cb3fe73fd9f62"
integrity sha512-JGSQnQSQYUkS7zvSaZuyHv5lxp3wMrN7GXV0VA0E9Ax9fL3Bb6E1pSXjL6C3WoeuV8dt/mItQfRkPpRGCrl/OA==
dependencies:
"@popperjs/core" "^2.9.2"
classnames "^2.2.6"
date-fns "^2.0.1"
date-fns "^2.24.0"
prop-types "^15.7.2"
react-onclickoutside "^6.10.0"
react-onclickoutside "^6.12.0"
react-popper "^2.2.5"
react-dom@^16.13.1:
@ -7959,10 +7959,10 @@ react-notification@^6.8.4:
dependencies:
prop-types "^15.6.2"
react-onclickoutside@^6.10.0:
version "6.12.0"
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.0.tgz#c63db2e3c2c852b288160cdb6cff443604e28db4"
integrity sha512-oPlOTYcISLHfpMog2lUZMFSbqOs4LFcA4+vo7fpfevB5v9Z0D5VBDBkfeO5lv+hpEcGoaGk67braLT+QT+eICA==
react-onclickoutside@^6.12.0:
version "6.12.1"
resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.12.1.tgz#92dddd28f55e483a1838c5c2930e051168c1e96b"
integrity sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==
react-overlays@^0.9.0:
version "0.9.3"