Fix: No feedback when waiting for the server on a /delete_devices request with SSO (#10795)
* add spinner while requests in progress during sso interactive auth * strict
This commit is contained in:
parent
de16d347e9
commit
b8482b6bc4
3 changed files with 122 additions and 12 deletions
|
@ -209,6 +209,12 @@ export default class InteractiveAuthComponent<T> extends React.Component<Interac
|
||||||
|
|
||||||
private onBusyChanged = (busy: boolean): void => {
|
private onBusyChanged = (busy: boolean): void => {
|
||||||
// if we've started doing stuff, reset the error messages
|
// if we've started doing stuff, reset the error messages
|
||||||
|
// The JS SDK eagerly reports itself as "not busy" right after any
|
||||||
|
// immediate work has completed, but that's not really what we want at
|
||||||
|
// the UI layer, so we ignore this signal and show a spinner until
|
||||||
|
// there's a new screen to show the user. This is implemented by setting
|
||||||
|
// `busy: false` in `authStateUpdated`.
|
||||||
|
// See also https://github.com/vector-im/element-web/issues/12546
|
||||||
if (busy) {
|
if (busy) {
|
||||||
this.setState({
|
this.setState({
|
||||||
busy: true,
|
busy: true,
|
||||||
|
@ -216,12 +222,11 @@ export default class InteractiveAuthComponent<T> extends React.Component<Interac
|
||||||
errorCode: undefined,
|
errorCode: undefined,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// The JS SDK eagerly reports itself as "not busy" right after any
|
|
||||||
// immediate work has completed, but that's not really what we want at
|
// authStateUpdated is not called during sso flows
|
||||||
// the UI layer, so we ignore this signal and show a spinner until
|
if (!busy && (this.state.authStage === AuthType.Sso || this.state.authStage === AuthType.SsoUnstable)) {
|
||||||
// there's a new screen to show the user. This is implemented by setting
|
this.setState({ busy });
|
||||||
// `busy: false` in `authStateUpdated`.
|
}
|
||||||
// See also https://github.com/vector-im/element-web/issues/12546
|
|
||||||
};
|
};
|
||||||
|
|
||||||
private setFocus(): void {
|
private setFocus(): void {
|
||||||
|
|
|
@ -861,6 +861,7 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
|
||||||
|
|
||||||
public render(): React.ReactNode {
|
public render(): React.ReactNode {
|
||||||
let continueButton: JSX.Element;
|
let continueButton: JSX.Element;
|
||||||
|
|
||||||
const cancelButton = (
|
const cancelButton = (
|
||||||
<AccessibleButton
|
<AccessibleButton
|
||||||
onClick={this.props.onCancel ?? null}
|
onClick={this.props.onCancel ?? null}
|
||||||
|
@ -902,8 +903,14 @@ export class SSOAuthEntry extends React.Component<ISSOAuthEntryProps, ISSOAuthEn
|
||||||
<Fragment>
|
<Fragment>
|
||||||
{errorSection}
|
{errorSection}
|
||||||
<div className="mx_InteractiveAuthEntryComponents_sso_buttons">
|
<div className="mx_InteractiveAuthEntryComponents_sso_buttons">
|
||||||
{cancelButton}
|
{this.props.busy ? (
|
||||||
{continueButton}
|
<Spinner w={24} h={24} />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{cancelButton}
|
||||||
|
{continueButton}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
);
|
);
|
||||||
|
|
|
@ -16,15 +16,20 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { render, screen } from "@testing-library/react";
|
import { fireEvent, render, screen, act } from "@testing-library/react";
|
||||||
import userEvent from "@testing-library/user-event";
|
import userEvent from "@testing-library/user-event";
|
||||||
|
import { mocked } from "jest-mock";
|
||||||
|
|
||||||
import InteractiveAuthDialog from "../../../../src/components/views/dialogs/InteractiveAuthDialog";
|
import InteractiveAuthDialog from "../../../../src/components/views/dialogs/InteractiveAuthDialog";
|
||||||
import { flushPromises, getMockClientWithEventEmitter, unmockClientPeg } from "../../../test-utils";
|
import { clearAllModals, flushPromises, getMockClientWithEventEmitter, unmockClientPeg } from "../../../test-utils";
|
||||||
|
|
||||||
describe("InteractiveAuthDialog", function () {
|
describe("InteractiveAuthDialog", function () {
|
||||||
|
const homeserverUrl = "https://matrix.org";
|
||||||
|
const authUrl = "https://auth.com";
|
||||||
const mockClient = getMockClientWithEventEmitter({
|
const mockClient = getMockClientWithEventEmitter({
|
||||||
generateClientSecret: jest.fn().mockReturnValue("t35tcl1Ent5ECr3T"),
|
generateClientSecret: jest.fn().mockReturnValue("t35tcl1Ent5ECr3T"),
|
||||||
|
getFallbackAuthUrl: jest.fn().mockReturnValue(authUrl),
|
||||||
|
getHomeserverUrl: jest.fn().mockReturnValue(homeserverUrl),
|
||||||
});
|
});
|
||||||
|
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
|
@ -37,13 +42,15 @@ describe("InteractiveAuthDialog", function () {
|
||||||
const getPasswordField = () => screen.getByLabelText("Password");
|
const getPasswordField = () => screen.getByLabelText("Password");
|
||||||
const getSubmitButton = () => screen.getByRole("button", { name: "Continue" });
|
const getSubmitButton = () => screen.getByRole("button", { name: "Continue" });
|
||||||
|
|
||||||
beforeEach(function () {
|
beforeEach(async function () {
|
||||||
jest.clearAllMocks();
|
jest.clearAllMocks();
|
||||||
mockClient.credentials = { userId: null };
|
mockClient.credentials = { userId: null };
|
||||||
|
await clearAllModals();
|
||||||
});
|
});
|
||||||
|
|
||||||
afterAll(() => {
|
afterAll(async () => {
|
||||||
unmockClientPeg();
|
unmockClientPeg();
|
||||||
|
await clearAllModals();
|
||||||
});
|
});
|
||||||
|
|
||||||
it("Should successfully complete a password flow", async () => {
|
it("Should successfully complete a password flow", async () => {
|
||||||
|
@ -94,4 +101,95 @@ describe("InteractiveAuthDialog", function () {
|
||||||
expect(onFinished).toHaveBeenCalledTimes(1);
|
expect(onFinished).toHaveBeenCalledTimes(1);
|
||||||
expect(onFinished).toHaveBeenCalledWith(true, { a: 1 });
|
expect(onFinished).toHaveBeenCalledWith(true, { a: 1 });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe("SSO flow", () => {
|
||||||
|
it("should close on cancel", () => {
|
||||||
|
const onFinished = jest.fn();
|
||||||
|
const makeRequest = jest.fn().mockResolvedValue({ a: 1 });
|
||||||
|
|
||||||
|
mockClient.credentials = { userId: "@user:id" };
|
||||||
|
const authData = {
|
||||||
|
session: "sess",
|
||||||
|
flows: [{ stages: ["m.login.sso"] }],
|
||||||
|
};
|
||||||
|
|
||||||
|
renderComponent({ makeRequest, onFinished, authData });
|
||||||
|
|
||||||
|
expect(screen.getByText("To continue, use Single Sign On to prove your identity.")).toBeInTheDocument();
|
||||||
|
|
||||||
|
fireEvent.click(screen.getByText("Cancel"));
|
||||||
|
|
||||||
|
expect(onFinished).toHaveBeenCalledWith(false, null);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should complete an sso flow", async () => {
|
||||||
|
jest.spyOn(global.window, "addEventListener");
|
||||||
|
// @ts-ignore
|
||||||
|
jest.spyOn(global.window, "open").mockImplementation(() => {});
|
||||||
|
const onFinished = jest.fn();
|
||||||
|
const successfulResult = { test: 1 };
|
||||||
|
const makeRequest = jest
|
||||||
|
.fn()
|
||||||
|
.mockRejectedValueOnce({ httpStatus: 401, data: { flows: [{ stages: ["m.login.sso"] }] } })
|
||||||
|
.mockResolvedValue(successfulResult);
|
||||||
|
|
||||||
|
mockClient.credentials = { userId: "@user:id" };
|
||||||
|
const authData = {
|
||||||
|
session: "sess",
|
||||||
|
flows: [{ stages: ["m.login.sso"] }],
|
||||||
|
};
|
||||||
|
|
||||||
|
renderComponent({ makeRequest, onFinished, authData });
|
||||||
|
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
expect(screen.getByText("To continue, use Single Sign On to prove your identity.")).toBeInTheDocument();
|
||||||
|
fireEvent.click(screen.getByText("Single Sign On"));
|
||||||
|
|
||||||
|
// no we're on the sso auth screen
|
||||||
|
expect(screen.getByText("Click the button below to confirm your identity.")).toBeInTheDocument();
|
||||||
|
|
||||||
|
// launch sso
|
||||||
|
fireEvent.click(screen.getByText("Confirm"));
|
||||||
|
expect(global.window.open).toHaveBeenCalledWith(authUrl, "_blank");
|
||||||
|
|
||||||
|
const onWindowReceiveMessageCall = mocked(window.addEventListener).mock.calls.find(
|
||||||
|
(args) => args[0] === "message",
|
||||||
|
);
|
||||||
|
expect(onWindowReceiveMessageCall).toBeTruthy();
|
||||||
|
// get the handle from SSO auth component
|
||||||
|
// so we can pretend sso auth was completed
|
||||||
|
const onWindowReceiveMessage = onWindowReceiveMessageCall![1];
|
||||||
|
|
||||||
|
// complete sso successfully
|
||||||
|
act(() => {
|
||||||
|
// @ts-ignore
|
||||||
|
onWindowReceiveMessage({ data: "authDone", origin: homeserverUrl });
|
||||||
|
});
|
||||||
|
|
||||||
|
// expect(makeRequest).toHaveBeenCalledWith({ session: authData.session })
|
||||||
|
|
||||||
|
// spinner displayed
|
||||||
|
expect(screen.getByRole("progressbar")).toBeInTheDocument();
|
||||||
|
// cancel/confirm buttons hidden while request in progress
|
||||||
|
expect(screen.queryByText("Confirm")).not.toBeInTheDocument();
|
||||||
|
|
||||||
|
await flushPromises();
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
// nothing in progress
|
||||||
|
expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
|
||||||
|
|
||||||
|
// auth completed, now make the request again with auth
|
||||||
|
fireEvent.click(screen.getByText("Confirm"));
|
||||||
|
// loading while making request
|
||||||
|
expect(screen.getByRole("progressbar")).toBeInTheDocument();
|
||||||
|
|
||||||
|
expect(makeRequest).toHaveBeenCalledTimes(2);
|
||||||
|
|
||||||
|
await flushPromises();
|
||||||
|
|
||||||
|
expect(onFinished).toHaveBeenCalledWith(true, successfulResult);
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue