Login: make it visible that it's loading.

master
Tom Hacohen 4 years ago
parent 430d313be1
commit a540514f87

@ -22,16 +22,20 @@ import LoadingIndicator from "./widgets/LoadingIndicator";
export default function LoginGate() {
const credentials = useCredentials();
const dispatch = useDispatch();
const [loading, setLoading] = React.useState(false);
const [fetchError, setFetchError] = React.useState<Error>();
async function onFormSubmit(username: string, password: string, serviceApiUrl?: string) {
try {
setLoading(true);
setFetchError(undefined);
const ret = login(username, password, serviceApiUrl);
await ret.payload;
dispatch(ret);
} catch (e) {
setFetchError(e);
} finally {
setLoading(false);
}
}
@ -56,6 +60,7 @@ export default function LoginGate() {
<h2>Please Log In</h2>
<LoginForm
onSubmit={onFormSubmit}
loading={loading}
error={fetchError}
/>
<hr style={style.divider} />

@ -11,6 +11,7 @@ import Switch from "@material-ui/core/Switch";
import ExternalLink from "../widgets/ExternalLink";
import * as C from "../constants";
import LoadingIndicator from "../widgets/LoadingIndicator";
interface FormErrors {
errorEmail?: string;
@ -128,6 +129,15 @@ class LoginForm extends React.PureComponent {
);
}
if (this.props.loading) {
return (
<div style={{ textAlign: "center" }}>
<LoadingIndicator />
<p>Deriving encryption data...</p>
</div>
);
}
return (
<React.Fragment>
{(this.props.error) && (<div>Error! {this.props.error.message}</div>)}

@ -6,6 +6,7 @@ import { createAction as origCreateAction, ActionMeta } from "redux-actions";
import * as Etebase from "etebase";
import { SettingsType } from "./";
import { startTask } from "../helpers";
type FunctionAny = (...args: any[]) => any;
@ -34,8 +35,10 @@ export const logout = createAction(
export const login = createAction(
"LOGIN",
async (username: string, password: string, server: string | undefined) => {
return startTask((async () => {
const etebase = await Etebase.Account.login(username, password, server);
return etebase.save();
}));
}
);

Loading…
Cancel
Save