tg-core-components 5.5.1-bethard → 5.5.1-master

package/es/widgets/CashierAccordion/Payment/PaymentAccountParser.js

@@ -37,10 +37,4 @@ export var parseVenusPoint = function parseVenusPoint(account) {
   return {
     account: account.maskedAccount || account.account
   };
-};
-
-export var parseMifinity = function parseMifinity(account) {
-  return {
-    account: account.maskedAccount || account.account
-  };
 };

package/es/widgets/CashierAccordion/Withdraw/WithdrawWidget/index.js

@@ -17,7 +17,7 @@ import * as PaymentAccountForms from '../../Payment/PaymentAccountForms';
 import Money from '../../../../components/Money';
 import { matchProviderType, getPaymentForm } from '../../Payment';
 import marked from 'marked';
-import Input from '../../../../components/Input';
+import Input from '../../../../components/Deposit/TextInput';
 import MethodMinMax from '../../Payment/MethodMinMax';
 import Icon from '../../../../components/Icon';
 import DelayVisibility from '../../../../components/Deposit/DelayVisibility';
@@ -97,7 +97,7 @@ var WithdrawWidget = function (_PureComponent) {
 
 
       var accountExclusions = payments.filter(function (provider) {
-        return provider.accountSelection;
+        return provider.accountSelection || provider.accountSelectionWithdrawal;
       }).map(function (provider) {
         return provider.providerType.toUpperCase();
       });
@@ -184,7 +184,6 @@ var WithdrawWidget = function (_PureComponent) {
                   selectedMethod: selectedMethod,
                   onSelectMethod: _this2.onSelectMethod,
                   methodContent: function methodContent(method) {
-                    if (method.txType !== selectedMethod.txType) return null;
                     return React.createElement(
                       Fragment,
                       null,
@@ -201,21 +200,15 @@ var WithdrawWidget = function (_PureComponent) {
                         { className: 'custom-amount-and-submit' },
                         React.createElement(Input, {
                           pattern: '[0-9]*',
-                          required: true,
                           className: 'custom-amount',
                           name: 'amount',
                           type: 'number',
                           step: '0.01',
-                          label: translate({
+                          placeholder: translate({
                             id: 'label.amount'
                           }, intl),
-                          status: errors && errors.amount && errors.amount.length ? 'failure' : '',
-                          value: currentAmount,
-                          onChange: function onChange(e) {
-                            return _this2.setState({
-                              currentAmount: e.target.value
-                            });
-                          }
+                          showErrorText: false,
+                          showErrorIcon: errors && errors.amount && errors.amount.length > 0
                         }),
                         React.createElement(
                           Button,
@@ -239,10 +232,7 @@ var WithdrawWidget = function (_PureComponent) {
                       React.createElement(
                         'div',
                         { className: 'bonus-limit' },
-                        method && method.limit && React.createElement(MethodMinMax, {
-                          method: method,
-                          currency: currency
-                        })
+                        method && method.limit && React.createElement(MethodMinMax, { method: method, currency: currency })
                       )
                     );
                   }
@@ -294,8 +284,7 @@ var WithdrawWidget = function (_PureComponent) {
             render: function render(_ref3) {
               var handleSubmit = _ref3.handleSubmit,
                   values = _ref3.values,
-                  change = _ref3.change,
-                  form = _ref3.form;
+                  change = _ref3.change;
               return React.createElement(
                 Fragment,
                 null,
@@ -320,10 +309,7 @@ var WithdrawWidget = function (_PureComponent) {
                     React.createElement(
                       'div',
                       { className: 'account-details' },
-                      React.createElement(PaymentAccountForm, _extends({}, paymentAccountFormProps, {
-                        change: form.change,
-                        values: values
-                      }))
+                      React.createElement(PaymentAccountForm, paymentAccountFormProps)
                     ),
                     React.createElement(
                       Button,
@@ -385,7 +371,7 @@ var _initialiseProps = function _initialiseProps() {
         selectedAccount = _state2.selectedAccount;
 
     var formExists = !!PaymentAccountForms[getPaymentForm(selectedMethod)];
-    var skipFillInStep = ['skrill', 'bestpay', 'jeton', 'bankiban', 'bankintl', 'mifinity'];
+    var skipFillInStep = ['skrill', 'bestpay', 'jeton', 'bankiban', 'bankintl', 'ezeewallet', 'mifinity'];
 
     if (!formExists || selectedAccount.accountId && skipFillInStep.includes(selectedMethod.providerType.toLowerCase())) {
       return _this3.onSubmit({

package/es/widgets/ChangePassword/index.js

@@ -3,7 +3,6 @@ import compose from 'recompose/compose';
 import { injectIntl } from 'react-intl';
 import WithValidation from '../../lib/WithValidation';
 import Input from '../../components/Input';
-import Button from '../../components/Button';
 import require from '../../lib/WithValidation/rules/required';
 import password from '../../lib/WithValidation/rules/password';
 import match from '../../lib/WithValidation/rules/match';
@@ -14,57 +13,71 @@ var ChangePassword = function ChangePassword(_ref) {
   var errors = _ref.errors,
       intl = _ref.intl,
       onSubmit = _ref.onSubmit,
-      _onBlur = _ref.onBlur;
+      _onBlur = _ref.onBlur,
+      device = _ref.device;
+
+  var desktopLayout = device === 'Desktop' && __CLIENT__;
 
   return React.createElement(
     'form',
     { className: 'form', onSubmit: onSubmit },
     React.createElement(Input, {
-      label: translate({
+      className: 'layout-item',
+      title: translate({
         id: 'title.old_password',
         defaultMessage: 'Old password'
       }, intl),
+      placeholder: translate({ id: 'label.old_password' }, intl),
       type: 'password',
       name: 'CurrentPassword',
-      onBlur: function onBlur(e) {
-        return _onBlur('CurrentPassword', e.target.value);
+      onBlur: function onBlur(value) {
+        return _onBlur('CurrentPassword', value);
       },
-      status: errors.CurrentPassword && 'failure' || 'idle',
-      statusText: errors.CurrentPassword && translate({ id: errors.CurrentPassword }, intl),
+      error: errors.CurrentPassword && translate({ id: errors.CurrentPassword }, intl),
       autoComplete: 'current-password'
     }),
-    React.createElement(Input, {
-      label: translate({
-        id: 'title.new_password',
-        defaultMessage: 'New password'
-      }, intl),
-      type: 'password',
-      name: 'NewPassword',
-      onBlur: function onBlur(e) {
-        return _onBlur('NewPassword', e.target.value);
-      },
-      status: errors.NewPassword && 'failure' || 'idle',
-      statusText: errors.NewPassword && translate({ id: errors.NewPassword }, intl),
-      autoComplete: 'new-password'
-    }),
-    React.createElement(Input, {
-      label: translate({
-        id: 'title.confirm_password',
-        defaultMessage: 'Confirm password'
-      }, intl),
-      type: 'password',
-      name: 'confirm_password',
-      onBlur: function onBlur(e) {
-        return _onBlur('confirm_password', e.target.value);
-      },
-      status: errors.confirm_password && 'failure' || 'idle',
-      statusText: errors.confirm_password && translate({ id: errors.confirm_password }, intl),
-      autoComplete: 'new-password'
-    }),
     React.createElement(
-      Button,
-      { className: 'button primary wide', type: 'submit' },
-      translate({ id: 'action.button.submit_new_password' }, intl)
+      'div',
+      { className: 'layout-item password' },
+      React.createElement(Input, {
+        className: desktopLayout ? 'layout-item-6' : 'layout-item-12',
+        title: translate({
+          id: 'title.new_password',
+          defaultMessage: 'New password'
+        }, intl),
+        placeholder: translate({ id: 'label.new_password' }, intl),
+        type: 'password',
+        name: 'NewPassword',
+        onBlur: function onBlur(value) {
+          return _onBlur('NewPassword', value);
+        },
+        error: errors.NewPassword && translate({ id: errors.NewPassword }, intl),
+        autoComplete: 'new-password'
+      }),
+      React.createElement(Input, {
+        className: desktopLayout ? 'layout-item-6' : 'layout-item-12',
+        title: translate({
+          id: 'title.confirm_password',
+          defaultMessage: 'Confirm password'
+        }, intl),
+        placeholder: translate({ id: 'label.confirm_password' }, intl),
+        type: 'password',
+        name: 'confirm_password',
+        onBlur: function onBlur(value) {
+          return _onBlur('confirm_password', value);
+        },
+        error: errors.confirm_password && translate({ id: errors.confirm_password }, intl),
+        autoComplete: 'new-password'
+      })
+    ),
+    React.createElement(
+      'div',
+      { className: 'layout-item' },
+      React.createElement(
+        'button',
+        { className: 'button primary wide', type: 'submit' },
+        translate({ id: 'action.button.submit_new_password' }, intl)
+      )
     )
   );
 };
@@ -73,7 +86,7 @@ ChangePassword.propTypes = {
   /** The form input fields and content */
   children: PropTypes.any,
   /** The above title for each field */
-  label: PropTypes.string,
+  title: PropTypes.string,
   /** The name of each field */
   name: PropTypes.string,
   /** Array of validation errors where the error display depends on which invalid rule it breaks */
@@ -86,7 +99,7 @@ ChangePassword.propTypes = {
 
 ChangePassword.defaultProps = {
   children: '',
-  label: '',
+  title: '',
   name: '',
   error: [],
   onSubmit: Function,

package/es/widgets/HistoryWidget/index.js

@@ -99,28 +99,20 @@ var HistoryWidgetList = function (_React$Component) {
 
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = HistoryWidgetList.__proto__ || Object.getPrototypeOf(HistoryWidgetList)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       page: 1
-    }, _this.getFormattedDate = function (date) {
-      return React.createElement(FormattedDate, {
-        value: date,
-        year: 'numeric',
-        month: 'short',
-        day: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit',
-        second: '2-digit'
-      });
     }, _this.createListInfo = function (item, product, currency, isLoading) {
       if (isLoading) return [[React.createElement(SkeletonLine, { bold: true }), React.createElement(SkeletonLine, null)], [React.createElement(SkeletonLine, { bold: true }), React.createElement(SkeletonLine, null)]];
 
-      if (product === 'casino') return [[React.createElement(
-        'div',
-        null,
-        item.Game
-      ), React.createElement(
-        'div',
-        null,
-        getMessage(getByPath(item, 'Transactions[0].Status'))
-      )], [React.createElement(Money, { value: item.Win - item.Bet, currency: currency }), React.createElement(FormattedRelativeTime, selectUnit(new Date(item.StartTime + '+00:00')))]];else if (product === 'sportsbook') {
+      if (product === 'casino') {
+        return [[React.createElement(
+          'div',
+          null,
+          item.Game
+        ), React.createElement(
+          'div',
+          null,
+          getMessage(getByPath(item, 'Transactions[0].Status'))
+        )], [React.createElement(Money, { value: item.Win - item.Bet, currency: currency }), React.createElement(FormattedRelativeTime, selectUnit(new Date(item.StartTime + '+00:00')))]];
+      } else if (product === 'sportsbook') {
         var selection = item.Transactions[0].Description;
         var odds = item.Transactions[0].Odds;
         var l = item.Transactions.filter(function (t) {
@@ -136,29 +128,33 @@ var HistoryWidgetList = function (_React$Component) {
           null,
           getMessage(item.Settled ? 'settled' : 'pendling')
         )], [React.createElement(Money, { value: item.TotalWin - item.TotalWager, currency: currency }), React.createElement(FormattedRelativeTime, selectUnit(new Date(item.Created + '+00:00')))]];
-      } else if (product === 'fantasy') {
-        return [[React.createElement(
-          'div',
-          null,
-          React.createElement(Translate, { id: 'label.history.fantasy-id', defaultMessage: 'Id' }),
-          ' #',
-          item.TournamentId
-        ), React.createElement(
+      } else if (product === 'bingo') {
+        return [[React.createElement(Translate, {
+          tag: 'div'
+          // We use a dynamic key here since we don't know rooms and new once can be added.
+          , id: 'label.history.bingoroomid-' + item.RoomId
+        }), React.createElement(
           'div',
           null,
-          getMessage(item.Status === 'Default' ? 'initiated' : item.Status === 'Canceled' ? 'canceled' : 'completed')
-        )], [React.createElement(Money, { value: item.Win - (item.Bet + item.Rake), currency: currency }), React.createElement(FormattedRelativeTime, selectUnit(new Date(item.Created + '+00:00')))]];
+          getMessage(getByPath(item, 'Transactions[0].TransactionType'))
+        )], [React.createElement(Money, {
+          value: getByPath(item, 'Transactions[0].Amount'),
+          currency: currency
+        }), React.createElement(FormattedRelativeTime, selectUnit(new Date(item.Created + '+00:00')))]];
       }
 
       return [[React.createElement(
         'div',
         null,
-        getMessage(item.Method)
+        getMessage(item.Method + item.TransactionType)
       ), React.createElement(
         'div',
         null,
         getMessage(item.Status)
-      )], [React.createElement(Money, { value: item.Amount, currency: currency }), React.createElement(FormattedRelativeTime, selectUnit(new Date(item.Started + '+00:00')))]];
+      )], [React.createElement(Money, {
+        value: item.TransactionType === 'Withdraw' ? -item.Amount : item.Amount,
+        currency: currency
+      }), React.createElement(FormattedRelativeTime, selectUnit(new Date(item.Started + '+00:00')))]];
     }, _this.createListDetail = function (item, product, currency) {
       if (product === 'casino') {
         return [[React.createElement(
@@ -166,7 +162,15 @@ var HistoryWidgetList = function (_React$Component) {
           null,
           '#',
           item.RoundId
-        ), _this.getFormattedDate(item.StartTime)], [React.createElement(Translate, {
+        ), React.createElement(FormattedDate, {
+          value: item.StartTime,
+          year: 'numeric',
+          month: 'short',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit'
+        })], [React.createElement(Translate, {
           tag: 'div',
           id: 'label.history.bet',
           defaultMessage: 'Bet: {value}',
@@ -192,7 +196,15 @@ var HistoryWidgetList = function (_React$Component) {
           null,
           '#',
           item.Id
-        ), _this.getFormattedDate(item.Created), React.createElement(
+        ), React.createElement(FormattedDate, {
+          value: item.Created,
+          year: 'numeric',
+          month: 'short',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit'
+        }), React.createElement(
           'div',
           null,
           bets.map(function (b) {
@@ -217,27 +229,25 @@ var HistoryWidgetList = function (_React$Component) {
             value: React.createElement(Money, { value: item.TotalWin, currency: currency })
           }
         })]];
-      } else if (product === 'fantasy') {
+      } else if (product === 'bingo') {
         return [[React.createElement(
           'div',
           null,
           '#',
-          item.TournamentId
-        ), _this.getFormattedDate(item.Created)], [React.createElement(Translate, {
-          tag: 'div',
-          id: 'label.history.bet',
-          defaultMessage: 'Bet: {value}',
-          values: {
-            value: React.createElement(Money, { value: item.Bet + item.Rake, currency: currency })
-          }
-        }), React.createElement(Translate, {
-          tag: 'div',
-          id: 'label.history.win',
-          defaultMessage: 'Win: {value}',
-          values: {
-            value: React.createElement(Money, { value: item.Win, currency: currency })
-          }
-        })]];
+          item.Id
+        ), React.createElement(FormattedDate, {
+          value: item.Created,
+          year: 'numeric',
+          month: 'short',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit'
+        })], React.createElement(
+          'div',
+          null,
+          getMessage(getByPath(item, 'Transactions[0].Status'))
+        )];
       }
 
       return [[React.createElement(
@@ -245,7 +255,15 @@ var HistoryWidgetList = function (_React$Component) {
         null,
         '#',
         item.Id
-      ), _this.getFormattedDate(item.Started)]];
+      ), React.createElement(FormattedDate, {
+        value: item.Started,
+        year: 'numeric',
+        month: 'short',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+      })]];
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 

package/es/widgets/HistoryWidget/message.js

@@ -12,19 +12,19 @@ export var getMessage = function getMessage(key) {
     ZimplerDeposit: React.createElement(Translate, { id: 'label.history.ZimplerDeposit', defaultMessage: 'Zimpler' }),
     SiruDeposit: React.createElement(Translate, { id: 'label.history.SiruDeposit', defaultMessage: 'Siru' }),
     TrustlyDeposit: React.createElement(Translate, { id: 'label.history.TrustlyDeposit', defaultMessage: 'Trustly' }),
-    ZimplerWithdrawal: React.createElement(Translate, {
+    ZimplerWithdraw: React.createElement(Translate, {
       id: 'label.history.ZimplerWithdrawal',
       defaultMessage: 'Zimpler'
     }),
-    InteracWithdrawal: React.createElement(Translate, {
+    InteracWithdraw: React.createElement(Translate, {
       id: 'label.history.InteracWithdrawal',
       defaultMessage: 'Interac'
     }),
-    CreditcardWithdrawal: React.createElement(Translate, {
+    CreditcardWithdraw: React.createElement(Translate, {
       id: 'label.history.CreditcardWithdrawal',
       defaultMessage: 'Creditcard'
     }),
-    TrustlyWithdrawal: React.createElement(Translate, {
+    TrustlyWithdraw: React.createElement(Translate, {
       id: 'label.history.TrustlyWithdrawal',
       defaultMessage: 'Trustly'
     }),
@@ -33,11 +33,11 @@ export var getMessage = function getMessage(key) {
       id: 'label.history.PaysafecardDeposit',
       defaultMessage: 'Paysafecard'
     }),
-    AstroPayCardWithdrawal: React.createElement(Translate, {
+    AstroPayCardWithdraw: React.createElement(Translate, {
       id: 'label.history.AstroPayCardWithdrawal',
       defaultMessage: 'AstroPayCard'
     }),
-    InstadebitWithdrawal: React.createElement(Translate, {
+    InstadebitWithdraw: React.createElement(Translate, {
       id: 'label.history.InstadebitWithdrawal',
       defaultMessage: 'Instadebit'
     }),
@@ -55,27 +55,27 @@ export var getMessage = function getMessage(key) {
       id: 'label.history.MuchBetterDeposit',
       defaultMessage: 'MuchBetter'
     }),
-    EcoPayzWithdrawal: React.createElement(Translate, {
+    EcoPayzWithdraw: React.createElement(Translate, {
       id: 'label.history.EcoPayzWithdrawal',
       defaultMessage: 'EcoPayz'
     }),
-    NetellerWithdrawal: React.createElement(Translate, {
+    NetellerWithdraw: React.createElement(Translate, {
       id: 'label.history.NetellerWithdrawal',
       defaultMessage: 'Neteller'
     }),
     SkrillDeposit: React.createElement(Translate, { id: 'label.history.SkrillDeposit', defaultMessage: 'Skrill' }),
-    SkrillWithdrawal: React.createElement(Translate, { id: 'label.history.SkrillWithdrawal', defaultMessage: 'Skrill' }),
-    IDebitWithdrawal: React.createElement(Translate, { id: 'label.history.IDebitWithdrawal', defaultMessage: 'IDebit' }),
-    AstroPayBankWithdrawal: React.createElement(Translate, {
+    SkrillWithdraw: React.createElement(Translate, { id: 'label.history.SkrillWithdrawal', defaultMessage: 'Skrill' }),
+    IDebitWithdraw: React.createElement(Translate, { id: 'label.history.IDebitWithdrawal', defaultMessage: 'IDebit' }),
+    AstroPayBankWithdraw: React.createElement(Translate, {
       id: 'label.history.AstroPayBankWithdrawal',
       defaultMessage: 'AstroPayBank'
     }),
-    MuchBetterWithdrawal: React.createElement(Translate, {
+    MuchBetterWithdraw: React.createElement(Translate, {
       id: 'label.history.MuchBetterWithdrawal',
       defaultMessage: 'MuchBetter'
     }),
     SwishDeposit: React.createElement(Translate, { id: 'label.history.SwishDeposit', defaultMessage: 'Swish' }),
-    JetonWithdrawal: React.createElement(Translate, {
+    JetonWithdraw: React.createElement(Translate, {
       id: 'label.history.JetonWithdrawal',
       defaultMessage: 'JetonWithdrawal'
     }),
@@ -87,7 +87,7 @@ export var getMessage = function getMessage(key) {
       id: 'label.history.BestPayDeposit',
       defaultMessage: 'BestPayDeposit'
     }),
-    BestPayWithdrawal: React.createElement(Translate, {
+    BestPayWithdraw: React.createElement(Translate, {
       id: 'label.history.BestPayDeposit',
       defaultMessage: 'BestPayDeposit'
     }),
@@ -95,11 +95,11 @@ export var getMessage = function getMessage(key) {
       id: 'label.history.CryptoCurrencyDeposit',
       defaultMessage: 'CryptoCurrencyDeposit'
     }),
-    CryptoCurrencyWithdrawal: React.createElement(Translate, {
+    CryptoCurrencyWithdraw: React.createElement(Translate, {
       id: 'label.history.CryptoCurrencyWithdrawal',
       defaultMessage: 'CryptoCurrencyWithdrawal'
     }),
-    BankLocalWithdrawal: React.createElement(Translate, {
+    BankLocalWithdraw: React.createElement(Translate, {
       id: 'label.history.BankLocalWithdrawal',
       defaultMessage: 'BankLocalWithdrawal'
     }),
@@ -114,10 +114,7 @@ export var getMessage = function getMessage(key) {
       id: 'label.history.product-sportsbook',
       defaultMessage: 'Sportsbook'
     }),
-    fantasy: React.createElement(Translate, {
-      id: 'label.history.product-fantasy',
-      defaultMessage: 'Fantasy sports'
-    }),
+    bingo: React.createElement(Translate, { id: 'label.history.product-bingo', defaultMessage: 'Bingo' }),
 
     // Status
     initiated: React.createElement(Translate, {

package/es/widgets/RequestResetPassword/index.js

@@ -11,7 +11,6 @@ import compose from 'recompose/compose';
 import { injectIntl } from 'react-intl';
 import WithValidation from '../../lib/WithValidation';
 import Input from '../../components/Input';
-import Button from '../../components/Button';
 import require from '../../lib/WithValidation/rules/required';
 import marked from 'marked';
 import PropTypes from 'prop-types';
@@ -35,8 +34,7 @@ var RequestResetPassword = function (_Component) {
           errors = _props.errors,
           intl = _props.intl,
           onSubmit = _props.onSubmit,
-          _onBlur = _props.onBlur,
-          isLoading = _props.isLoading;
+          _onBlur = _props.onBlur;
 
 
       if (status == 'COMPLETE') {
@@ -47,22 +45,25 @@ var RequestResetPassword = function (_Component) {
         'form',
         { className: 'form', onSubmit: onSubmit },
         React.createElement(Input, {
-          label: translate({ id: 'label.username_or_email' }, intl),
+          className: 'layout-item send-email-input',
+          title: translate({ id: 'label.username_or_email' }, intl),
           type: 'text',
           name: 'UsernameOrEmail',
-          onBlur: function onBlur(e) {
-            return _onBlur('UsernameOrEmail', e.target.value);
+          onBlur: function onBlur(value) {
+            return _onBlur('UsernameOrEmail', value);
           },
-          status: errors.UsernameOrEmail && 'failure' || 'idle',
-          statusText: errors.UsernameOrEmail && translate({ id: errors.UsernameOrEmail }, intl)
+          error: errors.UsernameOrEmail && translate({ id: errors.UsernameOrEmail }, intl)
         }),
         React.createElement(
-          Button,
-          {
-            className: 'button primary wide',
-            type: 'submit',
-            isLoading: isLoading },
-          translate({ id: 'label.request_reset_password' }, intl)
+          'div',
+          { className: 'layout-item' },
+          React.createElement(
+            'button',
+            {
+              className: 'button primary request-reset-password-button',
+              type: 'submit' },
+            translate({ id: 'label.request_reset_password' }, intl)
+          )
         )
       );
     }

package/es/widgets/ResetPassword/index.js

@@ -11,11 +11,11 @@ import compose from 'recompose/compose';
 import { injectIntl } from 'react-intl';
 import WithValidation from '../../lib/WithValidation';
 import Input from '../../components/Input';
-import Button from '../../components/Button';
 import require from '../../lib/WithValidation/rules/required';
 import password from '../../lib/WithValidation/rules/password';
 import match from '../../lib/WithValidation/rules/match';
 import translate from '../../lib/utils/translate';
+import Button from '../../components/Button/index';
 
 import PropTypes from 'prop-types';
 
@@ -36,39 +36,43 @@ var ResetPassword = function (_Component) {
           intl = _props.intl,
           onSubmit = _props.onSubmit,
           _onBlur = _props.onBlur,
-          isLoading = _props.isLoading;
+          disabled = _props.disabled;
 
 
       return React.createElement(
         'form',
         { className: 'form', onSubmit: onSubmit },
         React.createElement(Input, {
-          label: translate({ id: 'label.new_password' }, intl),
+          className: 'layout-item',
+          placeholder: translate({ id: 'label.new_password' }, intl),
           type: 'password',
           name: 'NewPassword',
-          onBlur: function onBlur(e) {
-            return _onBlur('NewPassword', e.target.value);
+          onBlur: function onBlur(value) {
+            return _onBlur('NewPassword', value);
           },
-          status: errors.NewPassword && 'failure' || 'idle',
-          statusText: errors.NewPassword && translate({ id: errors.NewPassword }, intl)
+          error: errors.NewPassword && translate({ id: errors.NewPassword }, intl)
         }),
         React.createElement(Input, {
-          label: translate({ id: 'label.confirm_password' }, intl),
+          className: 'layout-item',
+          placeholder: translate({ id: 'label.confirm_password' }, intl),
           type: 'password',
           name: 'confirm_password',
-          onBlur: function onBlur(e) {
-            return _onBlur('confirm_password', e.target.value);
+          onBlur: function onBlur(value) {
+            return _onBlur('confirm_password', value);
           },
-          status: errors.confirm_password && 'failure' || 'idle',
-          statusText: errors.confirm_password && translate({ id: errors.confirm_password }, intl)
+          error: errors.confirm_password && translate({ id: errors.confirm_password }, intl)
         }),
         React.createElement(
-          Button,
-          {
-            className: 'button primary wide',
-            type: 'submit',
-            isLoading: isLoading },
-          translate({ id: 'label.reset_password' }, intl)
+          'div',
+          { className: 'layout-item' },
+          React.createElement(
+            Button,
+            {
+              isLoading: disabled,
+              className: 'button primary reset-password-button',
+              type: 'submit' },
+            translate({ id: 'label.reset_password' }, intl)
+          )
         )
       );
     }