1.0.59: copy to clipboard button now shows confirmation notification, MFA fix

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-libs",
-  "version": "1.0.57",
+  "version": "1.0.59",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-libs",
-      "version": "1.0.57",
+      "version": "1.0.59",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-libs",
-  "version": "1.0.57",
+  "version": "1.0.59",
   "main": "dist/index.js",
   "source": "src/index.js",
   "engines": {
@@ -19,10 +19,10 @@
     "libphonenumber-js": "^1.9.37",
     "lodash": "^4.17.21",
     "react-flow-renderer": "^9.6.6",
+    "react-i18next": "^11.11.0",
     "react-paginate": "^7.1.3",
     "react-phone-input-2": "^2.14.0",
     "react-router-dom": "^5.2.0",
-    "react-i18next": "^11.11.0",
     "react-select": "^4.3.1",
     "react-tooltip": "^4.2.21",
     "uuid": "^8.3.2"

src/components/CopyToClipboardButton/index.js

@@ -1,23 +1,27 @@
-import React, { useState } from 'react';
+import React from 'react';
 import CIcon from '@coreui/icons-react';
 import { cilClone } from '@coreui/icons';
 import PropTypes from 'prop-types';
 import { CButton, CPopover } from '@coreui/react';
+import { useToast } from 'contexts/ToastProvider';
 
 const CopyToClipboardButton = ({ t, content, size }) => {
-  const [result, setResult] = useState('');
+  const { addToast } = useToast();
 
   const copyToClipboard = () => {
     navigator.clipboard.writeText(content);
-    setResult(t('common.copied'));
+    addToast({
+      title: t('common.success'),
+      body: t('common.copied_to_clipboard'),
+      color: 'success',
+      autohide: true,
+    });
   };
 
   return (
     <CPopover content={t('common.copy_to_clipboard')}>
       <CButton onClick={copyToClipboard} size={size} className="py-0">
         <CIcon content={cilClone} />
-        {'   '}
-        {result || ''}
       </CButton>
     </CPopover>
   );

src/pages/LoginPage/AccountVerificationForm.js

@@ -35,7 +35,7 @@ const AccountVerificationForm = ({
   };
 
   return (
-    <CForm onKeyDown={(e) => onKeyDown(e, validateVerificationCode)}>
+    <CForm onKeyDown={(e) => onKeyDown(e, validateVerificationCode)} onSubmit={validate}>
       <h1>
         {t('login.account_verification')}
         <div className={styles.languageSwitcher}>
@@ -62,6 +62,7 @@ const AccountVerificationForm = ({
           color="primary"
           onClick={resendCode}
           disabled={sending || validating}
+          type="button"
         >
           {sending ? t('login.sending_ellipsis') : t('user.send_code_again')}
           <CSpinner hidden={!sending} color="light" component="span" size="sm" />
@@ -76,7 +77,13 @@ const AccountVerificationForm = ({
       </CRow>
       <CRow className="pt-2">
         <CCol>
-          <CButton color="primary" className="px-4" onClick={validate} disabled={validating}>
+          <CButton
+            color="primary"
+            className="px-4"
+            onClick={validate}
+            type="submit"
+            disabled={validating}
+          >
             {validating ? t('login.sending_ellipsis') : t('user.validate_phone')}
             <CSpinner hidden={!validating} color="light" component="span" size="sm" />
           </CButton>

src/pages/ProfilePage/EditMyProfile.js

@@ -236,6 +236,9 @@ const EditMyProfile = ({
         </CCol>
       </CRow>
       <CRow>
+        <CCol className="mt-2 text-left" xs={2}>
+          Security Retries: {localStorage.getItem('sec_retries') ?? 0}
+        </CCol>
         <CCol />
         <CCol xs={2} className="mt-2 text-right">
           <CLink