[next] UserBox with respect to auth settings (#2079)

* feat: adapt userbox according to settings in embed stream

* fix: lint and test

* feat: respect allowRegistration
This commit is contained in:
Kiwi
2018-11-20 17:56:02 +01:00
committed by GitHub
parent 6fa0c7f538
commit 13147c4ba4
26 changed files with 534 additions and 43 deletions
@@ -9,7 +9,7 @@ import { UserBoxContainer } from "./UserBoxContainer";
// Remove relay refs so we can stub the props.
const UserBoxContainerN = removeFragmentRefs(UserBoxContainer);
it("renders correctly", () => {
it("renders fully", () => {
const props: PropTypesOf<typeof UserBoxContainerN> = {
local: {
authPopup: {
@@ -17,8 +17,212 @@ it("renders correctly", () => {
focus: false,
view: "SIGN_IN",
},
authJTI: "JTI",
},
me: null,
settings: {
auth: {
integrations: {
facebook: {
enabled: true,
allowRegistration: true,
},
google: {
enabled: false,
allowRegistration: true,
},
sso: {
enabled: false,
allowRegistration: true,
},
local: {
enabled: true,
allowRegistration: true,
},
oidc: [],
},
},
},
// tslint:disable-next-line:no-empty
showAuthPopup: async () => {},
// tslint:disable-next-line:no-empty
setAuthPopupState: async () => {},
// tslint:disable-next-line:no-empty
signOut: async () => {},
};
const wrapper = shallow(<UserBoxContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("renders without logout button", () => {
const props: PropTypesOf<typeof UserBoxContainerN> = {
local: {
authPopup: {
open: false,
focus: false,
view: "SIGN_IN",
},
authJTI: null,
},
me: null,
settings: {
auth: {
integrations: {
facebook: {
enabled: true,
allowRegistration: true,
},
google: {
enabled: false,
allowRegistration: true,
},
sso: {
enabled: false,
allowRegistration: true,
},
local: {
enabled: true,
allowRegistration: true,
},
oidc: [],
},
},
},
// tslint:disable-next-line:no-empty
showAuthPopup: async () => {},
// tslint:disable-next-line:no-empty
setAuthPopupState: async () => {},
// tslint:disable-next-line:no-empty
signOut: async () => {},
};
const wrapper = shallow(<UserBoxContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("renders sso only", () => {
const props: PropTypesOf<typeof UserBoxContainerN> = {
local: {
authPopup: {
open: false,
focus: false,
view: "SIGN_IN",
},
authJTI: "JTI",
},
me: null,
settings: {
auth: {
integrations: {
facebook: {
enabled: false,
allowRegistration: true,
},
google: {
enabled: false,
allowRegistration: true,
},
sso: {
enabled: true,
allowRegistration: true,
},
local: {
enabled: false,
allowRegistration: true,
},
oidc: [],
},
},
},
// tslint:disable-next-line:no-empty
showAuthPopup: async () => {},
// tslint:disable-next-line:no-empty
setAuthPopupState: async () => {},
// tslint:disable-next-line:no-empty
signOut: async () => {},
};
const wrapper = shallow(<UserBoxContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("renders sso only without logut button", () => {
const props: PropTypesOf<typeof UserBoxContainerN> = {
local: {
authPopup: {
open: false,
focus: false,
view: "SIGN_IN",
},
authJTI: "JTI",
},
me: null,
settings: {
auth: {
integrations: {
facebook: {
enabled: false,
allowRegistration: true,
},
google: {
enabled: false,
allowRegistration: true,
},
sso: {
enabled: true,
allowRegistration: true,
},
local: {
enabled: false,
allowRegistration: true,
},
oidc: [],
},
},
},
// tslint:disable-next-line:no-empty
showAuthPopup: async () => {},
// tslint:disable-next-line:no-empty
setAuthPopupState: async () => {},
// tslint:disable-next-line:no-empty
signOut: async () => {},
};
const wrapper = shallow(<UserBoxContainerN {...props} />);
expect(wrapper).toMatchSnapshot();
});
it("renders without register button", () => {
const props: PropTypesOf<typeof UserBoxContainerN> = {
local: {
authPopup: {
open: false,
focus: false,
view: "SIGN_IN",
},
authJTI: "JTI",
},
me: null,
settings: {
auth: {
integrations: {
facebook: {
enabled: true,
allowRegistration: false,
},
google: {
enabled: false,
allowRegistration: false,
},
sso: {
enabled: false,
allowRegistration: true,
},
local: {
enabled: true,
allowRegistration: false,
},
oidc: [],
},
},
},
// tslint:disable-next-line:no-empty
showAuthPopup: async () => {},
// tslint:disable-next-line:no-empty
@@ -8,6 +8,7 @@ import {
} from "talk-framework/lib/relay";
import { SignOutMutation, withSignOutMutation } from "talk-framework/mutations";
import { UserBoxContainer_me as MeData } from "talk-stream/__generated__/UserBoxContainer_me.graphql";
import { UserBoxContainer_settings as SettingsData } from "talk-stream/__generated__/UserBoxContainer_settings.graphql";
import { UserBoxContainerLocal as Local } from "talk-stream/__generated__/UserBoxContainerLocal.graphql";
import UserBoxUnauthenticated from "talk-stream/components/UserBoxUnauthenticated";
import {
@@ -24,6 +25,7 @@ import UserBoxAuthenticated from "../components/UserBoxAuthenticated";
interface InnerProps {
local: Local;
me: MeData | null;
settings: SettingsData;
showAuthPopup: ShowAuthPopupMutation;
setAuthPopupState: SetAuthPopupStateMutation;
signOut: SignOutMutation;
@@ -37,6 +39,31 @@ export class UserBoxContainer extends Component<InnerProps> {
private handleRegister = () => this.props.showAuthPopup({ view: "SIGN_UP" });
private handleSignOut = () => this.props.signOut();
private get supportsLogout() {
return !!this.props.local.authJTI;
}
private get supportsRegister() {
const integrations = this.props.settings.auth.integrations;
return (
(integrations.facebook.allowRegistration &&
integrations.facebook.enabled) ||
(integrations.google.allowRegistration && integrations.google.enabled) ||
(integrations.local.allowRegistration && integrations.local.enabled) ||
integrations.oidc.some(c => c.allowRegistration && c.enabled)
);
}
private get weControlAuth() {
const integrations = this.props.settings.auth.integrations;
return (
integrations.facebook.enabled ||
integrations.google.enabled ||
integrations.local.enabled ||
integrations.oidc.some(c => c.enabled)
);
}
public render() {
const {
local: {
@@ -48,13 +75,17 @@ export class UserBoxContainer extends Component<InnerProps> {
if (me) {
return (
<UserBoxAuthenticated
onSignOut={this.handleSignOut}
// TODO: why nullable?
onSignOut={(this.weControlAuth && this.handleSignOut) || undefined}
username={me.username!}
showLogoutButton={this.supportsLogout}
/>
);
}
if (!this.weControlAuth) {
return null;
}
return (
<>
<Popup
@@ -69,7 +100,10 @@ export class UserBoxContainer extends Component<InnerProps> {
/>
<UserBoxUnauthenticated
onSignIn={this.handleSignIn}
onRegister={this.handleRegister}
onRegister={
(this.supportsRegister && this.handleRegister) || undefined
}
showRegisterButton={this.supportsRegister}
/>
</>
);
@@ -87,6 +121,7 @@ const enhanced = withSignOutMutation(
focus
view
}
authJTI
}
`
)(
@@ -96,6 +131,34 @@ const enhanced = withSignOutMutation(
username
}
`,
settings: graphql`
fragment UserBoxContainer_settings on Settings {
auth {
integrations {
local {
enabled
allowRegistration
}
sso {
enabled
allowRegistration
}
oidc {
enabled
allowRegistration
}
google {
enabled
allowRegistration
}
facebook {
enabled
allowRegistration
}
}
}
}
`,
})(UserBoxContainer)
)
)
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders correctly 1`] = `
exports[`renders fully 1`] = `
<Fragment>
<Popup
features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
@@ -15,6 +15,50 @@ exports[`renders correctly 1`] = `
<UserBoxUnauthenticated
onRegister={[Function]}
onSignIn={[Function]}
showRegisterButton={true}
/>
</Fragment>
`;
exports[`renders sso only 1`] = `""`;
exports[`renders sso only without logut button 1`] = `""`;
exports[`renders without logout button 1`] = `
<Fragment>
<Popup
features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
focus={false}
href="/embed/auth?view=SIGN_IN"
onBlur={[Function]}
onClose={[Function]}
onFocus={[Function]}
open={false}
title="Talk Auth"
/>
<UserBoxUnauthenticated
onRegister={[Function]}
onSignIn={[Function]}
showRegisterButton={true}
/>
</Fragment>
`;
exports[`renders without register button 1`] = `
<Fragment>
<Popup
features="menubar=0,resizable=0,width=350,height=395,top=200,left=500"
focus={false}
href="/embed/auth?view=SIGN_IN"
onBlur={[Function]}
onClose={[Function]}
onFocus={[Function]}
open={false}
title="Talk Auth"
/>
<UserBoxUnauthenticated
onSignIn={[Function]}
showRegisterButton={false}
/>
</Fragment>
`;