feat: add 2FA toggle on login form

decred · Dec 18, 2020 · ab09084 · ab09084
1 parent 39d689d
commit ab09084
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/src/containers/User/Login/Form.jsx b/src/containers/User/Login/Form.jsx
@@ -1,4 +1,11 @@
-import { Button, Link as UILink, Text, TextInput, classNames } from "pi-ui";
+import {
+  Button,
+  Link as UILink,
+  Text,
+  TextInput,
+  classNames,
+  Toggle
+} from "pi-ui";
 import PropTypes from "prop-types";
 import React, { useCallback, useState } from "react";
 import { withRouter } from "react-router-dom";
@@ -41,6 +48,10 @@ const LoginForm = ({
     [onLogin, onLoggedIn]
   );
 
+  const handleToggleTotp = useCallback(() => setShowTotp(!showTotp), [
+    showTotp
+  ]);
+
   const [handleOpenModal, handleCloseModal] = useModalContext();
 
   const handleOpenPrivacyPolicyModal = () => {
@@ -113,6 +124,16 @@ const LoginForm = ({
               onBlur={handleBlur}
               error={touched.password && errors.password}
             />
+            <div className={styles.totpToggleWrapper}>
+              <Toggle
+                id="totp-toggle"
+                onToggle={handleToggleTotp}
+                toggled={showTotp}
+              />
+              <Text className={styles.totpToggleLabel}>
+                Two-Factor Authentication (2FA)
+              </Text>
+            </div>
 
             <VerifyTotp
               className={classNames(styles.totp, !showTotp && styles.hide)}

diff --git a/src/containers/User/Login/LoginForm.module.css b/src/containers/User/Login/LoginForm.module.css
@@ -15,3 +15,13 @@ span.createAccounTxt {
 .totpInput {
   margin-top: 0;
 }
+
+.totpToggleWrapper {
+  display: flex;
+  padding: 1rem 0 2rem;
+}
+
+.totpToggleLabel {
+  padding: 0.2rem 1rem 0;
+  color: var(--text-input-color) !important;
+}