[totp] feat: set and verify tools

src/actions/api.js

@@ -10,7 +10,11 @@ import { clearStateLocalStorage } from "../lib/local_storage";
 import * as pki from "../lib/pki";
 import * as sel from "../selectors";
 import act from "./methods";
-import { PAYWALL_STATUS_PAID, DCC_SUPPORT_VOTE } from "../constants";
+import {
+  PAYWALL_STATUS_PAID,
+  DCC_SUPPORT_VOTE,
+  TOTP_DEFAULT_TYPE
+} from "../constants";
 
 export const onResetNewUser = act.RESET_NEW_USER;
 
@@ -218,11 +222,11 @@ export const onSearchUser = (query, isCMS) => (dispatch) => {
 // onLogin handles a user's login. If it is his first login on the app
 // after registering, his key will be saved under his email. If so, it
 // changes the storage key to his uuid.
-export const onLogin = ({ email, password }) =>
+export const onLogin = ({ email, password, code }) =>
   withCsrf((dispatch, _, csrf) => {
     dispatch(act.REQUEST_LOGIN({ email }));
     return api
-      .login(csrf, email, password)
+      .login(csrf, email, password, code)
       .then((response) => {
         dispatch(act.RECEIVE_LOGIN(response));
         const { userid, username } = response;
@@ -1531,3 +1535,31 @@ export const onSubmitDccComment = (currentUserID, token, comment, parentid) =>
         throw error;
       });
   });
+
+export const onSetTotp = (code = "", type = TOTP_DEFAULT_TYPE) =>
+  withCsrf((dispatch, _, csrf) => {
+    dispatch(act.REQUEST_SET_TOTP({}));
+    return api
+      .setTotp(csrf, type, code)
+      .then((response) => {
+        dispatch(act.RECEIVE_SET_TOTP(response));
+      })
+      .catch((e) => {
+        dispatch(act.RECEIVE_SET_TOTP(null, e));
+        throw e;
+      });
+  });
+
+export const onVerifyTotp = (code) =>
+  withCsrf((dispatch, _, csrf) => {
+    dispatch(act.REQUEST_VERIFY_TOTP({}));
+    return api
+      .verifyTotp(csrf, code)
+      .then((response) => {
+        dispatch(act.RECEIVE_VERIFY_TOTP(response));
+      })
+      .catch((e) => {
+        dispatch(act.RECEIVE_VERIFY_TOTP(null, e));
+        throw e;
+      });
+  });

src/actions/types.js

@@ -240,3 +240,9 @@ export const LOAD_DRAFT_DCCS = "LOAD_DRAFT_DCCS";
 
 export const REQUEST_EDIT_CMS_USER = "API_REQUEST_EDIT_CMS_USER";
 export const RECEIVE_EDIT_CMS_USER = "API_RECEIVE_EDIT_CMS_USER";
+
+export const REQUEST_SET_TOTP = "API_REQUEST_SET_TOTP";
+export const RECEIVE_SET_TOTP = "API_RECEIVE_SET_TOTP";
+
+export const REQUEST_VERIFY_TOTP = "API_REQUEST_VERIFY_TOTP";
+export const RECEIVE_VERIFY_TOTP = "API_RECEIVE_VERIFY_TOTP";

src/components/DigitsInput/DigitsInput.jsx

@@ -0,0 +1,94 @@
+import React, { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import { NumberInput, classNames } from "pi-ui";
+import styles from "./DigitsInput.module.css";
+
+const getDigitsArrayFromCode = (code = "", length) => {
+  let newDigits = code.split("").slice(0, length);
+  if (newDigits.length < length) {
+    const fillArray = Array(length - newDigits.length).fill("");
+    newDigits = [...newDigits, ...fillArray];
+  }
+  return newDigits;
+};
+
+const DigitsInput = ({ length, onChange, className, code, tabIndex }) => {
+  const [digits, setDigits] = useState(getDigitsArrayFromCode(code, length));
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef(null);
+
+  const handleChangeDigit = (e) => {
+    e && e.preventDefault();
+    const newCode = e.target.value.toString();
+    const numbersOnlyCode = newCode.replace(/^\D+/g, "");
+    onChange(getDigitsArrayFromCode(numbersOnlyCode, length).join(""));
+  };
+
+  useEffect(() => {
+    setDigits(getDigitsArrayFromCode(code, length));
+  }, [code, length]);
+
+  const onChangeDigit = (index) => {
+    const newDigits = [...digits];
+    newDigits[index] = "";
+    inputRef.current.selectionStart = index;
+    inputRef.current.selectionEnd = index + 1;
+    inputRef.current.focus();
+  };
+
+  return (
+    <>
+      <input
+        type="text"
+        className={styles.mainInput}
+        autoFocus
+        onChange={handleChangeDigit}
+        value={digits.join("")}
+        ref={inputRef}
+        onBlur={() => {
+          setFocused(false);
+        }}
+      />
+      <div
+        className={classNames(
+          className,
+          styles.digitsWrapper,
+          focused && styles.focusedInput
+        )}>
+        {digits.map((value, index) => {
+          return (
+            <NumberInput
+              id={`id-digit-${index}`}
+              key={`digit-${index}`}
+              defaultValue={value}
+              tabIndex={tabIndex}
+              onFocus={(e) => {
+                e && e.target && e.target.value
+                  ? onChangeDigit(index)
+                  : inputRef.current.focus();
+                setFocused(true);
+              }}
+            />
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+DigitsInput.propTypes = {
+  length: PropTypes.number,
+  onChange: PropTypes.func,
+  className: PropTypes.string,
+  code: PropTypes.string,
+  tabIndex: PropTypes.number
+};
+
+DigitsInput.defaultProps = {
+  tabIndex: 1,
+  length: 6,
+  onChange: () => {},
+  onFill: () => {}
+};
+
+export default DigitsInput;

src/components/DigitsInput/DigitsInput.module.css

@@ -0,0 +1,37 @@
+.digitsWrapper {
+  display: inline-block;
+}
+
+.digitsWrapper :first-child {
+  margin-top: 1rem;
+}
+
+.digitsWrapper > div {
+  margin-right: 2rem;
+}
+
+.digitsWrapper > div > input:hover {
+  border-bottom: 0.1rem solid var(--color-primary-dark);
+}
+
+/* Chrome, Safari, Edge, Opera */
+.digitsWrapper input::-webkit-outer-spin-button,
+.digitsWrapper input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+.digitsWrapper input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.focusedInput :first-child > input {
+  border-bottom: 0.1rem solid var(--color-primary);
+}
+
+.mainInput {
+  opacity: 0;
+  height: 0;
+  width: 0;
+}

src/components/DigitsInput/index.js

@@ -0,0 +1 @@
+export { default } from "./DigitsInput";

src/components/ModalConfirm.jsx

@@ -106,7 +106,7 @@ const ModalConfirm = ({
 
 ModalConfirm.propTypes = {
   title: PropTypes.string,
-  message: PropTypes.string,
+  message: PropTypes.node,
   show: PropTypes.bool,
   onClose: PropTypes.func,
   onSubmit: PropTypes.func,

src/constants.js

@@ -164,3 +164,7 @@ export const MONTHS_LABELS = [
   "Nov",
   "Dec"
 ];
+
+export const TOTP_CODE_LENGTH = 6;
+export const TOTP_DEFAULT_TYPE = 1;
+export const TOTP_MISSING_LOGIN_ERROR = 79;

src/containers/User/Detail/Detail.jsx

@@ -20,6 +20,7 @@ import Identity from "./Identity";
 import Preferences from "./Preferences";
 import ManageContractor from "./ManageContractor";
 import ProposalsOwned from "./ProposalsOwned";
+import Totp from "../Totp";
 import useModalContext from "src/hooks/utils/useModalContext";
 
 const getTabComponents = ({ user, ...rest }) => {
@@ -42,7 +43,8 @@ const getTabComponents = ({ user, ...rest }) => {
     [tabValues.MANAGE_DCC]: <ManageContractor userID={user.userid} {...rest} />,
     [tabValues.PROPOSALS_OWNED]: (
       <ProposalsOwned proposalsOwned={user.proposalsowned} />
-    )
+    ),
+    [tabValues.TOTP]: <Totp />
   };
   return mapTabValueToComponent;
 };
@@ -82,7 +84,7 @@ const UserDetail = ({
         (!isUserPageOwner || !ownsProposals)
       )
         return true;
-
+      if (tabLabel === tabValues.TOTP && !isUserPageOwner) return true;
       return false;
     };
     const filterByRecordType = (tabLabel) => {
@@ -112,7 +114,8 @@ const UserDetail = ({
       tabValues.INVOICES,
       tabValues.DRAFTS,
       tabValues.MANAGE_DCC,
-      tabValues.PROPOSALS_OWNED
+      tabValues.PROPOSALS_OWNED,
+      tabValues.TOTP
     ].filter((tab) => !isTabDisabled(tab) && filterByRecordType(tab));
   }, [
     isUserPageOwner,

src/containers/User/Detail/helpers.js

@@ -7,7 +7,8 @@ export const tabValues = {
   INVOICES: "Invoices",
   DRAFTS: "Drafts",
   MANAGE_DCC: "Manage Contractor",
-  PROPOSALS_OWNED: "Proposals Owned"
+  PROPOSALS_OWNED: "Proposals Owned",
+  TOTP: "Two-Factor Authentication"
 };
 
 /**