diff --git a/src/App.tsx b/src/App.tsx index 453e73a..8da189e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,7 +27,6 @@ import { List, ListItem } from "./widgets/List"; import withSpin from "./widgets/withSpin"; import ErrorBoundary from "./components/ErrorBoundary"; import SideMenu from "./SideMenu"; -import LoginGate from "./LoginGate"; import { RouteResolver } from "./routes"; import * as store from "./store"; @@ -35,6 +34,7 @@ import * as actions from "./store/actions"; import { useCredentials } from "./credentials"; import { SyncManager } from "./sync/SyncManager"; +import MainRouter from "./MainRouter"; export const routeResolver = new RouteResolver({ home: "", @@ -85,6 +85,8 @@ export const routeResolver = new RouteResolver({ new: "new", import: "import", }, + login: { + }, signup: { }, settings: { @@ -239,7 +241,7 @@ export default function App() { - + diff --git a/src/LoginGate.tsx b/src/LoginPage.tsx similarity index 55% rename from src/LoginGate.tsx rename to src/LoginPage.tsx index a21b3b0..c885449 100644 --- a/src/LoginGate.tsx +++ b/src/LoginPage.tsx @@ -7,7 +7,6 @@ import { useDispatch } from "react-redux"; import Container from "./widgets/Container"; import ExternalLink from "./widgets/ExternalLink"; -import SyncGate from "./SyncGate"; import LoginForm from "./components/LoginForm"; import { login } from "./store/actions"; @@ -20,18 +19,30 @@ import SignedPagesBadge from "./images/signed-pages-badge.svg"; import { useCredentials } from "./credentials"; import LoadingIndicator from "./widgets/LoadingIndicator"; import { startTask } from "./helpers"; -import { Switch, Route } from "react-router"; +import { Redirect, useLocation } from "react-router"; import { routeResolver } from "./App"; -import SignupPage from "./SignupPage"; import { Link } from "react-router-dom"; +interface LocationState { + from: { + pathname: string; + }; +} -export default function LoginGate() { +export default function LoginPage() { const credentials = useCredentials(); const dispatch = useDispatch(); + const location = useLocation(); const [loading, setLoading] = React.useState(false); const [fetchError, setFetchError] = React.useState(); + const { from } = location.state as LocationState || { from: { pathname: routeResolver.getRoute("home") } }; + if (credentials) { + return ( + + ); + } + async function onFormSubmit(username: string, password: string, serviceApiUrl?: string) { try { setLoading(true); @@ -56,7 +67,7 @@ export default function LoginGate() { return ( ); - } else if (credentials === null) { + } else { const style = { isSafe: { textDecoration: "none", @@ -69,43 +80,28 @@ export default function LoginGate() { }; return ( - - ( - - )} + +

Log In

+
or create an account
+ - - -

Log In

-
or create an account
- -
- - SignedPgaes badge - -
    -
  • - The EteSync Website -
  • -
  • - Is the web client safe to use? -
  • -
  • Source code
  • -
-
-
-
+
+ + SignedPgaes badge + +
    +
  • + The EteSync Website +
  • +
  • + Is the web client safe to use? +
  • +
  • Source code
  • +
+ ); } - - return ( - - ); } diff --git a/src/MainRouter.tsx b/src/MainRouter.tsx new file mode 100644 index 0000000..585815a --- /dev/null +++ b/src/MainRouter.tsx @@ -0,0 +1,63 @@ +// SPDX-FileCopyrightText: © 2017 EteSync Authors +// SPDX-License-Identifier: AGPL-3.0-only + +import * as React from "react"; +import { Route, Switch, Redirect, RouteProps } from "react-router"; +import { useCredentials } from "./credentials"; +import LoadingIndicator from "./widgets/LoadingIndicator"; +import SyncGate from "./SyncGate"; +import { routeResolver } from "./App"; +import SignupPage from "./SignupPage"; +import LoginPage from "./LoginPage"; + + +export default function MainRouter() { + return ( + + + + + + + + + + + + ); +} + +function PrivateRoute(props: Omit) { + const credentials = useCredentials(); + const { children, ...rest } = props; + + if (credentials === undefined) { + return (); + } + + return ( + ( + (credentials) ? ( + children + ) : ( + + ) + )} + /> + ); +}