From 689fd7cb954afd5eaeab49e122cdd2ee86bc6c82 Mon Sep 17 00:00:00 2001 From: Amir Zarrinkafsh Date: Sat, 2 Jan 2021 21:58:24 +1100 Subject: [PATCH] [CI] Add linting option for frontend and enforce styling (#1565) We now extend the default Eslint configuration and enforce styling with prettier for all of our frontend code. --- .buildkite/hooks/pre-command | 4 + .reviewdog.yml | 4 + web/.eslintrc.js | 46 ++++ web/.prettierrc.js | 9 + web/package.json | 8 + web/src/App.test.tsx | 12 +- web/src/App.tsx | 49 ++--- web/src/Routes.ts | 3 +- web/src/components/AppStoreBadges.test.tsx | 15 +- web/src/components/AppStoreBadges.tsx | 14 +- .../ColoredSnackbarContent.test.tsx | 24 ++- web/src/components/ColoredSnackbarContent.tsx | 29 +-- web/src/components/FailureIcon.test.tsx | 8 +- web/src/components/FailureIcon.tsx | 15 +- web/src/components/FingerTouchIcon.test.tsx | 8 +- web/src/components/FingerTouchIcon.tsx | 44 ++-- web/src/components/FixedTextField.test.tsx | 8 +- web/src/components/FixedTextField.tsx | 25 ++- web/src/components/InformationIcon.test.tsx | 8 +- web/src/components/InformationIcon.tsx | 15 +- web/src/components/LinearProgressBar.test.tsx | 8 +- web/src/components/LinearProgressBar.tsx | 16 +- web/src/components/NotificationBar.test.tsx | 10 +- web/src/components/NotificationBar.tsx | 16 +- web/src/components/PieChartIcon.test.tsx | 8 +- web/src/components/PieChartIcon.tsx | 15 +- .../components/PushNotificationIcon.test.tsx | 8 +- web/src/components/PushNotificationIcon.tsx | 76 ++++--- web/src/components/SuccessIcon.test.tsx | 8 +- web/src/components/SuccessIcon.tsx | 11 +- web/src/components/TimerIcon.test.tsx | 8 +- web/src/components/TimerIcon.tsx | 22 +- web/src/constants.ts | 3 +- web/src/hooks/Configuration.ts | 4 +- web/src/hooks/IntermittentClass.ts | 5 +- web/src/hooks/Mounted.ts | 6 +- web/src/hooks/NotificationsContext.ts | 25 ++- web/src/hooks/RedirectionURL.ts | 6 +- web/src/hooks/RemoteCall.ts | 17 +- web/src/hooks/State.ts | 2 +- web/src/hooks/Timer.ts | 12 +- web/src/hooks/UserInfo.ts | 2 +- web/src/index.tsx | 16 +- web/src/layouts/LoginLayout.tsx | 44 ++-- web/src/models/Configuration.ts | 2 +- web/src/models/Methods.ts | 3 +- web/src/models/Notifications.ts | 2 +- web/src/react-app-env.d.ts | 2 +- web/src/serviceWorker.ts | 204 +++++++++--------- web/src/services/Api.ts | 11 +- web/src/services/Client.ts | 3 +- web/src/services/Configuration.ts | 8 +- web/src/services/FirstFactor.ts | 13 +- web/src/services/OneTimePassword.ts | 4 +- web/src/services/PushNotification.ts | 4 +- web/src/services/RegisterDevice.ts | 34 +-- web/src/services/ResetPassword.ts | 3 +- web/src/services/SecurityKey.ts | 19 +- web/src/services/SignIn.ts | 3 +- web/src/services/SignOut.ts | 4 +- web/src/services/State.ts | 6 +- web/src/services/UserPreferences.ts | 9 +- web/src/setupTests.js | 4 +- web/src/utils/AssetPath.ts | 6 +- web/src/utils/BasePath.ts | 2 +- web/src/utils/Configuration.ts | 16 +- web/src/utils/IdentityToken.ts | 6 +- .../RegisterOneTimePassword.tsx | 153 ++++++------- .../RegisterSecurityKey.tsx | 47 ++-- web/src/views/LoadingPage/LoadingPage.tsx | 7 +- web/src/views/LoginPortal/Authenticated.tsx | 18 +- .../AuthenticatedView/AuthenticatedView.tsx | 21 +- .../FirstFactor/FirstFactorForm.tsx | 90 ++++---- web/src/views/LoginPortal/LoginPortal.tsx | 67 +++--- .../SecondFactor/IconWithContext.tsx | 19 +- .../SecondFactor/MethodContainer.tsx | 53 +++-- .../SecondFactor/MethodSelectionDialog.tsx | 94 +++++--- .../LoginPortal/SecondFactor/OTPDial.tsx | 40 ++-- .../SecondFactor/OneTimePasswordMethod.tsx | 34 +-- .../SecondFactor/PushNotificationMethod.tsx | 45 ++-- .../SecondFactor/SecondFactorForm.tsx | 80 +++---- .../SecondFactor/SecurityKeyMethod.tsx | 83 ++++--- web/src/views/LoginPortal/SignOut/SignOut.tsx | 38 ++-- .../ResetPassword/ResetPasswordStep1.tsx | 45 ++-- .../ResetPassword/ResetPasswordStep2.tsx | 65 +++--- web/types/index.d.ts | 2 +- web/types/react-otp-input/index.d.ts | 3 +- web/yarn.lock | 45 ++++ 88 files changed, 1197 insertions(+), 916 deletions(-) create mode 100644 web/.eslintrc.js create mode 100644 web/.prettierrc.js diff --git a/.buildkite/hooks/pre-command b/.buildkite/hooks/pre-command index 0c7cf6da3..2a0229306 100755 --- a/.buildkite/hooks/pre-command +++ b/.buildkite/hooks/pre-command @@ -2,6 +2,10 @@ set +u +if [[ $BUILDKITE_LABEL == ":service_dog: Linting" ]]; then + cd web && yarn install && cd ../ +fi + if [[ $BUILDKITE_LABEL =~ ":selenium:" ]]; then DEFAULT_ARCH=coverage echo "--- :docker: Extract, load and tag build container" diff --git a/.reviewdog.yml b/.reviewdog.yml index 68f7417da..11ab15ca2 100644 --- a/.reviewdog.yml +++ b/.reviewdog.yml @@ -5,4 +5,8 @@ runner: - '%E%f:%l:%c: %m' - '%E%f:%l: %m' - '%C%.%#' + level: error + eslint: + cmd: cd web && eslint -f rdjson '*/**/*.{js,ts,tsx}' + format: rdjson level: error \ No newline at end of file diff --git a/web/.eslintrc.js b/web/.eslintrc.js new file mode 100644 index 000000000..26b880463 --- /dev/null +++ b/web/.eslintrc.js @@ -0,0 +1,46 @@ +module.exports = { + "parser": "@typescript-eslint/parser", + "parserOptions": { + "project": "tsconfig.json" + }, + "ignorePatterns": "build/*", + "settings": { + "import/resolver": { + "typescript": {} + } + }, + "extends": [ + "react-app", + "plugin:import/errors", + "plugin:import/warnings", + "prettier/@typescript-eslint", + "plugin:prettier/recommended" + ], + "rules": { + "import/order": [ + "error", + { + "groups": [ + "builtin", + "external", + "internal" + ], + "pathGroups": [ + { + "pattern": "react", + "group": "external", + "position": "before" + } + ], + "pathGroupsExcludedImportTypes": [ + "react" + ], + "newlines-between": "always", + "alphabetize": { + "order": "asc", + "caseInsensitive": true + } + } + ] + } +}; \ No newline at end of file diff --git a/web/.prettierrc.js b/web/.prettierrc.js new file mode 100644 index 000000000..e0ac89fca --- /dev/null +++ b/web/.prettierrc.js @@ -0,0 +1,9 @@ +module.exports = { + printWidth: 120, + tabWidth: 4, + bracketSpacing: true, + jsxBracketSameLine: false, + semi: true, + singleQuote: false, + trailingComma: "all" +}; \ No newline at end of file diff --git a/web/package.json b/web/package.json index d566eda97..bf392f6e9 100644 --- a/web/package.json +++ b/web/package.json @@ -27,6 +27,10 @@ "classnames": "^2.2.6", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", + "eslint-config-prettier": "^7.1.0", + "eslint-import-resolver-typescript": "^2.3.0", + "eslint-plugin-prettier": "^3.3.0", + "prettier": "^2.2.1", "qrcode.react": "^1.0.1", "query-string": "^6.13.8", "react": "^16.14.0", @@ -43,6 +47,7 @@ "scripts": { "start": "craco start", "build": "react-scripts build", + "lint": "eslint '*/**/*.{js,ts,tsx}' --fix", "coverage": "craco build", "test": "react-scripts test --coverage --no-cache", "report": "nyc report -r clover -r json -r lcov -r text", @@ -62,5 +67,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "eslint-formatter-rdjson": "^1.0.3" } } diff --git a/web/src/App.test.tsx b/web/src/App.test.tsx index 2e29af42b..67a662c24 100644 --- a/web/src/App.test.tsx +++ b/web/src/App.test.tsx @@ -1,7 +1,9 @@ -import React from 'react'; -import { shallow } from "enzyme"; -import App from './App'; +import React from "react"; -it('renders without crashing', () => { - shallow(); +import { shallow } from "enzyme"; + +import App from "./App"; + +it("renders without crashing", () => { + shallow(); }); diff --git a/web/src/App.tsx b/web/src/App.tsx index 07bdcaf22..5cf7b2744 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -1,26 +1,29 @@ -import React, { useState } from 'react'; +import React, { useState } from "react"; + +import { config as faConfig } from "@fortawesome/fontawesome-svg-core"; +import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom"; + +import NotificationBar from "./components/NotificationBar"; +import NotificationsContext from "./hooks/NotificationsContext"; +import { Notification } from "./models/Notifications"; import { - BrowserRouter as Router, Route, Switch, Redirect -} from "react-router-dom"; -import ResetPasswordStep1 from './views/ResetPassword/ResetPasswordStep1'; -import ResetPasswordStep2 from './views/ResetPassword/ResetPasswordStep2'; -import RegisterSecurityKey from './views/DeviceRegistration/RegisterSecurityKey'; -import RegisterOneTimePassword from './views/DeviceRegistration/RegisterOneTimePassword'; -import { - FirstFactorRoute, ResetPasswordStep2Route, - ResetPasswordStep1Route, RegisterSecurityKeyRoute, + FirstFactorRoute, + ResetPasswordStep2Route, + ResetPasswordStep1Route, + RegisterSecurityKeyRoute, RegisterOneTimePasswordRoute, LogoutRoute, } from "./Routes"; -import LoginPortal from './views/LoginPortal/LoginPortal'; -import NotificationsContext from './hooks/NotificationsContext'; -import { Notification } from './models/Notifications'; -import NotificationBar from './components/NotificationBar'; -import SignOut from './views/LoginPortal/SignOut/SignOut'; -import { getRememberMe, getResetPassword } from './utils/Configuration'; -import '@fortawesome/fontawesome-svg-core/styles.css' -import { config as faConfig } from '@fortawesome/fontawesome-svg-core'; -import { getBasePath } from './utils/BasePath'; +import { getBasePath } from "./utils/BasePath"; +import { getRememberMe, getResetPassword } from "./utils/Configuration"; +import RegisterOneTimePassword from "./views/DeviceRegistration/RegisterOneTimePassword"; +import RegisterSecurityKey from "./views/DeviceRegistration/RegisterSecurityKey"; +import LoginPortal from "./views/LoginPortal/LoginPortal"; +import SignOut from "./views/LoginPortal/SignOut/SignOut"; +import ResetPasswordStep1 from "./views/ResetPassword/ResetPasswordStep1"; +import ResetPasswordStep2 from "./views/ResetPassword/ResetPasswordStep2"; + +import "@fortawesome/fontawesome-svg-core/styles.css"; faConfig.autoAddCss = false; @@ -28,7 +31,7 @@ const App: React.FC = () => { const [notification, setNotification] = useState(null as Notification | null); return ( - + setNotification(null)} /> @@ -48,9 +51,7 @@ const App: React.FC = () => { - + @@ -59,6 +60,6 @@ const App: React.FC = () => { ); -} +}; export default App; diff --git a/web/src/Routes.ts b/web/src/Routes.ts index 093712e61..3e3ee0ac5 100644 --- a/web/src/Routes.ts +++ b/web/src/Routes.ts @@ -1,4 +1,3 @@ - export const FirstFactorRoute = "/"; export const AuthenticatedRoute = "/authenticated"; @@ -11,4 +10,4 @@ export const ResetPasswordStep1Route = "/reset-password/step1"; export const ResetPasswordStep2Route = "/reset-password/step2"; export const RegisterSecurityKeyRoute = "/security-key/register"; export const RegisterOneTimePasswordRoute = "/one-time-password/register"; -export const LogoutRoute = "/logout"; \ No newline at end of file +export const LogoutRoute = "/logout"; diff --git a/web/src/components/AppStoreBadges.test.tsx b/web/src/components/AppStoreBadges.test.tsx index c5e2de0ee..54fa554d8 100644 --- a/web/src/components/AppStoreBadges.test.tsx +++ b/web/src/components/AppStoreBadges.test.tsx @@ -1,12 +1,11 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; +import React from "react"; + +import ReactDOM from "react-dom"; + import AppStoreBadges from "./AppStoreBadges"; -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); +it("renders without crashing", () => { + const div = document.createElement("div"); + ReactDOM.render(, div); ReactDOM.unmountComponentAtNode(div); }); diff --git a/web/src/components/AppStoreBadges.tsx b/web/src/components/AppStoreBadges.tsx index 8b5718454..66417dc59 100644 --- a/web/src/components/AppStoreBadges.tsx +++ b/web/src/components/AppStoreBadges.tsx @@ -1,8 +1,10 @@ import React from "react"; -import GooglePlay from "../assets/images/googleplay-badge.svg"; -import AppleStore from "../assets/images/applestore-badge.svg"; + import { Link } from "@material-ui/core"; +import AppleStore from "../assets/images/applestore-badge.svg"; +import GooglePlay from "../assets/images/googleplay-badge.svg"; + export interface Props { iconSize: number; googlePlayLink: string; @@ -25,8 +27,8 @@ const AppStoreBadges = function (props: Props) { apple store - - ) -} + + ); +}; -export default AppStoreBadges \ No newline at end of file +export default AppStoreBadges; diff --git a/web/src/components/ColoredSnackbarContent.test.tsx b/web/src/components/ColoredSnackbarContent.test.tsx index 26bd1aea1..3ffbe4e23 100644 --- a/web/src/components/ColoredSnackbarContent.test.tsx +++ b/web/src/components/ColoredSnackbarContent.test.tsx @@ -1,23 +1,25 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { mount, shallow } from "enzyme"; -import { expect } from "chai"; -import ColoredSnackbarContent from "./ColoredSnackbarContent"; -import { SnackbarContent } from '@material-ui/core'; +import React from "react"; -it('renders without crashing', () => { - const div = document.createElement('div'); +import { SnackbarContent } from "@material-ui/core"; +import { expect } from "chai"; +import { mount, shallow } from "enzyme"; +import ReactDOM from "react-dom"; + +import ColoredSnackbarContent from "./ColoredSnackbarContent"; + +it("renders without crashing", () => { + const div = document.createElement("div"); ReactDOM.render(, div); ReactDOM.unmountComponentAtNode(div); }); -it('should contain the message', () => { +it("should contain the message", () => { const el = mount(); expect(el.text()).to.contain("this is a success"); }); /* eslint-disable @typescript-eslint/no-unused-expressions */ -it('should have correct color', () => { +it("should have correct color", () => { let el = shallow(); expect(el.find(SnackbarContent).props().className!.indexOf("success") > -1).to.be.true; @@ -30,4 +32,4 @@ it('should have correct color', () => { el = shallow(); expect(el.find(SnackbarContent).props().className!.indexOf("warning") > -1).to.be.true; }); -/* eslint-enable @typescript-eslint/no-unused-expressions */ \ No newline at end of file +/* eslint-enable @typescript-eslint/no-unused-expressions */ diff --git a/web/src/components/ColoredSnackbarContent.tsx b/web/src/components/ColoredSnackbarContent.tsx index 5adda3cea..4cb5b5e40 100644 --- a/web/src/components/ColoredSnackbarContent.tsx +++ b/web/src/components/ColoredSnackbarContent.tsx @@ -1,13 +1,13 @@ import React from "react"; -import CheckCircleIcon from '@material-ui/icons/CheckCircle'; -import ErrorIcon from '@material-ui/icons/Error'; -import InfoIcon from '@material-ui/icons/Info'; -import WarningIcon from '@material-ui/icons/Warning'; import { makeStyles, SnackbarContent } from "@material-ui/core"; -import { amber, green } from '@material-ui/core/colors'; -import classnames from "classnames"; +import { amber, green } from "@material-ui/core/colors"; import { SnackbarContentProps } from "@material-ui/core/SnackbarContent"; +import CheckCircleIcon from "@material-ui/icons/CheckCircle"; +import ErrorIcon from "@material-ui/icons/Error"; +import InfoIcon from "@material-ui/icons/Info"; +import WarningIcon from "@material-ui/icons/Warning"; +import classnames from "classnames"; const variantIcon = { success: CheckCircleIcon, @@ -39,13 +39,14 @@ const ColoredSnackbarContent = function (props: Props) { {message} } - {...others} /> - ) -} + {...others} + /> + ); +}; -export default ColoredSnackbarContent +export default ColoredSnackbarContent; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ success: { backgroundColor: green[600], }, @@ -66,7 +67,7 @@ const useStyles = makeStyles(theme => ({ marginRight: theme.spacing(1), }, message: { - display: 'flex', - alignItems: 'center', + display: "flex", + alignItems: "center", }, -})) \ No newline at end of file +})); diff --git a/web/src/components/FailureIcon.test.tsx b/web/src/components/FailureIcon.test.tsx index df028b48f..e01698170 100644 --- a/web/src/components/FailureIcon.test.tsx +++ b/web/src/components/FailureIcon.test.tsx @@ -1,7 +1,9 @@ -import React from 'react'; +import React from "react"; + import { mount } from "enzyme"; + import FailureIcon from "./FailureIcon"; -it('renders without crashing', () => { +it("renders without crashing", () => { mount(); -}); \ No newline at end of file +}); diff --git a/web/src/components/FailureIcon.tsx b/web/src/components/FailureIcon.tsx index 7069646ec..bc64792b7 100644 --- a/web/src/components/FailureIcon.tsx +++ b/web/src/components/FailureIcon.tsx @@ -1,13 +1,12 @@ import React from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faTimesCircle } from "@fortawesome/free-regular-svg-icons"; -export interface Props { } +import { faTimesCircle } from "@fortawesome/free-regular-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +export interface Props {} const FailureIcon = function (props: Props) { - return ( - - ) -} + return ; +}; -export default FailureIcon \ No newline at end of file +export default FailureIcon; diff --git a/web/src/components/FingerTouchIcon.test.tsx b/web/src/components/FingerTouchIcon.test.tsx index d566e6830..31446e026 100644 --- a/web/src/components/FingerTouchIcon.test.tsx +++ b/web/src/components/FingerTouchIcon.test.tsx @@ -1,7 +1,9 @@ -import React from 'react'; +import React from "react"; + import { mount } from "enzyme"; + import FingerTouchIcon from "./FingerTouchIcon"; -it('renders without crashing', () => { +it("renders without crashing", () => { mount(); -}); \ No newline at end of file +}); diff --git a/web/src/components/FingerTouchIcon.tsx b/web/src/components/FingerTouchIcon.tsx index e905dad27..d7c9ad5aa 100644 --- a/web/src/components/FingerTouchIcon.tsx +++ b/web/src/components/FingerTouchIcon.tsx @@ -1,21 +1,32 @@ import React from "react"; -import style from "./FingerTouchIcon.module.css"; + import classnames from "classnames"; -export interface Props { - size: number; +import style from "./FingerTouchIcon.module.css"; - animated?: boolean; - strong?: boolean; +export interface Props { + size: number; + + animated?: boolean; + strong?: boolean; } const FingerTouchIcon = function (props: Props) { - const shakingClass = (props.animated) ? style.shaking : undefined; - const strong = (props.strong) ? style.strong : undefined; + const shakingClass = props.animated ? style.shaking : undefined; + const strong = props.strong ? style.strong : undefined; return ( - - + - + + /> - ) -} + ); +}; -export default FingerTouchIcon \ No newline at end of file +export default FingerTouchIcon; diff --git a/web/src/components/FixedTextField.test.tsx b/web/src/components/FixedTextField.test.tsx index 4b7e19da5..af6b8a4ab 100644 --- a/web/src/components/FixedTextField.test.tsx +++ b/web/src/components/FixedTextField.test.tsx @@ -1,7 +1,9 @@ -import React from 'react'; +import React from "react"; + import { mount } from "enzyme"; + import FixedTextField from "./FixedTextField"; -it('renders without crashing', () => { +it("renders without crashing", () => { mount(); -}); \ No newline at end of file +}); diff --git a/web/src/components/FixedTextField.tsx b/web/src/components/FixedTextField.tsx index 5e9c0f3b6..54febc1d5 100644 --- a/web/src/components/FixedTextField.tsx +++ b/web/src/components/FixedTextField.tsx @@ -1,34 +1,37 @@ import React from "react"; -import TextField, { TextFieldProps } from "@material-ui/core/TextField"; + import { makeStyles } from "@material-ui/core"; +import TextField, { TextFieldProps } from "@material-ui/core/TextField"; /** * This component fixes outlined TextField * https://github.com/mui-org/material-ui/issues/14530#issuecomment-463576879 - * + * * @param props the TextField props */ const FixedTextField = function (props: TextFieldProps) { const style = useStyles(); return ( - + inputProps={{ autoCapitalize: props.autoCapitalize }} + > {props.children} ); -} +}; -export default FixedTextField +export default FixedTextField; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ label: { backgroundColor: theme.palette.background.default, paddingLeft: theme.spacing(0.1), paddingRight: theme.spacing(0.1), - } -})); \ No newline at end of file + }, +})); diff --git a/web/src/components/InformationIcon.test.tsx b/web/src/components/InformationIcon.test.tsx index d1fa2b5c9..8bd2ca559 100644 --- a/web/src/components/InformationIcon.test.tsx +++ b/web/src/components/InformationIcon.test.tsx @@ -1,7 +1,9 @@ -import React from 'react'; +import React from "react"; + import { mount } from "enzyme"; + import InformationIcon from "./InformationIcon"; -it('renders without crashing', () => { +it("renders without crashing", () => { mount(); -}); \ No newline at end of file +}); diff --git a/web/src/components/InformationIcon.tsx b/web/src/components/InformationIcon.tsx index 357cd5e66..91b3f033a 100644 --- a/web/src/components/InformationIcon.tsx +++ b/web/src/components/InformationIcon.tsx @@ -1,13 +1,12 @@ import React from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"; -export interface Props { } +import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + +export interface Props {} const InformationIcon = function (props: Props) { - return ( - - ) -} + return ; +}; -export default InformationIcon \ No newline at end of file +export default InformationIcon; diff --git a/web/src/components/LinearProgressBar.test.tsx b/web/src/components/LinearProgressBar.test.tsx index 25441a003..e436bc5bb 100644 --- a/web/src/components/LinearProgressBar.test.tsx +++ b/web/src/components/LinearProgressBar.test.tsx @@ -1,7 +1,9 @@ -import React from 'react'; +import React from "react"; + import { mount } from "enzyme"; + import LinearProgressBar from "./LinearProgressBar"; -it('renders without crashing', () => { +it("renders without crashing", () => { mount(); -}); \ No newline at end of file +}); diff --git a/web/src/components/LinearProgressBar.tsx b/web/src/components/LinearProgressBar.tsx index b28276226..96fae97ab 100644 --- a/web/src/components/LinearProgressBar.tsx +++ b/web/src/components/LinearProgressBar.tsx @@ -1,4 +1,5 @@ import React from "react"; + import { makeStyles, LinearProgress } from "@material-ui/core"; import { CSSProperties } from "@material-ui/styles"; @@ -10,13 +11,13 @@ export interface Props { } const LinearProgressBar = function (props: Props) { - const style = makeStyles(theme => ({ + const style = makeStyles((theme) => ({ progressRoot: { height: props.height ? props.height : theme.spacing(), }, transition: { transition: "transform .2s linear", - } + }, }))(); return ( - ) -} + className={props.className} + /> + ); +}; -export default LinearProgressBar \ No newline at end of file +export default LinearProgressBar; diff --git a/web/src/components/NotificationBar.test.tsx b/web/src/components/NotificationBar.test.tsx index bc0b536fa..26fc81f44 100644 --- a/web/src/components/NotificationBar.test.tsx +++ b/web/src/components/NotificationBar.test.tsx @@ -1,7 +1,9 @@ -import React from 'react'; +import React from "react"; + import { mount } from "enzyme"; + import NotificationBar from "./NotificationBar"; -it('renders without crashing', () => { - mount( { }} />); -}); \ No newline at end of file +it("renders without crashing", () => { + mount( {}} />); +}); diff --git a/web/src/components/NotificationBar.tsx b/web/src/components/NotificationBar.tsx index 119692665..f4202bf4e 100644 --- a/web/src/components/NotificationBar.tsx +++ b/web/src/components/NotificationBar.tsx @@ -1,8 +1,10 @@ import React, { useState, useEffect } from "react"; + import { Snackbar } from "@material-ui/core"; -import ColoredSnackbarContent from "./ColoredSnackbarContent"; + import { useNotifications } from "../hooks/NotificationsContext"; import { Notification } from "../models/Notifications"; +import ColoredSnackbarContent from "./ColoredSnackbarContent"; export interface Props { onClose: () => void; @@ -26,13 +28,15 @@ const NotificationBar = function (props: Props) { anchorOrigin={{ vertical: "top", horizontal: "right" }} autoHideDuration={tmpNotification ? tmpNotification.timeout * 1000 : 10000} onClose={props.onClose} - onExited={() => setTmpNotification(null)}> + onExited={() => setTmpNotification(null)} + > + message={tmpNotification ? tmpNotification.message : ""} + /> - ) -} + ); +}; -export default NotificationBar \ No newline at end of file +export default NotificationBar; diff --git a/web/src/components/PieChartIcon.test.tsx b/web/src/components/PieChartIcon.test.tsx index ee9a6b8c8..2a59a6c7c 100644 --- a/web/src/components/PieChartIcon.test.tsx +++ b/web/src/components/PieChartIcon.test.tsx @@ -1,7 +1,9 @@ -import React from 'react'; +import React from "react"; + import { mount } from "enzyme"; + import PieChartIcon from "./PieChartIcon"; -it('renders without crashing', () => { +it("renders without crashing", () => { mount(); -}); \ No newline at end of file +}); diff --git a/web/src/components/PieChartIcon.tsx b/web/src/components/PieChartIcon.tsx index f04448bad..8d6e35ccd 100644 --- a/web/src/components/PieChartIcon.tsx +++ b/web/src/components/PieChartIcon.tsx @@ -23,13 +23,18 @@ const PieChartIcon = function (props: Props) { - + transform="rotate(-90) translate(-26)" + /> - ) -} + ); +}; -export default PieChartIcon \ No newline at end of file +export default PieChartIcon; diff --git a/web/src/components/PushNotificationIcon.test.tsx b/web/src/components/PushNotificationIcon.test.tsx index de0453057..e11dad583 100644 --- a/web/src/components/PushNotificationIcon.test.tsx +++ b/web/src/components/PushNotificationIcon.test.tsx @@ -1,7 +1,9 @@ -import React from 'react'; +import React from "react"; + import { mount } from "enzyme"; + import PushNotificationIcon from "./PushNotificationIcon"; -it('renders without crashing', () => { +it("renders without crashing", () => { mount(); -}); \ No newline at end of file +}); diff --git a/web/src/components/PushNotificationIcon.tsx b/web/src/components/PushNotificationIcon.tsx index 209e5caef..9842b7ec9 100644 --- a/web/src/components/PushNotificationIcon.tsx +++ b/web/src/components/PushNotificationIcon.tsx @@ -1,6 +1,7 @@ import React from "react"; + +import { useIntermittentClass } from "../hooks/IntermittentClass"; import style from "./PushNotificationIcon.module.css"; -import {useIntermittentClass} from "../hooks/IntermittentClass"; export interface Props { width: number; @@ -13,34 +14,59 @@ const PushNotificationIcon = function (props: Props) { const idleMilliseconds = 2500; const wiggleMilliseconds = 500; const startMilliseconds = 500; - const wiggleClass = useIntermittentClass((props.animated) ? style.wiggle : "", wiggleMilliseconds, idleMilliseconds, startMilliseconds); + const wiggleClass = useIntermittentClass( + props.animated ? style.wiggle : "", + wiggleMilliseconds, + idleMilliseconds, + startMilliseconds, + ); return ( - - - - + C15,3.079,16.079,2,17.405,2z M42.595,58H17.405C16.079,58,15,56.921,15,55.595V48h30v7.595C45,56.921,43.921,58,42.595,58z" + /> + + + - - - - - - - ) -} -export default PushNotificationIcon \ No newline at end of file + + + + + + ); +}; + +export default PushNotificationIcon; diff --git a/web/src/components/SuccessIcon.test.tsx b/web/src/components/SuccessIcon.test.tsx index 15d796210..b7e460936 100644 --- a/web/src/components/SuccessIcon.test.tsx +++ b/web/src/components/SuccessIcon.test.tsx @@ -1,7 +1,9 @@ -import React from 'react'; +import React from "react"; + import { mount } from "enzyme"; + import SuccessIcon from "./SuccessIcon"; -it('renders without crashing', () => { +it("renders without crashing", () => { mount(); -}); \ No newline at end of file +}); diff --git a/web/src/components/SuccessIcon.tsx b/web/src/components/SuccessIcon.tsx index b01482d04..fd4deaa77 100644 --- a/web/src/components/SuccessIcon.tsx +++ b/web/src/components/SuccessIcon.tsx @@ -1,11 +1,10 @@ import React from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + import { faCheckCircle } from "@fortawesome/free-regular-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; const SuccessIcon = function () { - return ( - - ) -} + return ; +}; -export default SuccessIcon \ No newline at end of file +export default SuccessIcon; diff --git a/web/src/components/TimerIcon.test.tsx b/web/src/components/TimerIcon.test.tsx index 692cd74e8..9c2a8a36d 100644 --- a/web/src/components/TimerIcon.test.tsx +++ b/web/src/components/TimerIcon.test.tsx @@ -1,7 +1,9 @@ -import React from 'react'; +import React from "react"; + import { mount } from "enzyme"; + import TimerIcon from "./TimerIcon"; -it('renders without crashing', () => { +it("renders without crashing", () => { mount(); -}); \ No newline at end of file +}); diff --git a/web/src/components/TimerIcon.tsx b/web/src/components/TimerIcon.tsx index 9a185f005..48d3510e0 100644 --- a/web/src/components/TimerIcon.tsx +++ b/web/src/components/TimerIcon.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect } from "react"; + import PieChartIcon from "./PieChartIcon"; export interface Props { @@ -16,21 +17,26 @@ const TimerIcon = function (props: Props) { useEffect(() => { // Get the current number of seconds to initialize timer. - const initialValue = (new Date().getTime() / 1000) % props.period / props.period * radius; + const initialValue = (((new Date().getTime() / 1000) % props.period) / props.period) * radius; setTimeProgress(initialValue); const interval = setInterval(() => { - const value = (new Date().getTime() / 1000) % props.period / props.period * radius; + const value = (((new Date().getTime() / 1000) % props.period) / props.period) * radius; setTimeProgress(value); }, 100); return () => clearInterval(interval); }, [props]); return ( - - ) -} + + ); +}; -export default TimerIcon \ No newline at end of file +export default TimerIcon; diff --git a/web/src/constants.ts b/web/src/constants.ts index bcb675931..3ed6cf701 100644 --- a/web/src/constants.ts +++ b/web/src/constants.ts @@ -1,5 +1,4 @@ - export const GoogleAuthenticator = { googlePlay: "https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_us", appleStore: "https://apps.apple.com/us/app/google-authenticator/id388497605", -}; \ No newline at end of file +}; diff --git a/web/src/hooks/Configuration.ts b/web/src/hooks/Configuration.ts index 921532b3b..bc3f6a3ec 100644 --- a/web/src/hooks/Configuration.ts +++ b/web/src/hooks/Configuration.ts @@ -1,6 +1,6 @@ -import { useRemoteCall } from "./RemoteCall"; import { getConfiguration } from "../services/Configuration"; +import { useRemoteCall } from "./RemoteCall"; export function useConfiguration() { return useRemoteCall(getConfiguration, []); -} \ No newline at end of file +} diff --git a/web/src/hooks/IntermittentClass.ts b/web/src/hooks/IntermittentClass.ts index 88bcaed57..4cb028d63 100644 --- a/web/src/hooks/IntermittentClass.ts +++ b/web/src/hooks/IntermittentClass.ts @@ -4,7 +4,8 @@ export function useIntermittentClass( classname: string, activeMilliseconds: number, inactiveMillisecond: number, - startMillisecond?: number) { + startMillisecond?: number, +) { const [currentClass, setCurrentClass] = useState(""); const [firstTime, setFirstTime] = useState(true); @@ -34,4 +35,4 @@ export function useIntermittentClass( }, [currentClass, classname, activeMilliseconds, inactiveMillisecond, startMillisecond, firstTime]); return currentClass; -} \ No newline at end of file +} diff --git a/web/src/hooks/Mounted.ts b/web/src/hooks/Mounted.ts index be4ab3a55..96efb7c2b 100644 --- a/web/src/hooks/Mounted.ts +++ b/web/src/hooks/Mounted.ts @@ -4,7 +4,9 @@ export function useIsMountedRef() { const isMountedRef = useRef(false); useEffect(() => { isMountedRef.current = true; - return () => { isMountedRef.current = false }; + return () => { + isMountedRef.current = false; + }; }); return isMountedRef; -} \ No newline at end of file +} diff --git a/web/src/hooks/NotificationsContext.ts b/web/src/hooks/NotificationsContext.ts index 48ff7b0a5..0cacc3c53 100644 --- a/web/src/hooks/NotificationsContext.ts +++ b/web/src/hooks/NotificationsContext.ts @@ -1,33 +1,33 @@ -import { Level } from "../components/ColoredSnackbarContent"; import { useCallback, createContext, useContext } from "react"; + +import { Level } from "../components/ColoredSnackbarContent"; import { Notification } from "../models/Notifications"; const defaultOptions = { timeout: 5, -} +}; interface NotificationContextProps { notification: Notification | null; setNotification: (n: Notification | null) => void; } -const NotificationsContext = createContext( - { notification: null, setNotification: () => { } }); +const NotificationsContext = createContext({ notification: null, setNotification: () => {} }); export default NotificationsContext; - export function useNotifications() { let useNotificationsProps = useContext(NotificationsContext); const notificationBuilder = (level: Level) => { return (message: string, timeout?: number) => { useNotificationsProps.setNotification({ - level, message, - timeout: timeout ? timeout : defaultOptions.timeout + level, + message, + timeout: timeout ? timeout : defaultOptions.timeout, }); - } - } + }; + }; const resetNotification = () => useNotificationsProps.setNotification(null); /* eslint-disable react-hooks/exhaustive-deps */ @@ -38,7 +38,6 @@ export function useNotifications() { /* eslint-enable react-hooks/exhaustive-deps */ const isActive = useNotificationsProps.notification !== null; - return { notification: useNotificationsProps.notification, resetNotification, @@ -46,6 +45,6 @@ export function useNotifications() { createSuccessNotification, createWarnNotification, createErrorNotification, - isActive - } -} \ No newline at end of file + isActive, + }; +} diff --git a/web/src/hooks/RedirectionURL.ts b/web/src/hooks/RedirectionURL.ts index 670be718a..311cc27ba 100644 --- a/web/src/hooks/RedirectionURL.ts +++ b/web/src/hooks/RedirectionURL.ts @@ -4,7 +4,5 @@ import { useLocation } from "react-router"; export function useRedirectionURL() { const location = useLocation(); const queryParams = queryString.parse(location.search); - return (queryParams && "rd" in queryParams) - ? queryParams["rd"] as string - : undefined; -} \ No newline at end of file + return queryParams && "rd" in queryParams ? (queryParams["rd"] as string) : undefined; +} diff --git a/web/src/hooks/RemoteCall.ts b/web/src/hooks/RemoteCall.ts index 8136aa46a..a33afb37f 100644 --- a/web/src/hooks/RemoteCall.ts +++ b/web/src/hooks/RemoteCall.ts @@ -1,9 +1,11 @@ import { useState, useCallback, DependencyList } from "react"; -type PromisifiedFunction = (...args: any) => Promise +type PromisifiedFunction = (...args: any) => Promise; -export function useRemoteCall(fn: PromisifiedFunction, deps: DependencyList) - : [Ret | undefined, PromisifiedFunction, boolean, Error | undefined] { +export function useRemoteCall( + fn: PromisifiedFunction, + deps: DependencyList, +): [Ret | undefined, PromisifiedFunction, boolean, Error | undefined] { const [data, setData] = useState(undefined as Ret | undefined); const [inProgress, setInProgress] = useState(false); const [error, setError] = useState(undefined as Error | undefined); @@ -22,10 +24,5 @@ export function useRemoteCall(fn: PromisifiedFunction, deps: Dependenc } }, [setInProgress, setError, fnCallback]); - return [ - data, - triggerCallback, - inProgress, - error, - ] -} \ No newline at end of file + return [data, triggerCallback, inProgress, error]; +} diff --git a/web/src/hooks/State.ts b/web/src/hooks/State.ts index c33a6cf7b..f3c16e8b9 100644 --- a/web/src/hooks/State.ts +++ b/web/src/hooks/State.ts @@ -3,4 +3,4 @@ import { useRemoteCall } from "./RemoteCall"; export function useAutheliaState() { return useRemoteCall(getState, []); -} \ No newline at end of file +} diff --git a/web/src/hooks/Timer.ts b/web/src/hooks/Timer.ts index 5e3c95074..63515f36b 100644 --- a/web/src/hooks/Timer.ts +++ b/web/src/hooks/Timer.ts @@ -21,8 +21,8 @@ export function useTimer(timeoutMs: number): [number, () => void, () => void] { } const intervalNode = setInterval(() => { - const elapsedMs = (startDate) ? new Date().getTime() - startDate.getTime() : 0; - let p = elapsedMs / timeoutMs * 100.0; + const elapsedMs = startDate ? new Date().getTime() - startDate.getTime() : 0; + let p = (elapsedMs / timeoutMs) * 100.0; if (p >= 100) { p = 100; setStartDate(undefined); @@ -33,9 +33,5 @@ export function useTimer(timeoutMs: number): [number, () => void, () => void] { return () => clearInterval(intervalNode); }, [startDate, setPercent, setStartDate, timeoutMs]); - return [ - percent, - trigger, - clear, - ] -} \ No newline at end of file + return [percent, trigger, clear]; +} diff --git a/web/src/hooks/UserInfo.ts b/web/src/hooks/UserInfo.ts index ad00a0864..96e34f443 100644 --- a/web/src/hooks/UserInfo.ts +++ b/web/src/hooks/UserInfo.ts @@ -3,4 +3,4 @@ import { useRemoteCall } from "./RemoteCall"; export function useUserPreferences() { return useRemoteCall(getUserPreferences, []); -} \ No newline at end of file +} diff --git a/web/src/index.tsx b/web/src/index.tsx index cff565f93..1fb7ad7b9 100644 --- a/web/src/index.tsx +++ b/web/src/index.tsx @@ -1,11 +1,13 @@ -import './utils/AssetPath'; -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; +import "./utils/AssetPath"; +import React from "react"; -ReactDOM.render(, document.getElementById('root')); +import ReactDOM from "react-dom"; + +import "./index.css"; +import App from "./App"; +import * as serviceWorker from "./serviceWorker"; + +ReactDOM.render(, document.getElementById("root")); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. diff --git a/web/src/layouts/LoginLayout.tsx b/web/src/layouts/LoginLayout.tsx index a5da78b89..20017c388 100644 --- a/web/src/layouts/LoginLayout.tsx +++ b/web/src/layouts/LoginLayout.tsx @@ -1,8 +1,9 @@ import React, { ReactNode } from "react"; + import { Grid, makeStyles, Container, Typography, Link } from "@material-ui/core"; -import { ReactComponent as UserSvg } from "../assets/images/user.svg"; import { grey } from "@material-ui/core/colors"; +import { ReactComponent as UserSvg } from "../assets/images/user.svg"; export interface Props { id?: string; @@ -14,13 +15,7 @@ export interface Props { const LoginLayout = function (props: Props) { const style = useStyles(); return ( - + @@ -34,27 +29,28 @@ const LoginLayout = function (props: Props) { {props.children} - {props.showBrand ? - - Powered by Authelia - - - : null - } + {props.showBrand ? ( + + + Powered by Authelia + + + ) : null} ); -} +}; -export default LoginLayout +export default LoginLayout; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { - minHeight: '90vh', + minHeight: "90vh", textAlign: "center", // marginTop: theme.spacing(10), }, @@ -71,5 +67,5 @@ const useStyles = makeStyles(theme => ({ poweredBy: { fontSize: "0.7em", color: grey[500], - } -})) \ No newline at end of file + }, +})); diff --git a/web/src/models/Configuration.ts b/web/src/models/Configuration.ts index ba04e7f96..01bd10ef0 100644 --- a/web/src/models/Configuration.ts +++ b/web/src/models/Configuration.ts @@ -4,4 +4,4 @@ export interface Configuration { available_methods: Set; second_factor_enabled: boolean; totp_period: number; -} \ No newline at end of file +} diff --git a/web/src/models/Methods.ts b/web/src/models/Methods.ts index ab80212bb..e075e9c7c 100644 --- a/web/src/models/Methods.ts +++ b/web/src/models/Methods.ts @@ -1,6 +1,5 @@ - export enum SecondFactorMethod { TOTP = 1, U2F = 2, - MobilePush = 3 + MobilePush = 3, } diff --git a/web/src/models/Notifications.ts b/web/src/models/Notifications.ts index 6b7d5d347..321a0c087 100644 --- a/web/src/models/Notifications.ts +++ b/web/src/models/Notifications.ts @@ -4,4 +4,4 @@ export interface Notification { message: string; level: Level; timeout: number; -} \ No newline at end of file +} diff --git a/web/src/react-app-env.d.ts b/web/src/react-app-env.d.ts index ab49f1b52..2c004b416 100644 --- a/web/src/react-app-env.d.ts +++ b/web/src/react-app-env.d.ts @@ -1,2 +1,2 @@ /// -declare var __webpack_public_path__: string; \ No newline at end of file +declare var __webpack_public_path__: string; diff --git a/web/src/serviceWorker.ts b/web/src/serviceWorker.ts index 15d90cb81..56a6df78c 100644 --- a/web/src/serviceWorker.ts +++ b/web/src/serviceWorker.ts @@ -11,133 +11,123 @@ // opt-in, read https://bit.ly/CRA-PWA const isLocalhost = Boolean( - window.location.hostname === 'localhost' || - // [::1] is the IPv6 localhost address. - window.location.hostname === '[::1]' || - // 127.0.0.1/8 is considered localhost for IPv4. - window.location.hostname.match( - /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ - ) + window.location.hostname === "localhost" || + // [::1] is the IPv6 localhost address. + window.location.hostname === "[::1]" || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/), ); type Config = { - onSuccess?: (registration: ServiceWorkerRegistration) => void; - onUpdate?: (registration: ServiceWorkerRegistration) => void; + onSuccess?: (registration: ServiceWorkerRegistration) => void; + onUpdate?: (registration: ServiceWorkerRegistration) => void; }; export function register(config?: Config) { - if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { - // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL( - (process as { env: { [key: string]: string } }).env.PUBLIC_URL, - window.location.href - ); - if (publicUrl.origin !== window.location.origin) { - // Our service worker won't work if PUBLIC_URL is on a different origin - // from what our page is served on. This might happen if a CDN is used to - // serve assets; see https://github.com/facebook/create-react-app/issues/2374 - return; - } + if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL((process as { env: { [key: string]: string } }).env.PUBLIC_URL, window.location.href); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + return; + } - window.addEventListener('load', () => { - const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + window.addEventListener("load", () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - if (isLocalhost) { - // This is running on localhost. Let's check if a service worker still exists or not. - checkValidServiceWorker(swUrl, config); + if (isLocalhost) { + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); - // Add some additional logging to localhost, pointing developers to the - // service worker/PWA documentation. - navigator.serviceWorker.ready.then(() => { - console.log( - 'This web app is being served cache-first by a service ' + - 'worker. To learn more, visit https://bit.ly/CRA-PWA' - ); + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + "This web app is being served cache-first by a service " + + "worker. To learn more, visit https://bit.ly/CRA-PWA", + ); + }); + } else { + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); + } }); - } else { - // Is not localhost. Just register service worker - registerValidSW(swUrl, config); - } - }); - } + } } function registerValidSW(swUrl: string, config?: Config) { - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - if (installingWorker == null) { - return; - } - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the updated precached content has been fetched, - // but the previous service worker will still serve the older - // content until all client tabs are closed. - console.log( - 'New content is available and will be used when all ' + - 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' - ); + navigator.serviceWorker + .register(swUrl) + .then((registration) => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + if (installingWorker == null) { + return; + } + installingWorker.onstatechange = () => { + if (installingWorker.state === "installed") { + if (navigator.serviceWorker.controller) { + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + "New content is available and will be used when all " + + "tabs for this page are closed. See https://bit.ly/CRA-PWA.", + ); - // Execute callback - if (config && config.onUpdate) { - config.onUpdate(registration); - } - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); + // Execute callback + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log("Content is cached for offline use."); - // Execute callback - if (config && config.onSuccess) { - config.onSuccess(registration); - } - } - } - }; - }; - }) - .catch(error => { - console.error('Error during service worker registration:', error); - }); + // Execute callback + if (config && config.onSuccess) { + config.onSuccess(registration); + } + } + } + }; + }; + }) + .catch((error) => { + console.error("Error during service worker registration:", error); + }); } function checkValidServiceWorker(swUrl: string, config?: Config) { - // Check if the service worker can be found. If it can't reload the page. - fetch(swUrl) - .then(response => { - // Ensure service worker exists, and that we really are getting a JS file. - const contentType = response.headers.get('content-type'); - if ( - response.status === 404 || - (contentType != null && contentType.indexOf('javascript') === -1) - ) { - // No service worker found. Probably a different app. Reload the page. - navigator.serviceWorker.ready.then(registration => { - registration.unregister().then(() => { - window.location.reload(); - }); + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then((response) => { + // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get("content-type"); + if (response.status === 404 || (contentType != null && contentType.indexOf("javascript") === -1)) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then((registration) => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl, config); + } + }) + .catch(() => { + console.log("No internet connection found. App is running in offline mode."); }); - } else { - // Service worker found. Proceed as normal. - registerValidSW(swUrl, config); - } - }) - .catch(() => { - console.log( - 'No internet connection found. App is running in offline mode.' - ); - }); } export function unregister() { - if ('serviceWorker' in navigator) { - navigator.serviceWorker.ready.then(registration => { - registration.unregister(); - }); - } + if ("serviceWorker" in navigator) { + navigator.serviceWorker.ready.then((registration) => { + registration.unregister(); + }); + } } diff --git a/web/src/services/Api.ts b/web/src/services/Api.ts index 0ec8ae90f..2b5be2ce8 100644 --- a/web/src/services/Api.ts +++ b/web/src/services/Api.ts @@ -1,4 +1,5 @@ import { AxiosResponse } from "axios"; + import { getBasePath } from "../utils/BasePath"; const basePath = getBasePath(); @@ -14,13 +15,13 @@ export const CompleteU2FRegistrationStep2Path = basePath + "/api/secondfactor/u2 export const InitiateU2FSignInPath = basePath + "/api/secondfactor/u2f/sign_request"; export const CompleteU2FSignInPath = basePath + "/api/secondfactor/u2f/sign"; -export const CompletePushNotificationSignInPath = basePath + "/api/secondfactor/duo" -export const CompleteTOTPSignInPath = basePath + "/api/secondfactor/totp" +export const CompletePushNotificationSignInPath = basePath + "/api/secondfactor/duo"; +export const CompleteTOTPSignInPath = basePath + "/api/secondfactor/totp"; export const InitiateResetPasswordPath = basePath + "/api/reset-password/identity/start"; export const CompleteResetPasswordPath = basePath + "/api/reset-password/identity/finish"; // Do the password reset during completion. -export const ResetPasswordPath = basePath + "/api/reset-password" +export const ResetPasswordPath = basePath + "/api/reset-password"; export const LogoutPath = basePath + "/api/logout"; export const StatePath = basePath + "/api/state"; @@ -52,7 +53,7 @@ export function toData(resp: AxiosResponse>): T | undefine if (resp.data && "status" in resp.data && resp.data["status"] === "OK") { return resp.data.data as T; } - return undefined + return undefined; } export function hasServiceError(resp: AxiosResponse>) { @@ -61,4 +62,4 @@ export function hasServiceError(resp: AxiosResponse>) { return { errored: true, message: errResp.message }; } return { errored: false, message: null }; -} \ No newline at end of file +} diff --git a/web/src/services/Client.ts b/web/src/services/Client.ts index e30d10148..56681446c 100644 --- a/web/src/services/Client.ts +++ b/web/src/services/Client.ts @@ -1,4 +1,5 @@ import axios from "axios"; + import { ServiceResponse, hasServiceError, toData } from "./Api"; export async function PostWithOptionalResponse(path: string, body?: any) { @@ -30,4 +31,4 @@ export async function Get(path: string): Promise { throw new Error("unexpected type of response"); } return d; -} \ No newline at end of file +} diff --git a/web/src/services/Configuration.ts b/web/src/services/Configuration.ts index 1c9651ab7..0d6bcdd32 100644 --- a/web/src/services/Configuration.ts +++ b/web/src/services/Configuration.ts @@ -1,7 +1,7 @@ -import { Get } from "./Client"; -import { ConfigurationPath } from "./Api"; -import { toEnum, Method2FA } from "./UserPreferences"; import { Configuration } from "../models/Configuration"; +import { ConfigurationPath } from "./Api"; +import { Get } from "./Client"; +import { toEnum, Method2FA } from "./UserPreferences"; interface ConfigurationPayload { available_methods: Method2FA[]; @@ -12,4 +12,4 @@ interface ConfigurationPayload { export async function getConfiguration(): Promise { const config = await Get(ConfigurationPath); return { ...config, available_methods: new Set(config.available_methods.map(toEnum)) }; -} \ No newline at end of file +} diff --git a/web/src/services/FirstFactor.ts b/web/src/services/FirstFactor.ts index 91c29b36d..3d9c24989 100644 --- a/web/src/services/FirstFactor.ts +++ b/web/src/services/FirstFactor.ts @@ -9,17 +9,16 @@ interface PostFirstFactorBody { targetURL?: string; } -export async function postFirstFactor( - username: string, password: string, - rememberMe: boolean, targetURL?: string) { +export async function postFirstFactor(username: string, password: string, rememberMe: boolean, targetURL?: string) { const data: PostFirstFactorBody = { - username, password, - keepMeLoggedIn: rememberMe + username, + password, + keepMeLoggedIn: rememberMe, }; if (targetURL) { data.targetURL = targetURL; } const res = await PostWithOptionalResponse(FirstFactorPath, data); - return res ? res : {} as SignInResponse; -} \ No newline at end of file + return res ? res : ({} as SignInResponse); +} diff --git a/web/src/services/OneTimePassword.ts b/web/src/services/OneTimePassword.ts index fa892f9cc..687a6a863 100644 --- a/web/src/services/OneTimePassword.ts +++ b/web/src/services/OneTimePassword.ts @@ -1,5 +1,5 @@ -import { PostWithOptionalResponse } from "./Client"; import { CompleteTOTPSignInPath } from "./Api"; +import { PostWithOptionalResponse } from "./Client"; import { SignInResponse } from "./SignIn"; interface CompleteU2FSigninBody { @@ -13,4 +13,4 @@ export function completeTOTPSignIn(passcode: string, targetURL: string | undefin body.targetURL = targetURL; } return PostWithOptionalResponse(CompleteTOTPSignInPath, body); -} \ No newline at end of file +} diff --git a/web/src/services/PushNotification.ts b/web/src/services/PushNotification.ts index a70ccef38..66bfefca6 100644 --- a/web/src/services/PushNotification.ts +++ b/web/src/services/PushNotification.ts @@ -1,5 +1,5 @@ -import { PostWithOptionalResponse } from "./Client"; import { CompletePushNotificationSignInPath } from "./Api"; +import { PostWithOptionalResponse } from "./Client"; import { SignInResponse } from "./SignIn"; interface CompleteU2FSigninBody { @@ -12,4 +12,4 @@ export function completePushNotificationSignIn(targetURL: string | undefined) { body.targetURL = targetURL; } return PostWithOptionalResponse(CompletePushNotificationSignInPath, body); -} \ No newline at end of file +} diff --git a/web/src/services/RegisterDevice.ts b/web/src/services/RegisterDevice.ts index 67a57e358..ce4cb7614 100644 --- a/web/src/services/RegisterDevice.ts +++ b/web/src/services/RegisterDevice.ts @@ -1,9 +1,12 @@ -import { - InitiateTOTPRegistrationPath, CompleteTOTPRegistrationPath, - InitiateU2FRegistrationPath, CompleteU2FRegistrationStep1Path, - CompleteU2FRegistrationStep2Path -} from "./Api"; import U2fApi from "u2f-api"; + +import { + InitiateTOTPRegistrationPath, + CompleteTOTPRegistrationPath, + InitiateU2FRegistrationPath, + CompleteU2FRegistrationStep1Path, + CompleteU2FRegistrationStep2Path, +} from "./Api"; import { Post, PostWithOptionalResponse } from "./Client"; export async function initiateTOTPRegistrationProcess() { @@ -16,28 +19,27 @@ interface CompleteTOTPRegistrationResponse { } export async function completeTOTPRegistrationProcess(processToken: string) { - return Post( - CompleteTOTPRegistrationPath, { token: processToken }); + return Post(CompleteTOTPRegistrationPath, { token: processToken }); } - export async function initiateU2FRegistrationProcess() { return PostWithOptionalResponse(InitiateU2FRegistrationPath); } interface U2RRegistrationStep1Response { - appId: string, - registerRequests: [{ - version: string, - challenge: string, - }] + appId: string; + registerRequests: [ + { + version: string; + challenge: string; + }, + ]; } export async function completeU2FRegistrationProcessStep1(processToken: string) { - return Post( - CompleteU2FRegistrationStep1Path, { token: processToken }); + return Post(CompleteU2FRegistrationStep1Path, { token: processToken }); } export async function completeU2FRegistrationProcessStep2(response: U2fApi.RegisterResponse) { return PostWithOptionalResponse(CompleteU2FRegistrationStep2Path, response); -} \ No newline at end of file +} diff --git a/web/src/services/ResetPassword.ts b/web/src/services/ResetPassword.ts index 2d4819175..48612a892 100644 --- a/web/src/services/ResetPassword.ts +++ b/web/src/services/ResetPassword.ts @@ -1,7 +1,6 @@ import { InitiateResetPasswordPath, CompleteResetPasswordPath, ResetPasswordPath } from "./Api"; import { PostWithOptionalResponse } from "./Client"; - export async function initiateResetPasswordProcess(username: string) { return PostWithOptionalResponse(InitiateResetPasswordPath, { username }); } @@ -12,4 +11,4 @@ export async function completeResetPasswordProcess(token: string) { export async function resetPassword(newPassword: string) { return PostWithOptionalResponse(ResetPasswordPath, { password: newPassword }); -} \ No newline at end of file +} diff --git a/web/src/services/SecurityKey.ts b/web/src/services/SecurityKey.ts index 8a593d962..7db823b5e 100644 --- a/web/src/services/SecurityKey.ts +++ b/web/src/services/SecurityKey.ts @@ -1,16 +1,17 @@ -import { Post, PostWithOptionalResponse } from "./Client"; -import { InitiateU2FSignInPath, CompleteU2FSignInPath } from "./Api"; import u2fApi from "u2f-api"; + +import { InitiateU2FSignInPath, CompleteU2FSignInPath } from "./Api"; +import { Post, PostWithOptionalResponse } from "./Client"; import { SignInResponse } from "./SignIn"; interface InitiateU2FSigninResponse { - appId: string, - challenge: string, + appId: string; + challenge: string; registeredKeys: { - appId: string, - keyHandle: string, - version: string, - }[] + appId: string; + keyHandle: string; + version: string; + }[]; } export async function initiateU2FSignin() { @@ -28,4 +29,4 @@ export function completeU2FSignin(signResponse: u2fApi.SignResponse, targetURL: body.targetURL = targetURL; } return PostWithOptionalResponse(CompleteU2FSignInPath, body); -} \ No newline at end of file +} diff --git a/web/src/services/SignIn.ts b/web/src/services/SignIn.ts index 2dfceac68..219ffd846 100644 --- a/web/src/services/SignIn.ts +++ b/web/src/services/SignIn.ts @@ -1,2 +1 @@ - -export type SignInResponse = { redirect: string } | undefined; \ No newline at end of file +export type SignInResponse = { redirect: string } | undefined; diff --git a/web/src/services/SignOut.ts b/web/src/services/SignOut.ts index a376ceb65..6209a132b 100644 --- a/web/src/services/SignOut.ts +++ b/web/src/services/SignOut.ts @@ -1,6 +1,6 @@ -import { PostWithOptionalResponse } from "./Client"; import { LogoutPath } from "./Api"; +import { PostWithOptionalResponse } from "./Client"; export async function signOut() { return PostWithOptionalResponse(LogoutPath); -} \ No newline at end of file +} diff --git a/web/src/services/State.ts b/web/src/services/State.ts index 5b1830983..b653952e8 100644 --- a/web/src/services/State.ts +++ b/web/src/services/State.ts @@ -1,5 +1,5 @@ -import { Get } from "./Client"; import { StatePath } from "./Api"; +import { Get } from "./Client"; export enum AuthenticationLevel { Unauthenticated = 0, @@ -9,9 +9,9 @@ export enum AuthenticationLevel { export interface AutheliaState { username: string; - authentication_level: AuthenticationLevel + authentication_level: AuthenticationLevel; } export async function getState(): Promise { return Get(StatePath); -} \ No newline at end of file +} diff --git a/web/src/services/UserPreferences.ts b/web/src/services/UserPreferences.ts index c63db1b52..9fbb2a81d 100644 --- a/web/src/services/UserPreferences.ts +++ b/web/src/services/UserPreferences.ts @@ -1,7 +1,7 @@ -import { Get, PostWithOptionalResponse } from "./Client"; -import { UserInfoPath, UserInfo2FAMethodPath } from "./Api"; import { SecondFactorMethod } from "../models/Methods"; import { UserInfo } from "../models/UserInfo"; +import { UserInfoPath, UserInfo2FAMethodPath } from "./Api"; +import { Get, PostWithOptionalResponse } from "./Client"; export type Method2FA = "u2f" | "totp" | "mobile_push"; @@ -44,6 +44,5 @@ export async function getUserPreferences(): Promise { } export function setPreferred2FAMethod(method: SecondFactorMethod) { - return PostWithOptionalResponse(UserInfo2FAMethodPath, - { method: toString(method) } as MethodPreferencePayload); -} \ No newline at end of file + return PostWithOptionalResponse(UserInfo2FAMethodPath, { method: toString(method) } as MethodPreferencePayload); +} diff --git a/web/src/setupTests.js b/web/src/setupTests.js index 21fc6bb60..81b86e1d0 100644 --- a/web/src/setupTests.js +++ b/web/src/setupTests.js @@ -1,5 +1,5 @@ -import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; +import { configure } from "enzyme"; +import Adapter from "enzyme-adapter-react-16"; document.body.setAttribute("data-basepath", ""); document.body.setAttribute("data-rememberme", "true"); document.body.setAttribute("data-resetpassword", "true"); diff --git a/web/src/utils/AssetPath.ts b/web/src/utils/AssetPath.ts index 358130b89..8ff5e9f47 100644 --- a/web/src/utils/AssetPath.ts +++ b/web/src/utils/AssetPath.ts @@ -1,7 +1,7 @@ import { getBasePath } from "./BasePath"; -__webpack_public_path__ = "/" +__webpack_public_path__ = "/"; if (getBasePath() !== "") { - __webpack_public_path__ = getBasePath() + "/" -} \ No newline at end of file + __webpack_public_path__ = getBasePath() + "/"; +} diff --git a/web/src/utils/BasePath.ts b/web/src/utils/BasePath.ts index 5c5553c94..f09d231ef 100644 --- a/web/src/utils/BasePath.ts +++ b/web/src/utils/BasePath.ts @@ -2,4 +2,4 @@ import { getEmbeddedVariable } from "./Configuration"; export function getBasePath() { return getEmbeddedVariable("basepath"); -} \ No newline at end of file +} diff --git a/web/src/utils/Configuration.ts b/web/src/utils/Configuration.ts index e8d42946d..81e279974 100644 --- a/web/src/utils/Configuration.ts +++ b/web/src/utils/Configuration.ts @@ -1,16 +1,16 @@ export function getEmbeddedVariable(variableName: string) { - const value = document.body.getAttribute(`data-${variableName}`); - if (value === null) { - throw new Error(`No ${variableName} embedded variable detected`); - } + const value = document.body.getAttribute(`data-${variableName}`); + if (value === null) { + throw new Error(`No ${variableName} embedded variable detected`); + } - return value; + return value; } export function getRememberMe() { - return getEmbeddedVariable("rememberme") === "true"; + return getEmbeddedVariable("rememberme") === "true"; } export function getResetPassword() { - return getEmbeddedVariable("resetpassword") === "true"; -} \ No newline at end of file + return getEmbeddedVariable("resetpassword") === "true"; +} diff --git a/web/src/utils/IdentityToken.ts b/web/src/utils/IdentityToken.ts index 67269d478..7e1960015 100644 --- a/web/src/utils/IdentityToken.ts +++ b/web/src/utils/IdentityToken.ts @@ -2,7 +2,5 @@ import queryString from "query-string"; export function extractIdentityToken(locationSearch: string) { const queryParams = queryString.parse(locationSearch); - return (queryParams && "token" in queryParams) - ? queryParams["token"] as string - : null; -} \ No newline at end of file + return queryParams && "token" in queryParams ? (queryParams["token"] as string) : null; +} diff --git a/web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx b/web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx index 93219dbc4..9f126e139 100644 --- a/web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx +++ b/web/src/views/DeviceRegistration/RegisterOneTimePassword.tsx @@ -1,18 +1,20 @@ import React, { useEffect, useCallback, useState } from "react"; -import LoginLayout from "../../layouts/LoginLayout"; -import classnames from "classnames"; + +import { IconDefinition, faCopy, faKey, faTimesCircle } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { makeStyles, Typography, Button, IconButton, Link, CircularProgress, TextField } from "@material-ui/core"; -import QRCode from 'qrcode.react'; +import { red } from "@material-ui/core/colors"; +import classnames from "classnames"; +import QRCode from "qrcode.react"; +import { useHistory, useLocation } from "react-router"; + import AppStoreBadges from "../../components/AppStoreBadges"; import { GoogleAuthenticator } from "../../constants"; -import { useHistory, useLocation } from "react-router"; -import { completeTOTPRegistrationProcess } from "../../services/RegisterDevice"; import { useNotifications } from "../../hooks/NotificationsContext"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { IconDefinition, faCopy, faKey, faTimesCircle } from "@fortawesome/free-solid-svg-icons"; -import { red } from "@material-ui/core/colors"; -import { extractIdentityToken } from "../../utils/IdentityToken"; +import LoginLayout from "../../layouts/LoginLayout"; import { FirstFactorRoute } from "../../Routes"; +import { completeTOTPRegistrationProcess } from "../../services/RegisterDevice"; +import { extractIdentityToken } from "../../utils/IdentityToken"; const RegisterOneTimePassword = function () { const style = useStyles(); @@ -32,7 +34,7 @@ const RegisterOneTimePassword = function () { const handleDoneClick = () => { history.push(FirstFactorRoute); - } + }; const completeRegistrationProcess = useCallback(async () => { if (!processToken) { @@ -52,74 +54,77 @@ const RegisterOneTimePassword = function () { setIsLoading(false); }, [processToken, createErrorNotification]); - useEffect(() => { completeRegistrationProcess() }, [completeRegistrationProcess]); + useEffect(() => { + completeRegistrationProcess(); + }, [completeRegistrationProcess]); function SecretButton(text: string | undefined, action: string, icon: IconDefinition) { return ( - { - navigator.clipboard.writeText(`${text}`); - createSuccessNotification(`${action}`); - }} - > - - - ) + { + navigator.clipboard.writeText(`${text}`); + createSuccessNotification(`${action}`); + }} + > + + + ); } - const qrcodeFuzzyStyle = (isLoading || hasErrored) ? style.fuzzy : undefined + const qrcodeFuzzyStyle = isLoading || hasErrored ? style.fuzzy : undefined; return ( - -
-
- Need Google Authenticator? - -
-
- - - {!hasErrored && isLoading ? : null} - {hasErrored ? : null} - -
-
- {secretURL !== "empty" - ? : null} - {secretBase32 ? SecretButton(secretBase32, "OTP Secret copied to clipboard.", faKey) : null} - {secretURL !== "empty" ? SecretButton(secretURL, "OTP URL copied to clipboard.", faCopy) : null} -
- -
- - ) -} + +
+
+ Need Google Authenticator? + +
+
+ + + {!hasErrored && isLoading ? : null} + {hasErrored ? : null} + +
+
+ {secretURL !== "empty" ? ( + + ) : null} + {secretBase32 ? SecretButton(secretBase32, "OTP Secret copied to clipboard.", faKey) : null} + {secretURL !== "empty" ? SecretButton(secretURL, "OTP URL copied to clipboard.", faCopy) : null} +
+ +
+ + ); +}; -export default RegisterOneTimePassword +export default RegisterOneTimePassword; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { paddingTop: theme.spacing(4), paddingBottom: theme.spacing(4), @@ -129,7 +134,7 @@ const useStyles = makeStyles(theme => ({ marginBottom: theme.spacing(2), }, fuzzy: { - filter: "blur(10px)" + filter: "blur(10px)", }, secret: { marginTop: theme.spacing(1), @@ -163,5 +168,5 @@ const useStyles = makeStyles(theme => ({ left: "calc(128px - 64px)", color: red[400], fontSize: "128px", - } -})) \ No newline at end of file + }, +})); diff --git a/web/src/views/DeviceRegistration/RegisterSecurityKey.tsx b/web/src/views/DeviceRegistration/RegisterSecurityKey.tsx index b58e5f7f5..11cbea3b4 100644 --- a/web/src/views/DeviceRegistration/RegisterSecurityKey.tsx +++ b/web/src/views/DeviceRegistration/RegisterSecurityKey.tsx @@ -1,14 +1,19 @@ import React, { useState, useEffect, useCallback } from "react"; -import LoginLayout from "../../layouts/LoginLayout"; -import FingerTouchIcon from "../../components/FingerTouchIcon"; + import { makeStyles, Typography, Button } from "@material-ui/core"; import { useHistory, useLocation } from "react-router"; -import { FirstFactorPath } from "../../services/Api"; -import { extractIdentityToken } from "../../utils/IdentityToken"; -import { completeU2FRegistrationProcessStep1, completeU2FRegistrationProcessStep2 } from "../../services/RegisterDevice"; -import { useNotifications } from "../../hooks/NotificationsContext"; import u2fApi from "u2f-api"; +import FingerTouchIcon from "../../components/FingerTouchIcon"; +import { useNotifications } from "../../hooks/NotificationsContext"; +import LoginLayout from "../../layouts/LoginLayout"; +import { FirstFactorPath } from "../../services/Api"; +import { + completeU2FRegistrationProcessStep1, + completeU2FRegistrationProcessStep2, +} from "../../services/RegisterDevice"; +import { extractIdentityToken } from "../../utils/IdentityToken"; + const RegisterSecurityKey = function () { const style = useStyles(); const history = useHistory(); @@ -18,10 +23,9 @@ const RegisterSecurityKey = function () { const processToken = extractIdentityToken(location.search); - const handleBackClick = () => { history.push(FirstFactorPath); - } + }; const registerStep1 = useCallback(async () => { if (!processToken) { @@ -37,7 +41,7 @@ const RegisterSecurityKey = function () { appId: res.appId, challenge: r.challenge, version: r.version, - }) + }); } const registerResponse = await u2fApi.register(registerRequests, [], 60); await completeU2FRegistrationProcessStep2(registerResponse); @@ -45,8 +49,9 @@ const RegisterSecurityKey = function () { history.push(FirstFactorPath); } catch (err) { console.error(err); - createErrorNotification("Failed to register your security key. " + - "The identity verification process might have timed out."); + createErrorNotification( + "Failed to register your security key. The identity verification process might have timed out.", + ); } }, [processToken, createErrorNotification, history]); @@ -60,20 +65,24 @@ const RegisterSecurityKey = function () { Touch the token on your security key - - + + - ) -} + ); +}; -export default RegisterSecurityKey +export default RegisterSecurityKey; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ icon: { paddingTop: theme.spacing(4), paddingBottom: theme.spacing(4), }, instruction: { paddingBottom: theme.spacing(4), - } -})) \ No newline at end of file + }, +})); diff --git a/web/src/views/LoadingPage/LoadingPage.tsx b/web/src/views/LoadingPage/LoadingPage.tsx index e923c1d7b..6ae4ac779 100644 --- a/web/src/views/LoadingPage/LoadingPage.tsx +++ b/web/src/views/LoadingPage/LoadingPage.tsx @@ -1,6 +1,7 @@ import React from "react"; -import ReactLoading from "react-loading"; + import { Typography, Grid } from "@material-ui/core"; +import ReactLoading from "react-loading"; const LoadingPage = function () { return ( @@ -11,6 +12,6 @@ const LoadingPage = function () { ); -} +}; -export default LoadingPage \ No newline at end of file +export default LoadingPage; diff --git a/web/src/views/LoginPortal/Authenticated.tsx b/web/src/views/LoginPortal/Authenticated.tsx index ec17f14f8..b7a246c48 100644 --- a/web/src/views/LoginPortal/Authenticated.tsx +++ b/web/src/views/LoginPortal/Authenticated.tsx @@ -1,7 +1,9 @@ import React from "react"; -import SuccessIcon from "../../components/SuccessIcon"; + import { Typography, makeStyles } from "@material-ui/core"; +import SuccessIcon from "../../components/SuccessIcon"; + const Authenticated = function () { const classes = useStyles(); return ( @@ -11,14 +13,14 @@ const Authenticated = function () { Authenticated - ) -} + ); +}; -export default Authenticated +export default Authenticated; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ iconContainer: { marginBottom: theme.spacing(2), - flex: "0 0 100%" - } -})) \ No newline at end of file + flex: "0 0 100%", + }, +})); diff --git a/web/src/views/LoginPortal/AuthenticatedView/AuthenticatedView.tsx b/web/src/views/LoginPortal/AuthenticatedView/AuthenticatedView.tsx index 9b4b55002..2c4a91bb4 100644 --- a/web/src/views/LoginPortal/AuthenticatedView/AuthenticatedView.tsx +++ b/web/src/views/LoginPortal/AuthenticatedView/AuthenticatedView.tsx @@ -1,6 +1,8 @@ import React from "react"; + import { Grid, makeStyles, Button } from "@material-ui/core"; import { useHistory } from "react-router"; + import LoginLayout from "../../../layouts/LoginLayout"; import { LogoutRoute as SignOutRoute } from "../../../Routes"; import Authenticated from "../Authenticated"; @@ -15,13 +17,10 @@ const AuthenticatedView = function (props: Props) { const handleLogoutClick = () => { history.push(SignOutRoute); - } + }; return ( - + - ) -} + ); +}; -export default FirstFactorForm +export default FirstFactorForm; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { marginTop: theme.spacing(), marginBottom: theme.spacing(), @@ -219,4 +231,4 @@ const useStyles = makeStyles(theme => ({ textAlign: "right", verticalAlign: "bottom", }, -})); \ No newline at end of file +})); diff --git a/web/src/views/LoginPortal/LoginPortal.tsx b/web/src/views/LoginPortal/LoginPortal.tsx index f93bc00d0..47a9a0ae2 100644 --- a/web/src/views/LoginPortal/LoginPortal.tsx +++ b/web/src/views/LoginPortal/LoginPortal.tsx @@ -1,20 +1,26 @@ import React, { useEffect, Fragment, ReactNode, useState, useCallback } from "react"; + import { Switch, Route, Redirect, useHistory, useLocation } from "react-router"; -import FirstFactorForm from "./FirstFactor/FirstFactorForm"; -import SecondFactorForm from "./SecondFactor/SecondFactorForm"; -import { - FirstFactorRoute, SecondFactorRoute, SecondFactorTOTPRoute, - SecondFactorPushRoute, SecondFactorU2FRoute, AuthenticatedRoute -} from "../../Routes"; -import { useAutheliaState } from "../../hooks/State"; -import LoadingPage from "../LoadingPage/LoadingPage"; -import { AuthenticationLevel } from "../../services/State"; + +import { useConfiguration } from "../../hooks/Configuration"; import { useNotifications } from "../../hooks/NotificationsContext"; import { useRedirectionURL } from "../../hooks/RedirectionURL"; +import { useAutheliaState } from "../../hooks/State"; import { useUserPreferences as userUserInfo } from "../../hooks/UserInfo"; import { SecondFactorMethod } from "../../models/Methods"; -import { useConfiguration } from "../../hooks/Configuration"; +import { + FirstFactorRoute, + SecondFactorRoute, + SecondFactorTOTPRoute, + SecondFactorPushRoute, + SecondFactorU2FRoute, + AuthenticatedRoute, +} from "../../Routes"; +import { AuthenticationLevel } from "../../services/State"; +import LoadingPage from "../LoadingPage/LoadingPage"; import AuthenticatedView from "./AuthenticatedView/AuthenticatedView"; +import FirstFactorForm from "./FirstFactor/FirstFactorForm"; +import SecondFactorForm from "./SecondFactor/SecondFactorForm"; export interface Props { rememberMe: boolean; @@ -35,7 +41,9 @@ const LoginPortal = function (props: Props) { const redirect = useCallback((url: string) => history.push(url), [history]); // Fetch the state when portal is mounted. - useEffect(() => { fetchState() }, [fetchState]); + useEffect(() => { + fetchState(); + }, [fetchState]); // Fetch preferences and configuration when user is authenticated. useEffect(() => { @@ -76,9 +84,7 @@ const LoginPortal = function (props: Props) { // Redirect to the correct stage if not enough authenticated useEffect(() => { if (state) { - const redirectionSuffix = redirectionURL - ? `?rd=${encodeURIComponent(redirectionURL)}` - : ''; + const redirectionSuffix = redirectionURL ? `?rd=${encodeURIComponent(redirectionURL)}` : ""; if (state.authentication_level === AuthenticationLevel.Unauthenticated) { setFirstFactorDisabled(false); @@ -107,9 +113,10 @@ const LoginPortal = function (props: Props) { // Refresh state fetchState(); } - } + }; - const firstFactorReady = state !== undefined && + const firstFactorReady = + state !== undefined && state.authentication_level === AuthenticationLevel.Unauthenticated && location.pathname === FirstFactorRoute; @@ -123,16 +130,20 @@ const LoginPortal = function (props: Props) { resetPassword={props.resetPassword} onAuthenticationStart={() => setFirstFactorDisabled(true)} onAuthenticationFailure={() => setFirstFactorDisabled(false)} - onAuthenticationSuccess={handleAuthSuccess} /> + onAuthenticationSuccess={handleAuthSuccess} + /> - {state && userInfo && configuration ? fetchUserInfo()} - onAuthenticationSuccess={handleAuthSuccess} /> : null} + {state && userInfo && configuration ? ( + fetchUserInfo()} + onAuthenticationSuccess={handleAuthSuccess} + /> + ) : null} {userInfo ? : null} @@ -141,10 +152,10 @@ const LoginPortal = function (props: Props) { - ) -} + ); +}; -export default LoginPortal +export default LoginPortal; interface ComponentOrLoadingProps { ready: boolean; @@ -160,5 +171,5 @@ function ComponentOrLoading(props: ComponentOrLoadingProps) { {props.ready ? props.children : null} - ) -} \ No newline at end of file + ); +} diff --git a/web/src/views/LoginPortal/SecondFactor/IconWithContext.tsx b/web/src/views/LoginPortal/SecondFactor/IconWithContext.tsx index 8bc3ba178..8ada92ed3 100644 --- a/web/src/views/LoginPortal/SecondFactor/IconWithContext.tsx +++ b/web/src/views/LoginPortal/SecondFactor/IconWithContext.tsx @@ -1,4 +1,5 @@ import React, { ReactNode } from "react"; + import { makeStyles } from "@material-ui/core"; import classnames from "classnames"; @@ -11,7 +12,7 @@ interface IconWithContextProps { const IconWithContext = function (props: IconWithContextProps) { const iconSize = 64; - const style = makeStyles(theme => ({ + const style = makeStyles((theme) => ({ root: {}, iconContainer: { display: "flex", @@ -24,21 +25,17 @@ const IconWithContext = function (props: IconWithContextProps) { }, context: { display: "block", - } + }, }))(); return (
-
- {props.icon} -
-
-
- {props.context} +
{props.icon}
+
{props.context}
- ) -} + ); +}; -export default IconWithContext \ No newline at end of file +export default IconWithContext; diff --git a/web/src/views/LoginPortal/SecondFactor/MethodContainer.tsx b/web/src/views/LoginPortal/SecondFactor/MethodContainer.tsx index 3dedce99e..d73904788 100644 --- a/web/src/views/LoginPortal/SecondFactor/MethodContainer.tsx +++ b/web/src/views/LoginPortal/SecondFactor/MethodContainer.tsx @@ -1,13 +1,15 @@ import React, { ReactNode, Fragment } from "react"; + import { makeStyles, Typography, Link, useTheme } from "@material-ui/core"; -import InformationIcon from "../../../components/InformationIcon"; import classnames from "classnames"; + +import InformationIcon from "../../../components/InformationIcon"; import Authenticated from "../Authenticated"; export enum State { ALREADY_AUTHENTICATED = 1, NOT_REGISTERED = 2, - METHOD = 3 + METHOD = 3, } export interface Props { @@ -24,47 +26,40 @@ const DefaultMethodContainer = function (props: Props) { const style = useStyles(); let container: ReactNode; - let stateClass: string = ''; + let stateClass: string = ""; switch (props.state) { case State.ALREADY_AUTHENTICATED: - container = + container = ; stateClass = "state-already-authenticated"; break; case State.NOT_REGISTERED: - container = + container = ; stateClass = "state-not-registered"; break; case State.METHOD: - container = - {props.children} - + container = {props.children}; stateClass = "state-method"; break; } - return (
{props.title}
-
- {container} -
+
{container}
- {props.onRegisterClick - ? + {props.onRegisterClick ? ( + Not registered yet? - : null} + ) : null}
- ) -} + ); +}; -export default DefaultMethodContainer +export default DefaultMethodContainer; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ container: { height: "200px", }, @@ -76,17 +71,21 @@ const useStyles = makeStyles(theme => ({ alignItems: "center", alignContent: "center", justifyContent: "center", - } + }, })); function NotRegisteredContainer() { const theme = useTheme(); return ( -
- Register your first device by clicking on the link below +
+ +
+ + Register your first device by clicking on the link below + - ) + ); } interface MethodContainerProps { @@ -101,5 +100,5 @@ function MethodContainer(props: MethodContainerProps) {
{props.children}
{props.explanation} - ) -} \ No newline at end of file + ); +} diff --git a/web/src/views/LoginPortal/SecondFactor/MethodSelectionDialog.tsx b/web/src/views/LoginPortal/SecondFactor/MethodSelectionDialog.tsx index 1e636fbda..b2ebaf9f0 100644 --- a/web/src/views/LoginPortal/SecondFactor/MethodSelectionDialog.tsx +++ b/web/src/views/LoginPortal/SecondFactor/MethodSelectionDialog.tsx @@ -1,9 +1,20 @@ import React, { ReactNode } from "react"; -import { Dialog, Grid, makeStyles, DialogContent, Button, DialogActions, Typography, useTheme } from "@material-ui/core"; -import PushNotificationIcon from "../../../components/PushNotificationIcon"; -import PieChartIcon from "../../../components/PieChartIcon"; -import { SecondFactorMethod } from "../../../models/Methods"; + +import { + Dialog, + Grid, + makeStyles, + DialogContent, + Button, + DialogActions, + Typography, + useTheme, +} from "@material-ui/core"; + import FingerTouchIcon from "../../../components/FingerTouchIcon"; +import PieChartIcon from "../../../components/PieChartIcon"; +import PushNotificationIcon from "../../../components/PushNotificationIcon"; +import { SecondFactorMethod } from "../../../models/Methods"; export interface Props { open: boolean; @@ -18,37 +29,45 @@ const MethodSelectionDialog = function (props: Props) { const style = useStyles(); const theme = useTheme(); - const pieChartIcon = + const pieChartIcon = ( + + ); return ( - + - {props.methods.has(SecondFactorMethod.TOTP) - ? props.onClick(SecondFactorMethod.TOTP)} /> - : null} - {props.methods.has(SecondFactorMethod.U2F) && props.u2fSupported - ? props.onClick(SecondFactorMethod.TOTP)} + /> + ) : null} + {props.methods.has(SecondFactorMethod.U2F) && props.u2fSupported ? ( + } - onClick={() => props.onClick(SecondFactorMethod.U2F)} /> - : null} - {props.methods.has(SecondFactorMethod.MobilePush) - ? props.onClick(SecondFactorMethod.U2F)} + /> + ) : null} + {props.methods.has(SecondFactorMethod.MobilePush) ? ( + } - onClick={() => props.onClick(SecondFactorMethod.MobilePush)} /> - : null} + onClick={() => props.onClick(SecondFactorMethod.MobilePush)} + /> + ) : null} @@ -57,16 +76,16 @@ const MethodSelectionDialog = function (props: Props) { - ) -} + ); +}; -export default MethodSelectionDialog +export default MethodSelectionDialog; -const useStyles = makeStyles(theme => ({ +const useStyles = makeStyles((theme) => ({ root: { textAlign: "center", - } -})) + }, +})); interface MethodItemProps { id: string; @@ -77,7 +96,7 @@ interface MethodItemProps { } function MethodItem(props: MethodItemProps) { - const style = makeStyles(theme => ({ + const style = makeStyles((theme) => ({ item: { paddingTop: theme.spacing(4), paddingBottom: theme.spacing(4), @@ -89,18 +108,23 @@ function MethodItem(props: MethodItemProps) { }, buttonRoot: { display: "block", - } + }, }))(); return ( - - ) -} \ No newline at end of file + ); +} diff --git a/web/src/views/LoginPortal/SecondFactor/OTPDial.tsx b/web/src/views/LoginPortal/SecondFactor/OTPDial.tsx index 9a8429fe5..7e88a0f16 100644 --- a/web/src/views/LoginPortal/SecondFactor/OTPDial.tsx +++ b/web/src/views/LoginPortal/SecondFactor/OTPDial.tsx @@ -1,16 +1,18 @@ import React, { Fragment } from "react"; -import OtpInput from "react-otp-input"; -import TimerIcon from "../../../components/TimerIcon"; + import { makeStyles } from "@material-ui/core"; import classnames from "classnames"; +import OtpInput from "react-otp-input"; + +import SuccessIcon from "../../../components/SuccessIcon"; +import TimerIcon from "../../../components/TimerIcon"; import IconWithContext from "./IconWithContext"; import { State } from "./OneTimePasswordMethod"; -import SuccessIcon from "../../../components/SuccessIcon"; export interface Props { passcode: string; state: State; - period: number + period: number; onChange: (passcode: string) => void; } @@ -26,22 +28,18 @@ const OTPDial = function (props: Props) { numInputs={6} isDisabled={props.state === State.InProgress || props.state === State.Success} hasErrored={props.state === State.Failure} - inputStyle={classnames(style.otpDigitInput, props.state === State.Failure ? style.inputError : "")} /> + inputStyle={classnames(style.otpDigitInput, props.state === State.Failure ? style.inputError : "")} + /> - ) + ); - return ( - } - context={dial} /> - ) -} + return } context={dial} />; +}; -export default OTPDial +export default OTPDial; -const useStyles = makeStyles(theme => ({ - timeProgress: { - }, +const useStyles = makeStyles((theme) => ({ + timeProgress: {}, register: { marginTop: theme.spacing(), }, @@ -59,7 +57,7 @@ const useStyles = makeStyles(theme => ({ }, inputError: { border: "1px solid rgba(255, 2, 2, 0.95)", - } + }, })); interface IconProps { @@ -70,8 +68,10 @@ interface IconProps { function Icon(props: IconProps) { return ( - {props.state !== State.Success ? : null} + {props.state !== State.Success ? ( + + ) : null} {props.state === State.Success ? : null} - ) -} \ No newline at end of file + ); +} diff --git a/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx b/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx index e4bae1737..5e099b48a 100644 --- a/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx +++ b/web/src/views/LoginPortal/SecondFactor/OneTimePasswordMethod.tsx @@ -1,9 +1,10 @@ import React, { useState, useEffect, useCallback } from "react"; + +import { useRedirectionURL } from "../../../hooks/RedirectionURL"; +import { completeTOTPSignIn } from "../../../services/OneTimePassword"; +import { AuthenticationLevel } from "../../../services/State"; import MethodContainer, { State as MethodContainerState } from "./MethodContainer"; import OTPDial from "./OTPDial"; -import { completeTOTPSignIn } from "../../../services/OneTimePassword"; -import { useRedirectionURL } from "../../../hooks/RedirectionURL"; -import { AuthenticationLevel } from "../../../services/State"; export enum State { Idle = 1, @@ -16,7 +17,7 @@ export interface Props { id: string; authenticationLevel: AuthenticationLevel; registered: boolean; - totp_period: number + totp_period: number; onRegisterClick: () => void; onSignInError: (err: Error) => void; @@ -25,9 +26,9 @@ export interface Props { const OneTimePasswordMethod = function (props: Props) { const [passcode, setPasscode] = useState(""); - const [state, setState] = useState(props.authenticationLevel === AuthenticationLevel.TwoFactor - ? State.Success - : State.Idle); + const [state, setState] = useState( + props.authenticationLevel === AuthenticationLevel.TwoFactor ? State.Success : State.Idle, + ); const redirectionURL = useRedirectionURL(); const { onSignInSuccess, onSignInError } = props; @@ -67,7 +68,9 @@ const OneTimePasswordMethod = function (props: Props) { } }, [props.authenticationLevel, setState]); - useEffect(() => { signInFunc() }, [signInFunc]); + useEffect(() => { + signInFunc(); + }, [signInFunc]); let methodState = MethodContainerState.METHOD; if (props.authenticationLevel === AuthenticationLevel.TwoFactor) { @@ -82,14 +85,11 @@ const OneTimePasswordMethod = function (props: Props) { title="One-Time Password" explanation="Enter one-time password" state={methodState} - onRegisterClick={props.onRegisterClick}> - + onRegisterClick={props.onRegisterClick} + > + - ) -} + ); +}; -export default OneTimePasswordMethod \ No newline at end of file +export default OneTimePasswordMethod; diff --git a/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx b/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx index 3a6a0100b..53acd7290 100644 --- a/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx +++ b/web/src/views/LoginPortal/SecondFactor/PushNotificationMethod.tsx @@ -1,13 +1,15 @@ import React, { useEffect, useCallback, useState, ReactNode } from "react"; -import MethodContainer, { State as MethodContainerState } from "./MethodContainer"; -import PushNotificationIcon from "../../../components/PushNotificationIcon"; -import { completePushNotificationSignIn } from "../../../services/PushNotification"; + import { Button, makeStyles } from "@material-ui/core"; -import { useRedirectionURL } from "../../../hooks/RedirectionURL"; -import { useIsMountedRef } from "../../../hooks/Mounted"; -import SuccessIcon from "../../../components/SuccessIcon"; + import FailureIcon from "../../../components/FailureIcon"; +import PushNotificationIcon from "../../../components/PushNotificationIcon"; +import SuccessIcon from "../../../components/SuccessIcon"; +import { useIsMountedRef } from "../../../hooks/Mounted"; +import { useRedirectionURL } from "../../../hooks/RedirectionURL"; +import { completePushNotificationSignIn } from "../../../services/PushNotification"; import { AuthenticationLevel } from "../../../services/State"; +import MethodContainer, { State as MethodContainerState } from "./MethodContainer"; export enum State { SignInInProgress = 1, @@ -50,7 +52,7 @@ const PushNotificationMethod = function (props: Props) { setState(State.Success); setTimeout(() => { if (!mounted.current) return; - onSignInSuccessCallback(res ? res.redirect : undefined) + onSignInSuccessCallback(res ? res.redirect : undefined); }, 1500); } catch (err) { // If the request was initiated and the user changed 2FA method in the meantime, @@ -63,7 +65,9 @@ const PushNotificationMethod = function (props: Props) { } }, [onSignInErrorCallback, onSignInSuccessCallback, setState, redirectionURL, mounted, props.authenticationLevel]); - useEffect(() => { signInFunc() }, [signInFunc]); + useEffect(() => { + signInFunc(); + }, [signInFunc]); // Set successful state if user is already authenticated. useEffect(() => { @@ -94,23 +98,24 @@ const PushNotificationMethod = function (props: Props) { id={props.id} title="Push Notification" explanation="A notification has been sent to your smartphone" - state={methodState}> -
- {icon} -
-
- + state={methodState} + > +
{icon}
+
+
- ) -} + ); +}; -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} + /> } - className={state === State.Failure ? undefined : "hidden"} /> + const failure = ( + } + context={ + + } + 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 + return ; } } 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(); } - }} /> + }} + /> - + + 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)} + /> + className={style.fullWidth} + > + Reset + + 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 @@ -/// \ No newline at end of file +/// diff --git a/web/types/react-otp-input/index.d.ts b/web/types/react-otp-input/index.d.ts index a872f08d0..f7bb33ed0 100644 --- a/web/types/react-otp-input/index.d.ts +++ b/web/types/react-otp-input/index.d.ts @@ -1,2 +1 @@ - -declare module 'react-otp-input'; \ No newline at end of file +declare module "react-otp-input"; diff --git a/web/yarn.lock b/web/yarn.lock index 48acf0b1e..110b41e9b 100644 --- a/web/yarn.lock +++ b/web/yarn.lock @@ -4780,6 +4780,11 @@ escodegen@^1.14.1: optionalDependencies: source-map "~0.6.1" +eslint-config-prettier@^7.1.0: + version "7.1.0" + resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-7.1.0.tgz#5402eb559aa94b894effd6bddfa0b1ca051c858f" + integrity sha512-9sm5/PxaFG7qNJvJzTROMM1Bk1ozXVTKI0buKOyb0Bsr1hrwi0H/TzxF/COtf1uxikIK8SwhX7K6zg78jAzbeA== + eslint-config-react-app@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-6.0.0.tgz#ccff9fc8e36b322902844cbd79197982be355a0e" @@ -4787,6 +4792,11 @@ eslint-config-react-app@^6.0.0: dependencies: confusing-browser-globals "^1.0.10" +eslint-formatter-rdjson@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/eslint-formatter-rdjson/-/eslint-formatter-rdjson-1.0.3.tgz#ab1bb2174aefdc802befaaf7f385d44b97f6d9a4" + integrity sha512-YqqNcP+xiLEWXz1GdAGKhnIRgtjOeiTPoG/hSIx/SzOt4n+fwcxRuiJE3DKpfSIJjodXS617qfRa6cZx/kIkbw== + eslint-import-resolver-node@^0.3.4: version "0.3.4" resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717" @@ -4795,6 +4805,17 @@ eslint-import-resolver-node@^0.3.4: debug "^2.6.9" resolve "^1.13.1" +eslint-import-resolver-typescript@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.3.0.tgz#0870988098bc6c6419c87705e6b42bee89425445" + integrity sha512-MHSXvmj5e0SGOOBhBbt7C+fWj1bJbtSYFAD85Xeg8nvUtuooTod2HQb8bfhE9f5QyyNxEfgzqOYFCvmdDIcCuw== + dependencies: + debug "^4.1.1" + glob "^7.1.6" + is-glob "^4.0.1" + resolve "^1.17.0" + tsconfig-paths "^3.9.0" + eslint-module-utils@^2.6.0: version "2.6.0" resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz#579ebd094f56af7797d19c9866c9c9486629bfa6" @@ -4854,6 +4875,13 @@ eslint-plugin-jsx-a11y@^6.3.1: jsx-ast-utils "^3.1.0" language-tags "^1.0.5" +eslint-plugin-prettier@^3.3.0: + version "3.3.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.0.tgz#61e295349a65688ffac0b7808ef0a8244bdd8d40" + integrity sha512-tMTwO8iUWlSRZIwS9k7/E4vrTsfvsrcM5p1eftyuqWH25nKsz/o6/54I7jwQ/3zobISyC7wMy9ZsFwgTxOcOpQ== + dependencies: + prettier-linter-helpers "^1.0.0" + eslint-plugin-react-hooks@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556" @@ -5240,6 +5268,11 @@ fast-deep-equal@^3.1.1: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4" integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA== +fast-diff@^1.1.2: + version "1.2.0" + resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03" + integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== + fast-glob@^3.1.1: version "3.2.4" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3" @@ -9353,6 +9386,18 @@ prepend-http@^1.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= +prettier-linter-helpers@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b" + integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w== + dependencies: + fast-diff "^1.1.2" + +prettier@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5" + integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q== + pretty-bytes@^5.3.0: version "5.4.1" resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"