-
Retry
+ state={methodState}
+ >
+
{icon}
+
+
+ Retry
+
- )
-}
+ );
+};
-export default PushNotificationMethod
+export default PushNotificationMethod;
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
icon: {
width: "64px",
height: "64px",
display: "inline-block",
- }
-}))
\ No newline at end of file
+ },
+}));
diff --git a/web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx b/web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx
index 7218f1762..212a3dcc8 100644
--- a/web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx
+++ b/web/src/views/LoginPortal/SecondFactor/SecondFactorForm.tsx
@@ -1,26 +1,28 @@
import React, { useState, useEffect } from "react";
+
import { Grid, makeStyles, Button } from "@material-ui/core";
-import MethodSelectionDialog from "./MethodSelectionDialog";
-import { SecondFactorMethod } from "../../../models/Methods";
import { useHistory, Switch, Route, Redirect } from "react-router";
-import LoginLayout from "../../../layouts/LoginLayout";
+import u2fApi from "u2f-api";
+
import { useNotifications } from "../../../hooks/NotificationsContext";
+import LoginLayout from "../../../layouts/LoginLayout";
+import { Configuration } from "../../../models/Configuration";
+import { SecondFactorMethod } from "../../../models/Methods";
+import { UserInfo } from "../../../models/UserInfo";
import {
- initiateTOTPRegistrationProcess,
- initiateU2FRegistrationProcess
-} from "../../../services/RegisterDevice";
-import SecurityKeyMethod from "./SecurityKeyMethod";
+ LogoutRoute as SignOutRoute,
+ SecondFactorTOTPRoute,
+ SecondFactorPushRoute,
+ SecondFactorU2FRoute,
+ SecondFactorRoute,
+} from "../../../Routes";
+import { initiateTOTPRegistrationProcess, initiateU2FRegistrationProcess } from "../../../services/RegisterDevice";
+import { AuthenticationLevel } from "../../../services/State";
+import { setPreferred2FAMethod } from "../../../services/UserPreferences";
+import MethodSelectionDialog from "./MethodSelectionDialog";
import OneTimePasswordMethod from "./OneTimePasswordMethod";
import PushNotificationMethod from "./PushNotificationMethod";
-import {
- LogoutRoute as SignOutRoute, SecondFactorTOTPRoute,
- SecondFactorPushRoute, SecondFactorU2FRoute, SecondFactorRoute
-} from "../../../Routes";
-import { setPreferred2FAMethod } from "../../../services/UserPreferences";
-import { UserInfo } from "../../../models/UserInfo";
-import { Configuration } from "../../../models/Configuration";
-import u2fApi from "u2f-api";
-import { AuthenticationLevel } from "../../../services/State";
+import SecurityKeyMethod from "./SecurityKeyMethod";
const EMAIL_SENT_NOTIFICATION = "An email has been sent to your address to complete the process.";
@@ -46,7 +48,8 @@ const SecondFactorForm = function (props: Props) {
useEffect(() => {
u2fApi.ensureSupport().then(
() => setU2fSupported(true),
- () => console.error("U2F not supported"));
+ () => console.error("U2F not supported"),
+ );
}, [setU2fSupported]);
const initiateRegistration = (initiateRegistrationFunc: () => Promise
) => {
@@ -63,12 +66,12 @@ const SecondFactorForm = function (props: Props) {
createErrorNotification("There was a problem initiating the registration process");
}
setRegistrationInProgress(false);
- }
- }
+ };
+ };
const handleMethodSelectionClick = () => {
setMethodSelectionOpen(true);
- }
+ };
const handleMethodSelected = async (method: SecondFactorMethod) => {
try {
@@ -79,23 +82,21 @@ const SecondFactorForm = function (props: Props) {
console.error(err);
createErrorNotification("There was an issue updating preferred second factor method");
}
- }
+ };
const handleLogoutClick = () => {
history.push(SignOutRoute);
- }
+ };
return (
-
+
setMethodSelectionOpen(false)}
- onClick={handleMethodSelected} />
+ onClick={handleMethodSelected}
+ />
@@ -116,8 +117,9 @@ const SecondFactorForm = function (props: Props) {
registered={props.userInfo.has_totp}
totp_period={props.configuration.totp_period}
onRegisterClick={initiateRegistration(initiateTOTPRegistrationProcess)}
- onSignInError={err => createErrorNotification(err.message)}
- onSignInSuccess={props.onAuthenticationSuccess} />
+ onSignInError={(err) => createErrorNotification(err.message)}
+ onSignInSuccess={props.onAuthenticationSuccess}
+ />
createErrorNotification(err.message)}
- onSignInSuccess={props.onAuthenticationSuccess} />
+ onSignInError={(err) => createErrorNotification(err.message)}
+ onSignInSuccess={props.onAuthenticationSuccess}
+ />
createErrorNotification(err.message)}
- onSignInSuccess={props.onAuthenticationSuccess} />
+ onSignInError={(err) => createErrorNotification(err.message)}
+ onSignInSuccess={props.onAuthenticationSuccess}
+ />
- )
-}
+ );
+};
-export default SecondFactorForm
+export default SecondFactorForm;
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
methodContainer: {
border: "1px solid #d6d6d6",
borderRadius: "10px",
@@ -156,4 +160,4 @@ const useStyles = makeStyles(theme => ({
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
},
-}))
+}));
diff --git a/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx b/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx
index 97a4e22b0..b8c825e94 100644
--- a/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx
+++ b/web/src/views/LoginPortal/SecondFactor/SecurityKeyMethod.tsx
@@ -1,17 +1,19 @@
import React, { useCallback, useEffect, useState, Fragment } from "react";
-import MethodContainer, { State as MethodContainerState } from "./MethodContainer";
+
import { makeStyles, Button, useTheme } from "@material-ui/core";
-import { initiateU2FSignin, completeU2FSignin } from "../../../services/SecurityKey";
-import u2fApi from "u2f-api";
-import { useRedirectionURL } from "../../../hooks/RedirectionURL";
-import { useIsMountedRef } from "../../../hooks/Mounted";
-import { useTimer } from "../../../hooks/Timer";
-import LinearProgressBar from "../../../components/LinearProgressBar";
-import FingerTouchIcon from "../../../components/FingerTouchIcon";
-import FailureIcon from "../../../components/FailureIcon";
-import IconWithContext from "./IconWithContext";
import { CSSProperties } from "@material-ui/styles";
+import u2fApi from "u2f-api";
+
+import FailureIcon from "../../../components/FailureIcon";
+import FingerTouchIcon from "../../../components/FingerTouchIcon";
+import LinearProgressBar from "../../../components/LinearProgressBar";
+import { useIsMountedRef } from "../../../hooks/Mounted";
+import { useRedirectionURL } from "../../../hooks/RedirectionURL";
+import { useTimer } from "../../../hooks/Timer";
+import { initiateU2FSignin, completeU2FSignin } from "../../../services/SecurityKey";
import { AuthenticationLevel } from "../../../services/State";
+import IconWithContext from "./IconWithContext";
+import MethodContainer, { State as MethodContainerState } from "./MethodContainer";
export enum State {
WaitTouch = 1,
@@ -35,7 +37,7 @@ const SecurityKeyMethod = function (props: Props) {
const style = useStyles();
const redirectionURL = useRedirectionURL();
const mounted = useIsMountedRef();
- const [timerPercent, triggerTimer,] = useTimer(signInTimeout * 1000 - 500);
+ const [timerPercent, triggerTimer] = useTimer(signInTimeout * 1000 - 500);
const { onSignInSuccess, onSignInError } = props;
/* eslint-disable react-hooks/exhaustive-deps */
@@ -61,7 +63,7 @@ const SecurityKeyMethod = function (props: Props) {
challenge: signRequest.challenge,
keyHandle: r.keyHandle,
version: r.version,
- })
+ });
}
const signResponse = await u2fApi.sign(signRequests, signInTimeout);
// If the request was initiated and the user changed 2FA method in the meantime,
@@ -79,9 +81,19 @@ const SecurityKeyMethod = function (props: Props) {
onSignInErrorCallback(new Error("Failed to initiate security key sign in process"));
setState(State.Failure);
}
- }, [onSignInSuccessCallback, onSignInErrorCallback, redirectionURL, mounted, triggerTimer, props.authenticationLevel, props.registered]);
+ }, [
+ onSignInSuccessCallback,
+ onSignInErrorCallback,
+ redirectionURL,
+ mounted,
+ triggerTimer,
+ props.authenticationLevel,
+ props.registered,
+ ]);
- useEffect(() => { doInitiateSignIn() }, [doInitiateSignIn]);
+ useEffect(() => {
+ doInitiateSignIn();
+ }, [doInitiateSignIn]);
let methodState = MethodContainerState.METHOD;
if (props.authenticationLevel === AuthenticationLevel.TwoFactor) {
@@ -96,20 +108,21 @@ const SecurityKeyMethod = function (props: Props) {
title="Security Key"
explanation="Touch the token of your security key"
state={methodState}
- onRegisterClick={props.onRegisterClick}>
+ onRegisterClick={props.onRegisterClick}
+ >
- )
-}
+ );
+};
-export default SecurityKeyMethod
+export default SecurityKeyMethod;
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
icon: {
display: "inline-block",
- }
+ },
}));
interface IconProps {
@@ -125,22 +138,32 @@ function Icon(props: IconProps) {
const progressBarStyle: CSSProperties = {
marginTop: theme.spacing(),
- }
+ };
- const touch = Retry }
- className={state === State.Failure ? undefined : "hidden"} />
+ const failure = (
+
+ Retry
+
+ }
+ className={state === State.Failure ? undefined : "hidden"}
+ />
+ );
return (
{touch}
{failure}
- )
+ );
}
diff --git a/web/src/views/LoginPortal/SignOut/SignOut.tsx b/web/src/views/LoginPortal/SignOut/SignOut.tsx
index 056ac5de5..b44a4b73a 100644
--- a/web/src/views/LoginPortal/SignOut/SignOut.tsx
+++ b/web/src/views/LoginPortal/SignOut/SignOut.tsx
@@ -1,14 +1,16 @@
import React, { useEffect, useCallback, useState } from "react";
-import LoginLayout from "../../../layouts/LoginLayout";
-import { useNotifications } from "../../../hooks/NotificationsContext";
-import { signOut } from "../../../services/SignOut";
+
import { Typography, makeStyles } from "@material-ui/core";
import { Redirect } from "react-router";
-import { FirstFactorRoute } from "../../../Routes";
-import { useRedirectionURL } from "../../../hooks/RedirectionURL";
-import { useIsMountedRef } from "../../../hooks/Mounted";
-export interface Props { }
+import { useIsMountedRef } from "../../../hooks/Mounted";
+import { useNotifications } from "../../../hooks/NotificationsContext";
+import { useRedirectionURL } from "../../../hooks/RedirectionURL";
+import LoginLayout from "../../../layouts/LoginLayout";
+import { FirstFactorRoute } from "../../../Routes";
+import { signOut } from "../../../services/SignOut";
+
+export interface Props {}
const SignOut = function (props: Props) {
const mounted = useIsMountedRef();
@@ -33,29 +35,29 @@ const SignOut = function (props: Props) {
}
}, [createErrorNotification, setTimedOut, mounted]);
- useEffect(() => { doSignOut() }, [doSignOut]);
+ useEffect(() => {
+ doSignOut();
+ }, [doSignOut]);
if (timedOut) {
if (redirectionURL) {
window.location.href = redirectionURL;
} else {
- return
-
- You're being signed out and redirected...
-
+ You're being signed out and redirected...
- )
-}
+ );
+};
-export default SignOut
+export default SignOut;
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
typo: {
padding: theme.spacing(),
- }
-}))
\ No newline at end of file
+ },
+}));
diff --git a/web/src/views/ResetPassword/ResetPasswordStep1.tsx b/web/src/views/ResetPassword/ResetPasswordStep1.tsx
index 2709cb8c7..97e52f39e 100644
--- a/web/src/views/ResetPassword/ResetPasswordStep1.tsx
+++ b/web/src/views/ResetPassword/ResetPasswordStep1.tsx
@@ -1,11 +1,13 @@
import React, { useState } from "react";
-import LoginLayout from "../../layouts/LoginLayout";
+
import { Grid, Button, makeStyles } from "@material-ui/core";
-import { useNotifications } from "../../hooks/NotificationsContext";
import { useHistory } from "react-router";
-import { initiateResetPasswordProcess } from "../../services/ResetPassword";
-import { FirstFactorRoute } from "../../Routes";
+
import FixedTextField from "../../components/FixedTextField";
+import { useNotifications } from "../../hooks/NotificationsContext";
+import LoginLayout from "../../layouts/LoginLayout";
+import { FirstFactorRoute } from "../../Routes";
+import { initiateResetPasswordProcess } from "../../services/ResetPassword";
const ResetPasswordStep1 = function () {
const style = useStyles();
@@ -26,15 +28,15 @@ const ResetPasswordStep1 = function () {
} catch (err) {
createErrorNotification("There was an issue initiating the password reset process.");
}
- }
+ };
const handleResetClick = () => {
doInitiateResetPasswordProcess();
- }
+ };
const handleCancelClick = () => {
history.push(FirstFactorRoute);
- }
+ };
return (
@@ -49,19 +51,17 @@ const ResetPasswordStep1 = function () {
value={username}
onChange={(e) => setUsername(e.target.value)}
onKeyPress={(ev) => {
- if (ev.key === 'Enter') {
+ if (ev.key === "Enter") {
doInitiateResetPasswordProcess();
ev.preventDefault();
}
- }} />
+ }}
+ />
- Reset
+
+ Reset
+
Cancel
+ onClick={handleCancelClick}
+ >
+ Cancel
+
- )
-}
+ );
+};
-export default ResetPasswordStep1
+export default ResetPasswordStep1;
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
root: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
},
-}))
\ No newline at end of file
+}));
diff --git a/web/src/views/ResetPassword/ResetPasswordStep2.tsx b/web/src/views/ResetPassword/ResetPasswordStep2.tsx
index 43c4b8a7f..af3dc5b7a 100644
--- a/web/src/views/ResetPassword/ResetPasswordStep2.tsx
+++ b/web/src/views/ResetPassword/ResetPasswordStep2.tsx
@@ -1,13 +1,15 @@
import React, { useState, useCallback, useEffect } from "react";
-import LoginLayout from "../../layouts/LoginLayout";
-import classnames from "classnames";
+
import { Grid, Button, makeStyles } from "@material-ui/core";
-import { useNotifications } from "../../hooks/NotificationsContext";
+import classnames from "classnames";
import { useHistory, useLocation } from "react-router";
-import { completeResetPasswordProcess, resetPassword } from "../../services/ResetPassword";
-import { FirstFactorRoute } from "../../Routes";
-import { extractIdentityToken } from "../../utils/IdentityToken";
+
import FixedTextField from "../../components/FixedTextField";
+import { useNotifications } from "../../hooks/NotificationsContext";
+import LoginLayout from "../../layouts/LoginLayout";
+import { FirstFactorRoute } from "../../Routes";
+import { completeResetPasswordProcess, resetPassword } from "../../services/ResetPassword";
+import { extractIdentityToken } from "../../utils/IdentityToken";
const ResetPasswordStep2 = function () {
const style = useStyles();
@@ -36,8 +38,9 @@ const ResetPasswordStep2 = function () {
setFormDisabled(false);
} catch (err) {
console.error(err);
- createErrorNotification("There was an issue completing the process. " +
- "The verification token might have expired.");
+ createErrorNotification(
+ "There was an issue completing the process. The verification token might have expired.",
+ );
setFormDisabled(true);
}
}, [processToken, createErrorNotification]);
@@ -54,11 +57,11 @@ const ResetPasswordStep2 = function () {
if (password2 === "") {
setErrorPassword2(true);
}
- return
+ return;
}
if (password1 !== password2) {
setErrorPassword1(true);
- setErrorPassword2(true)
+ setErrorPassword2(true);
createErrorNotification("Passwords do not match.");
return;
}
@@ -76,13 +79,11 @@ const ResetPasswordStep2 = function () {
createErrorNotification("There was an issue resetting the password.");
}
}
- }
+ };
- const handleResetClick = () =>
- doResetPassword();
+ const handleResetClick = () => doResetPassword();
- const handleCancelClick = () =>
- history.push(FirstFactorRoute);
+ const handleCancelClick = () => history.push(FirstFactorRoute);
return (
@@ -95,9 +96,10 @@ const ResetPasswordStep2 = function () {
type="password"
value={password1}
disabled={formDisabled}
- onChange={e => setPassword1(e.target.value)}
+ onChange={(e) => setPassword1(e.target.value)}
error={errorPassword1}
- className={classnames(style.fullWidth)} />
+ className={classnames(style.fullWidth)}
+ />
setPassword2(e.target.value)}
+ onChange={(e) => setPassword2(e.target.value)}
error={errorPassword2}
onKeyPress={(ev) => {
- if (ev.key === 'Enter') {
+ if (ev.key === "Enter") {
doResetPassword();
ev.preventDefault();
}
}}
- className={classnames(style.fullWidth)} />
+ className={classnames(style.fullWidth)}
+ />
Reset
+ className={style.fullWidth}
+ >
+ Reset
+
Cancel
+ className={style.fullWidth}
+ >
+ Cancel
+
- )
-}
+ );
+};
-export default ResetPasswordStep2
+export default ResetPasswordStep2;
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme) => ({
root: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
},
fullWidth: {
width: "100%",
- }
-}))
\ No newline at end of file
+ },
+}));
diff --git a/web/types/index.d.ts b/web/types/index.d.ts
index 85e730f8e..74d1869b4 100644
--- a/web/types/index.d.ts
+++ b/web/types/index.d.ts
@@ -1 +1 @@
-///