@reachfive/identity-ui 1.21.0 → 1.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -1
- package/cjs/identity-ui.js +233 -268
- package/es/identity-ui.js +241 -276
- package/package.json +2 -2
- package/umd/identity-ui.js +248 -318
- package/umd/identity-ui.min.js +1 -1
package/es/identity-ui.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { createClient as createClient$1 } from '@reachfive/identity-core';
|
|
2
2
|
import ReactDOM from 'react-dom';
|
|
3
|
-
import React__default, { createElement, useState } from 'react';
|
|
3
|
+
import React__default, { createElement, useState, useEffect, useMemo } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import { getContext, compose as compose$1, withContext, withHandlers } from '@hypnosphi/recompose';
|
|
6
|
-
import { darken, lighten, transparentize
|
|
6
|
+
import { darken, lighten, transparentize } from 'polished';
|
|
7
7
|
import styled, { keyframes, css } from 'styled-components';
|
|
8
8
|
import { Transition } from 'react-transition-group';
|
|
9
9
|
import classes from 'classnames';
|
|
10
10
|
import { Remarkable } from 'remarkable';
|
|
11
11
|
import validator from 'validator';
|
|
12
|
-
import { isValidNumber, AsYouType, format
|
|
12
|
+
import { isValidNumber, AsYouType, format, parse } from 'libphonenumber-js';
|
|
13
13
|
import { isEqual } from 'lodash-es';
|
|
14
|
-
import { DateTime } from 'luxon';
|
|
14
|
+
import { DateTime, Info as Info$1 } from 'luxon';
|
|
15
15
|
import { isLower, isUpper, isDigit } from 'char-info';
|
|
16
16
|
import zxcvbn from '@reachfive/zxcvbn';
|
|
17
17
|
|
|
@@ -7319,12 +7319,6 @@ function isValued(v) {
|
|
|
7319
7319
|
var unwrap = isObject(v) ? v[rawProperty] : v;
|
|
7320
7320
|
return unwrap !== null && unwrap !== undefined && unwrap !== '' && !Number.isNaN(unwrap) && (Array.isArray(unwrap) ? unwrap.length > 0 : true);
|
|
7321
7321
|
}
|
|
7322
|
-
function formatISO8601Date(year, month, day) {
|
|
7323
|
-
if (isValued(year) && isValued(month) && isValued(day)) {
|
|
7324
|
-
return "".concat(year, "-").concat(month.toString().padStart(2, '0'), "-").concat(day.toString().padStart(2, '0'));
|
|
7325
|
-
}
|
|
7326
|
-
return null;
|
|
7327
|
-
}
|
|
7328
7322
|
function specializeIdentifierData(data) {
|
|
7329
7323
|
return data.identifier ? _objectSpread2(_objectSpread2(_objectSpread2({}, data), {}, {
|
|
7330
7324
|
identifier: undefined
|
|
@@ -8690,7 +8684,7 @@ var IdentifierField = /*#__PURE__*/function (_React$Component) {
|
|
|
8690
8684
|
_defineProperty(_assertThisInitialized(_this), "asYouType", function (inputValue) {
|
|
8691
8685
|
var country = _this.props.value.country;
|
|
8692
8686
|
var phone = new AsYouType(country).input(inputValue);
|
|
8693
|
-
var formatted = format
|
|
8687
|
+
var formatted = format(phone, country, 'International');
|
|
8694
8688
|
var isValid = isValidNumber(phone, country);
|
|
8695
8689
|
return {
|
|
8696
8690
|
country: country,
|
|
@@ -8710,7 +8704,7 @@ var IdentifierField = /*#__PURE__*/function (_React$Component) {
|
|
|
8710
8704
|
if (!userInput) return;
|
|
8711
8705
|
try {
|
|
8712
8706
|
var parsed = parse(userInput, country);
|
|
8713
|
-
var phoneValue = country === parsed.country ? format
|
|
8707
|
+
var phoneValue = country === parsed.country ? format(parsed, 'National') : userInput;
|
|
8714
8708
|
this.asYouType(phoneValue);
|
|
8715
8709
|
} catch (e) {
|
|
8716
8710
|
console.error(e);
|
|
@@ -9616,275 +9610,248 @@ function selectField(_ref) {
|
|
|
9616
9610
|
}));
|
|
9617
9611
|
}
|
|
9618
9612
|
|
|
9619
|
-
var
|
|
9620
|
-
|
|
9621
|
-
|
|
9622
|
-
|
|
9623
|
-
|
|
9624
|
-
|
|
9625
|
-
|
|
9626
|
-
|
|
9627
|
-
|
|
9628
|
-
|
|
9629
|
-
|
|
9630
|
-
|
|
9613
|
+
var useDebounce = function useDebounce(value, milliSeconds) {
|
|
9614
|
+
var _useState = useState(value),
|
|
9615
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
9616
|
+
debouncedValue = _useState2[0],
|
|
9617
|
+
setDebouncedValue = _useState2[1];
|
|
9618
|
+
useEffect(function () {
|
|
9619
|
+
var handler = setTimeout(function () {
|
|
9620
|
+
setDebouncedValue(value);
|
|
9621
|
+
}, milliSeconds);
|
|
9622
|
+
return function () {
|
|
9623
|
+
clearTimeout(handler);
|
|
9624
|
+
};
|
|
9625
|
+
}, [value, milliSeconds]);
|
|
9626
|
+
return debouncedValue;
|
|
9631
9627
|
};
|
|
9632
|
-
function dateField(config) {
|
|
9633
|
-
return simpleField(_objectSpread2(_objectSpread2({
|
|
9634
|
-
placeholder: 'mm/dd/yyyy'
|
|
9635
|
-
}, config), {}, {
|
|
9636
|
-
type: 'text',
|
|
9637
|
-
format: {
|
|
9638
|
-
bind: function bind(modelValue) {
|
|
9639
|
-
if (modelValue && modelValue.length) {
|
|
9640
|
-
var _modelValue$split = modelValue.split('-'),
|
|
9641
|
-
_modelValue$split2 = _slicedToArray(_modelValue$split, 3),
|
|
9642
|
-
_modelValue$split2$ = _modelValue$split2[0],
|
|
9643
|
-
year = _modelValue$split2$ === void 0 ? '' : _modelValue$split2$,
|
|
9644
|
-
_modelValue$split2$2 = _modelValue$split2[1],
|
|
9645
|
-
month = _modelValue$split2$2 === void 0 ? '' : _modelValue$split2$2,
|
|
9646
|
-
_modelValue$split2$3 = _modelValue$split2[2],
|
|
9647
|
-
day = _modelValue$split2$3 === void 0 ? '' : _modelValue$split2$3;
|
|
9648
|
-
return "".concat(month, "/").concat(day, "/").concat(year);
|
|
9649
|
-
}
|
|
9650
|
-
},
|
|
9651
|
-
unbind: formatDate
|
|
9652
|
-
},
|
|
9653
|
-
validator: new Validator({
|
|
9654
|
-
rule: function rule(value) {
|
|
9655
|
-
var date = formatDate(value);
|
|
9656
|
-
return !date || validator.isISO8601(date);
|
|
9657
|
-
},
|
|
9658
|
-
hint: 'date'
|
|
9659
|
-
})
|
|
9660
|
-
}));
|
|
9661
|
-
}
|
|
9662
9628
|
|
|
9663
|
-
var _excluded$6 = ["state"];
|
|
9664
9629
|
var _templateObject$a, _templateObject2$5;
|
|
9665
|
-
var BIRTHDAY_PATH = 'birthdate';
|
|
9666
|
-
var months = function months(i18n) {
|
|
9667
|
-
return ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'].map(function (m, i) {
|
|
9668
|
-
return {
|
|
9669
|
-
value: i + 1,
|
|
9670
|
-
label: i18n(m)
|
|
9671
|
-
};
|
|
9672
|
-
});
|
|
9673
|
-
};
|
|
9674
9630
|
var inputRowGutter = 10;
|
|
9675
|
-
var InputRow = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n
|
|
9676
|
-
var InputCol = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n
|
|
9631
|
+
var InputRow = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: ", "px;\n"])), inputRowGutter);
|
|
9632
|
+
var InputCol = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n flex-basis: ", "%;\n"])), function (props) {
|
|
9677
9633
|
return props.width;
|
|
9678
9634
|
});
|
|
9679
|
-
var
|
|
9680
|
-
var
|
|
9681
|
-
|
|
9682
|
-
|
|
9683
|
-
|
|
9684
|
-
|
|
9685
|
-
|
|
9686
|
-
|
|
9687
|
-
|
|
9688
|
-
|
|
9689
|
-
|
|
9690
|
-
|
|
9691
|
-
|
|
9692
|
-
|
|
9693
|
-
|
|
9694
|
-
|
|
9695
|
-
|
|
9696
|
-
|
|
9697
|
-
|
|
9698
|
-
|
|
9699
|
-
|
|
9700
|
-
|
|
9701
|
-
|
|
9635
|
+
var DateField = function DateField(_ref) {
|
|
9636
|
+
var i18n = _ref.i18n,
|
|
9637
|
+
inputId = _ref.inputId,
|
|
9638
|
+
label = _ref.label,
|
|
9639
|
+
locale = _ref.locale,
|
|
9640
|
+
onChange = _ref.onChange,
|
|
9641
|
+
path = _ref.path,
|
|
9642
|
+
required = _ref.required,
|
|
9643
|
+
showLabel = _ref.showLabel,
|
|
9644
|
+
validation = _ref.validation,
|
|
9645
|
+
value = _ref.value;
|
|
9646
|
+
var _useState = useState(isValued(value) ? value.raw.day : undefined),
|
|
9647
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
9648
|
+
day = _useState2[0],
|
|
9649
|
+
setDay = _useState2[1];
|
|
9650
|
+
var _useState3 = useState(isValued(value) ? value.raw.month : undefined),
|
|
9651
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
9652
|
+
month = _useState4[0],
|
|
9653
|
+
setMonth = _useState4[1];
|
|
9654
|
+
var _useState5 = useState(isValued(value) ? value.raw.year : undefined),
|
|
9655
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
9656
|
+
year = _useState6[0],
|
|
9657
|
+
setYear = _useState6[1];
|
|
9658
|
+
|
|
9659
|
+
// debounce year value to delay value update when user is currently editing it
|
|
9660
|
+
var debouncedYear = useDebounce(year, 1000);
|
|
9661
|
+
var setDatePart = function setDatePart(setter, value) {
|
|
9662
|
+
if (Number.isNaN(Number(value))) return; // only accept number value
|
|
9663
|
+
setter(Number(value));
|
|
9702
9664
|
};
|
|
9703
|
-
var
|
|
9704
|
-
return
|
|
9705
|
-
|
|
9706
|
-
|
|
9665
|
+
var handleDayChange = function handleDayChange(event) {
|
|
9666
|
+
return setDatePart(setDay, event.target.value);
|
|
9667
|
+
};
|
|
9668
|
+
var handleMonthChange = function handleMonthChange(event) {
|
|
9669
|
+
return setDatePart(setMonth, event.target.value);
|
|
9670
|
+
};
|
|
9671
|
+
var handleYearChange = function handleYearChange(event) {
|
|
9672
|
+
return setDatePart(setYear, event.target.value);
|
|
9673
|
+
};
|
|
9674
|
+
useEffect(function () {
|
|
9675
|
+
if (day && month && debouncedYear) {
|
|
9676
|
+
onChange(function () {
|
|
9677
|
+
return {
|
|
9678
|
+
value: {
|
|
9679
|
+
raw: DateTime.fromObject({
|
|
9680
|
+
year: debouncedYear,
|
|
9681
|
+
month: month,
|
|
9682
|
+
day: day
|
|
9683
|
+
})
|
|
9684
|
+
},
|
|
9707
9685
|
isDirty: true
|
|
9708
|
-
}
|
|
9686
|
+
};
|
|
9709
9687
|
});
|
|
9710
|
-
}
|
|
9688
|
+
}
|
|
9689
|
+
}, [debouncedYear, month, day]); // eslint-disable-line react-hooks/exhaustive-deps
|
|
9690
|
+
|
|
9691
|
+
var months = useMemo(function () {
|
|
9692
|
+
return Info$1.months("long", {
|
|
9693
|
+
locale: locale
|
|
9694
|
+
});
|
|
9695
|
+
}, [locale]);
|
|
9696
|
+
var daysInMonth = useMemo(function () {
|
|
9697
|
+
return Array.from({
|
|
9698
|
+
length: DateTime.fromObject({
|
|
9699
|
+
year: debouncedYear,
|
|
9700
|
+
month: month
|
|
9701
|
+
}).daysInMonth
|
|
9702
|
+
}, function (_value, index) {
|
|
9703
|
+
return index + 1;
|
|
9704
|
+
});
|
|
9705
|
+
}, [debouncedYear, month]);
|
|
9706
|
+
|
|
9707
|
+
// reset day if current value is out of range
|
|
9708
|
+
if (day && !daysInMonth.includes(day)) {
|
|
9709
|
+
setDay(undefined);
|
|
9710
|
+
}
|
|
9711
|
+
var parts = useMemo(function () {
|
|
9712
|
+
return DateTime.now().setLocale(locale).toLocaleParts().map(function (part) {
|
|
9713
|
+
return part.type;
|
|
9714
|
+
}).filter(function (type) {
|
|
9715
|
+
return type !== 'literal';
|
|
9716
|
+
});
|
|
9717
|
+
}, [locale]);
|
|
9718
|
+
var error = _typeof(validation) === 'object' && 'error' in validation ? validation.error : null;
|
|
9719
|
+
var fields = {
|
|
9720
|
+
day: /*#__PURE__*/React__default.createElement(InputCol, {
|
|
9721
|
+
key: "day",
|
|
9722
|
+
width: 20
|
|
9723
|
+
}, /*#__PURE__*/React__default.createElement(Select, {
|
|
9724
|
+
name: "".concat(path, ".day"),
|
|
9725
|
+
value: day || '',
|
|
9726
|
+
hasError: error,
|
|
9727
|
+
required: required,
|
|
9728
|
+
onChange: handleDayChange,
|
|
9729
|
+
placeholder: i18n('day'),
|
|
9730
|
+
options: daysInMonth.map(function (day) {
|
|
9731
|
+
return {
|
|
9732
|
+
value: day,
|
|
9733
|
+
label: day
|
|
9734
|
+
};
|
|
9735
|
+
}),
|
|
9736
|
+
"data-testid": "".concat(path, ".day"),
|
|
9737
|
+
"aria-label": i18n('day')
|
|
9738
|
+
})),
|
|
9739
|
+
month: /*#__PURE__*/React__default.createElement(InputCol, {
|
|
9740
|
+
key: "month",
|
|
9741
|
+
width: 50
|
|
9742
|
+
}, /*#__PURE__*/React__default.createElement(Select, {
|
|
9743
|
+
name: "".concat(path, ".month"),
|
|
9744
|
+
value: month || '',
|
|
9745
|
+
hasError: error,
|
|
9746
|
+
required: required,
|
|
9747
|
+
onChange: handleMonthChange,
|
|
9748
|
+
placeholder: i18n('month'),
|
|
9749
|
+
options: months.map(function (month, index) {
|
|
9750
|
+
return {
|
|
9751
|
+
value: index + 1,
|
|
9752
|
+
label: month
|
|
9753
|
+
};
|
|
9754
|
+
}),
|
|
9755
|
+
"data-testid": "".concat(path, ".month"),
|
|
9756
|
+
"aria-label": i18n('month')
|
|
9757
|
+
})),
|
|
9758
|
+
year: /*#__PURE__*/React__default.createElement(InputCol, {
|
|
9759
|
+
key: "year",
|
|
9760
|
+
width: 30
|
|
9761
|
+
}, /*#__PURE__*/React__default.createElement(Input, {
|
|
9762
|
+
type: "number",
|
|
9763
|
+
maxlength: "4",
|
|
9764
|
+
inputmode: "numeric",
|
|
9765
|
+
name: "".concat(path, ".year"),
|
|
9766
|
+
value: year || '',
|
|
9767
|
+
hasError: error,
|
|
9768
|
+
required: required,
|
|
9769
|
+
onChange: handleYearChange,
|
|
9770
|
+
placeholder: i18n('year'),
|
|
9771
|
+
"data-testid": "".concat(path, ".year"),
|
|
9772
|
+
"aria-label": i18n('year')
|
|
9773
|
+
}))
|
|
9711
9774
|
};
|
|
9712
|
-
return /*#__PURE__*/React__default.createElement(FormGroup,
|
|
9775
|
+
return /*#__PURE__*/React__default.createElement(FormGroup, {
|
|
9713
9776
|
inputId: inputId,
|
|
9714
|
-
labelText: label
|
|
9715
|
-
|
|
9777
|
+
labelText: label,
|
|
9778
|
+
error: error,
|
|
9716
9779
|
showLabel: showLabel
|
|
9717
|
-
}
|
|
9718
|
-
|
|
9719
|
-
}
|
|
9720
|
-
type: "text",
|
|
9721
|
-
id: inputId,
|
|
9722
|
-
name: "".concat(BIRTHDAY_PATH, ".day"),
|
|
9723
|
-
maxlength: "2",
|
|
9724
|
-
inputmode: "numeric",
|
|
9725
|
-
value: day.value,
|
|
9726
|
-
hasError: !!validation.day,
|
|
9727
|
-
required: required,
|
|
9728
|
-
placeholder: i18n('day'),
|
|
9729
|
-
onChange: handleFieldChange('day'),
|
|
9730
|
-
onBlur: handleFieldBlur('day'),
|
|
9731
|
-
"data-testid": "".concat(BIRTHDAY_PATH, ".day")
|
|
9732
|
-
})), /*#__PURE__*/React__default.createElement(InputCol, {
|
|
9733
|
-
width: 50
|
|
9734
|
-
}, /*#__PURE__*/React__default.createElement(Select, {
|
|
9735
|
-
name: "".concat(BIRTHDAY_PATH, ".month"),
|
|
9736
|
-
value: month.value || '',
|
|
9737
|
-
hasError: !!validation.month,
|
|
9738
|
-
required: required,
|
|
9739
|
-
onChange: handleFieldChange('month'),
|
|
9740
|
-
onBlur: handleFieldBlur('month'),
|
|
9741
|
-
placeholder: i18n('month'),
|
|
9742
|
-
options: months,
|
|
9743
|
-
"data-testid": "".concat(BIRTHDAY_PATH, ".month")
|
|
9744
|
-
})), /*#__PURE__*/React__default.createElement(InputCol, {
|
|
9745
|
-
width: 30
|
|
9746
|
-
}, /*#__PURE__*/React__default.createElement(Input, {
|
|
9747
|
-
type: "text",
|
|
9748
|
-
name: "".concat(BIRTHDAY_PATH, ".year"),
|
|
9749
|
-
maxlength: "4",
|
|
9750
|
-
inputmode: "numeric",
|
|
9751
|
-
value: year.value,
|
|
9752
|
-
hasError: !!validation.year,
|
|
9753
|
-
required: required,
|
|
9754
|
-
placeholder: i18n('year'),
|
|
9755
|
-
onChange: handleFieldChange('year'),
|
|
9756
|
-
onBlur: handleFieldBlur('year'),
|
|
9757
|
-
"data-testid": "".concat(BIRTHDAY_PATH, ".year")
|
|
9758
|
-
}))));
|
|
9780
|
+
}, /*#__PURE__*/React__default.createElement(InputRow, null, parts.map(function (part) {
|
|
9781
|
+
return fields[part];
|
|
9782
|
+
})));
|
|
9759
9783
|
};
|
|
9760
|
-
var
|
|
9761
|
-
|
|
9762
|
-
|
|
9763
|
-
|
|
9764
|
-
|
|
9765
|
-
|
|
9766
|
-
|
|
9767
|
-
|
|
9768
|
-
|
|
9784
|
+
var dateFormat = function dateFormat(locale) {
|
|
9785
|
+
return DateTime.now().setLocale(locale).toLocaleParts().map(function (part) {
|
|
9786
|
+
switch (part.type) {
|
|
9787
|
+
case 'day':
|
|
9788
|
+
return 'dd';
|
|
9789
|
+
case 'month':
|
|
9790
|
+
return 'mm';
|
|
9791
|
+
case 'year':
|
|
9792
|
+
return 'yyyy';
|
|
9793
|
+
case 'literal':
|
|
9794
|
+
return part.value;
|
|
9795
|
+
}
|
|
9796
|
+
}).join('');
|
|
9769
9797
|
};
|
|
9770
|
-
var
|
|
9771
|
-
|
|
9772
|
-
|
|
9773
|
-
|
|
9774
|
-
|
|
9798
|
+
var datetimeValidator = function datetimeValidator(locale) {
|
|
9799
|
+
return new Validator({
|
|
9800
|
+
rule: function rule(value) {
|
|
9801
|
+
return isValued(value) && value.raw.isValid;
|
|
9802
|
+
},
|
|
9803
|
+
hint: 'date',
|
|
9804
|
+
parameters: {
|
|
9805
|
+
format: dateFormat(locale)
|
|
9806
|
+
}
|
|
9807
|
+
});
|
|
9775
9808
|
};
|
|
9776
|
-
function
|
|
9777
|
-
|
|
9778
|
-
|
|
9779
|
-
|
|
9780
|
-
|
|
9781
|
-
|
|
9782
|
-
|
|
9783
|
-
|
|
9784
|
-
|
|
9785
|
-
|
|
9786
|
-
|
|
9787
|
-
|
|
9788
|
-
|
|
9789
|
-
|
|
9790
|
-
|
|
9791
|
-
|
|
9792
|
-
|
|
9793
|
-
};
|
|
9794
|
-
return {
|
|
9795
|
-
key: BIRTHDAY_PATH,
|
|
9796
|
-
modelPath: BIRTHDAY_PATH,
|
|
9797
|
-
render: function render(_ref6) {
|
|
9798
|
-
var state = _ref6.state,
|
|
9799
|
-
props = _objectWithoutProperties(_ref6, _excluded$6);
|
|
9800
|
-
return /*#__PURE__*/React__default.createElement(BirthdateField, _extends({
|
|
9801
|
-
key: BIRTHDAY_PATH
|
|
9802
|
-
}, state, props, staticProps));
|
|
9803
|
-
},
|
|
9804
|
-
initialize: function initialize(model) {
|
|
9805
|
-
var modelValue = model.birthdate || defaultValue;
|
|
9806
|
-
var _ref7 = modelValue ? modelValue.split('-') : [],
|
|
9807
|
-
_ref8 = _slicedToArray(_ref7, 3),
|
|
9808
|
-
_ref8$ = _ref8[0],
|
|
9809
|
-
year = _ref8$ === void 0 ? '' : _ref8$,
|
|
9810
|
-
_ref8$2 = _ref8[1],
|
|
9811
|
-
month = _ref8$2 === void 0 ? '' : _ref8$2,
|
|
9812
|
-
_ref8$3 = _ref8[2],
|
|
9813
|
-
day = _ref8$3 === void 0 ? '' : _ref8$3;
|
|
9814
|
-
return {
|
|
9815
|
-
day: {
|
|
9816
|
-
value: day,
|
|
9817
|
-
isDirty: false
|
|
9818
|
-
},
|
|
9819
|
-
month: {
|
|
9820
|
-
value: parseInt(month),
|
|
9821
|
-
isDirty: false
|
|
9822
|
-
},
|
|
9823
|
-
year: {
|
|
9824
|
-
value: year,
|
|
9825
|
-
isDirty: false
|
|
9826
|
-
}
|
|
9827
|
-
};
|
|
9828
|
-
},
|
|
9829
|
-
unbind: function unbind(model, state) {
|
|
9830
|
-
return _objectSpread2(_objectSpread2({}, model), {}, {
|
|
9831
|
-
birthdate: format(state)
|
|
9832
|
-
});
|
|
9833
|
-
},
|
|
9834
|
-
validate: function validate(state, _ref9) {
|
|
9835
|
-
var isSubmitted = _ref9.isSubmitted;
|
|
9836
|
-
var required = staticProps.required;
|
|
9837
|
-
var day = state.day,
|
|
9838
|
-
month = state.month,
|
|
9839
|
-
year = state.year;
|
|
9840
|
-
var missingFields = ['day', 'month', 'year'].filter(function (field) {
|
|
9841
|
-
return (isSubmitted || state[field].isDirty) && !isValued(state[field].value);
|
|
9842
|
-
});
|
|
9843
|
-
if (missingFields.length) {
|
|
9844
|
-
return required || missingFields.length < 3 ? _objectSpread2({
|
|
9845
|
-
error: i18n('validation.required')
|
|
9846
|
-
}, missingFields.reduce(function (acc, field) {
|
|
9847
|
-
return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, field, true));
|
|
9848
|
-
}, {})) : {};
|
|
9849
|
-
}
|
|
9850
|
-
if (isSubmitted || day.isDirty || month.isDirty || year.isDirty) {
|
|
9851
|
-
if (!validator.isNumeric(year.value.toString()) || !DateTime.fromObject({
|
|
9852
|
-
year: parseInt(year.value, 10)
|
|
9853
|
-
}).isValid) {
|
|
9854
|
-
return {
|
|
9855
|
-
error: i18n("validation.birthdate.year"),
|
|
9856
|
-
year: true
|
|
9857
|
-
};
|
|
9858
|
-
}
|
|
9859
|
-
var birthdate = format(state);
|
|
9860
|
-
if (!birthdate || !validator.isISO8601(birthdate)) {
|
|
9861
|
-
return {
|
|
9862
|
-
error: i18n('validation.birthdate.dayOfMonth'),
|
|
9863
|
-
day: true
|
|
9864
|
-
};
|
|
9865
|
-
}
|
|
9866
|
-
if (!(validator.isNumeric(month.value.toString()) && validator.isNumeric(day.value.toString())) || !DateTime.fromObject({
|
|
9867
|
-
year: year.value,
|
|
9868
|
-
month: month.value,
|
|
9869
|
-
day: day.value
|
|
9870
|
-
}).isValid) {
|
|
9871
|
-
return {
|
|
9872
|
-
error: i18n("validation.birthdate.dayOfMonth"),
|
|
9873
|
-
day: true
|
|
9874
|
-
};
|
|
9875
|
-
}
|
|
9876
|
-
var limitAge = validateLimitAge(day.value, month.value, year.value);
|
|
9877
|
-
if (limitAge) {
|
|
9878
|
-
return {
|
|
9879
|
-
error: i18n("validation.".concat(limitAge))
|
|
9880
|
-
};
|
|
9881
|
-
}
|
|
9882
|
-
}
|
|
9883
|
-
return {};
|
|
9884
|
-
}
|
|
9885
|
-
};
|
|
9809
|
+
function dateField(props, config) {
|
|
9810
|
+
return createField(_objectSpread2(_objectSpread2({}, props), {}, {
|
|
9811
|
+
format: {
|
|
9812
|
+
bind: function bind(value) {
|
|
9813
|
+
var dt = value ? DateTime.fromISO(value) : DateTime.invalid('empty value');
|
|
9814
|
+
return dt.isValid ? {
|
|
9815
|
+
raw: dt
|
|
9816
|
+
} : undefined;
|
|
9817
|
+
},
|
|
9818
|
+
unbind: function unbind(value) {
|
|
9819
|
+
return value.raw.toISODate();
|
|
9820
|
+
}
|
|
9821
|
+
},
|
|
9822
|
+
validator: props.validator ? datetimeValidator(config.language).and(props.validator) : datetimeValidator(config.language),
|
|
9823
|
+
component: DateField,
|
|
9824
|
+
extendedParams: {
|
|
9825
|
+
locale: config.language
|
|
9886
9826
|
}
|
|
9887
|
-
};
|
|
9827
|
+
}));
|
|
9828
|
+
}
|
|
9829
|
+
|
|
9830
|
+
var _excluded$6 = ["min", "max", "label"];
|
|
9831
|
+
var ageLimitValidator = function ageLimitValidator() {
|
|
9832
|
+
var min = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 6;
|
|
9833
|
+
var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 129;
|
|
9834
|
+
return new Validator({
|
|
9835
|
+
rule: function rule(value) {
|
|
9836
|
+
var age = DateTime.now().diff(value.raw, 'years').years;
|
|
9837
|
+
return min < age && age < max;
|
|
9838
|
+
},
|
|
9839
|
+
hint: 'birthdate.yearLimit',
|
|
9840
|
+
parameters: {
|
|
9841
|
+
min: min,
|
|
9842
|
+
max: max
|
|
9843
|
+
}
|
|
9844
|
+
});
|
|
9845
|
+
};
|
|
9846
|
+
function birthdateField(_ref, config) {
|
|
9847
|
+
var min = _ref.min,
|
|
9848
|
+
max = _ref.max,
|
|
9849
|
+
label = _ref.label,
|
|
9850
|
+
props = _objectWithoutProperties(_ref, _excluded$6);
|
|
9851
|
+
return dateField(_objectSpread2(_objectSpread2({}, props), {}, {
|
|
9852
|
+
label: label || 'birthdate',
|
|
9853
|
+
validator: ageLimitValidator(min, max)
|
|
9854
|
+
}), config);
|
|
9888
9855
|
}
|
|
9889
9856
|
|
|
9890
9857
|
var PhoneNumberField = /*#__PURE__*/function (_React$Component) {
|
|
@@ -9900,7 +9867,7 @@ var PhoneNumberField = /*#__PURE__*/function (_React$Component) {
|
|
|
9900
9867
|
_defineProperty(_assertThisInitialized(_this), "asYouType", function (inputValue) {
|
|
9901
9868
|
var country = _this.props.value.country;
|
|
9902
9869
|
var phone = new AsYouType(country).input(inputValue);
|
|
9903
|
-
var formatted = format
|
|
9870
|
+
var formatted = format(phone, country, 'International');
|
|
9904
9871
|
var isValid = isValidNumber(phone, country);
|
|
9905
9872
|
_this.props.onChange({
|
|
9906
9873
|
value: {
|
|
@@ -9921,7 +9888,7 @@ var PhoneNumberField = /*#__PURE__*/function (_React$Component) {
|
|
|
9921
9888
|
country = _this$props$value.country;
|
|
9922
9889
|
try {
|
|
9923
9890
|
var parsed = parse(raw, country);
|
|
9924
|
-
var phoneValue = country === parsed.country ? format
|
|
9891
|
+
var phoneValue = country === parsed.country ? format(parsed, 'National') : raw;
|
|
9925
9892
|
this.asYouType(phoneValue);
|
|
9926
9893
|
} catch (e) {
|
|
9927
9894
|
console.error(e);
|
|
@@ -10505,7 +10472,7 @@ var predefinedFields = {
|
|
|
10505
10472
|
}, cfg));
|
|
10506
10473
|
}
|
|
10507
10474
|
};
|
|
10508
|
-
function customFieldComponent(customField, cfg) {
|
|
10475
|
+
function customFieldComponent(customField, cfg, config) {
|
|
10509
10476
|
var baseConfig = _objectSpread2(_objectSpread2({
|
|
10510
10477
|
label: customField.name
|
|
10511
10478
|
}, cfg), {}, {
|
|
@@ -10517,7 +10484,7 @@ function customFieldComponent(customField, cfg) {
|
|
|
10517
10484
|
}) : _objectSpread2({}, baseConfig);
|
|
10518
10485
|
return checkboxField(checkboxConfig);
|
|
10519
10486
|
} else if (customField.dataType === 'date') {
|
|
10520
|
-
return dateField(baseConfig);
|
|
10487
|
+
return dateField(baseConfig, config);
|
|
10521
10488
|
} else if (customField.dataType === 'integer') {
|
|
10522
10489
|
return simpleField(_objectSpread2(_objectSpread2({}, baseConfig), {}, {
|
|
10523
10490
|
type: 'number',
|
|
@@ -10612,7 +10579,7 @@ var resolveField = function resolveField(fieldConfig, config) {
|
|
|
10612
10579
|
}
|
|
10613
10580
|
var customField = findCustomField(config, camelPath);
|
|
10614
10581
|
if (customField) {
|
|
10615
|
-
return customFieldComponent(customField, fieldConfig);
|
|
10582
|
+
return customFieldComponent(customField, fieldConfig, config);
|
|
10616
10583
|
}
|
|
10617
10584
|
var camelPathSplit = camelPath.split('.v'); // TODO What if consent start with a `v`?
|
|
10618
10585
|
var consentField = findConsentField(config, camelPathSplit[0]);
|
|
@@ -11233,12 +11200,10 @@ var VerificationCodeView = /*#__PURE__*/function (_React$Component3) {
|
|
|
11233
11200
|
var _this5$props = _this5.props,
|
|
11234
11201
|
apiClient = _this5$props.apiClient,
|
|
11235
11202
|
auth = _this5$props.auth,
|
|
11236
|
-
challengeId = _this5$props.challengeId
|
|
11237
|
-
accessToken = _this5$props.accessToken;
|
|
11203
|
+
challengeId = _this5$props.challengeId;
|
|
11238
11204
|
return apiClient.verifyMfaPasswordless({
|
|
11239
11205
|
challengeId: challengeId,
|
|
11240
|
-
verificationCode: data.verificationCode
|
|
11241
|
-
accessToken: accessToken
|
|
11206
|
+
verificationCode: data.verificationCode
|
|
11242
11207
|
}).then(function (resp) {
|
|
11243
11208
|
return window.location.replace(auth.redirectUri + "?" + toQueryString(resp));
|
|
11244
11209
|
});
|
|
@@ -12541,7 +12506,7 @@ var Credential = withTheme(styled(Card)(_templateObject3$6 || (_templateObject3$
|
|
|
12541
12506
|
var CardContent = withTheme(styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n margin-left: ", "px;\n white-space: initial;\n"])), function (props) {
|
|
12542
12507
|
return props.theme.get('_blockInnerHeight');
|
|
12543
12508
|
}));
|
|
12544
|
-
var dateFormat = function dateFormat(dateString, locales) {
|
|
12509
|
+
var dateFormat$1 = function dateFormat(dateString, locales) {
|
|
12545
12510
|
return new Date(dateString).toLocaleDateString(locales, {
|
|
12546
12511
|
timeZone: 'UTC'
|
|
12547
12512
|
});
|
|
@@ -12564,7 +12529,7 @@ var MfaList = compose(withI18n, withConfig)(function (_ref) {
|
|
|
12564
12529
|
}
|
|
12565
12530
|
}, friendlyName), /*#__PURE__*/React__default.createElement("div", null, email || phoneNumber), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("span", null, i18n('mfaList.createdAt'), "\xA0: "), /*#__PURE__*/React__default.createElement("time", {
|
|
12566
12531
|
dateTime: createdAt
|
|
12567
|
-
}, dateFormat(createdAt, config.language)))));
|
|
12532
|
+
}, dateFormat$1(createdAt, config.language)))));
|
|
12568
12533
|
}));
|
|
12569
12534
|
});
|
|
12570
12535
|
var mfaListWidget = createWidget({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reachfive/identity-ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.22.0",
|
|
4
4
|
"description": "ReachFive Identity Web UI SDK",
|
|
5
5
|
"author": "ReachFive",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@hypnosphi/recompose": "0.30.5",
|
|
23
|
-
"@reachfive/identity-core": "1.
|
|
23
|
+
"@reachfive/identity-core": "^1.30.0",
|
|
24
24
|
"@reachfive/zxcvbn": "1.0.0-alpha.2",
|
|
25
25
|
"buffer": "^6.0.3",
|
|
26
26
|
"char-info": "0.3.2",
|