libre.sh/keycloak-scim
2
0
Fork 0
Code Issues 14 Pull requests Releases Packages Activity Actions 6

KEYCLOAK-12431 don't use user agent but patternfly

Browse source
This commit is contained in:
Erik Jan de Wit 2020-01-20 16:15:46 +01:00 committed by Stan Silvert
parent 3cdfb422ad
commit d3e5bf48f0
2 changed files with 46 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/ContentPage.tsx
View file

@ -1,4 +1,4 @@
/* /*
* Copyright 2019 Red Hat, Inc. and/or its affiliates. * Copyright 2019 Red Hat, Inc. and/or its affiliates.
* *
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
@ -32,7 +32,7 @@ interface ContentPageProps {
* @author Stan Silvert ssilvert@redhat.com (C) 2019 Red Hat Inc. * @author Stan Silvert ssilvert@redhat.com (C) 2019 Red Hat Inc.
*/ */
export class ContentPage extends React.Component<ContentPageProps> { export class ContentPage extends React.Component<ContentPageProps> {
public constructor(props: ContentPageProps) { public constructor(props: ContentPageProps) {
super(props); super(props);
} }
@ -44,7 +44,7 @@ export class ContentPage extends React.Component<ContentPageProps> {
<section id="page-heading" className="pf-c-page__main-section pf-m-light"> <section id="page-heading" className="pf-c-page__main-section pf-m-light">
<Grid> <Grid>
<GridItem span={11}><Title headingLevel='h1' size='3xl'><strong><Msg msgKey={this.props.title}/></strong></Title></GridItem> <GridItem span={11}><Title headingLevel='h1' size='3xl'><strong><Msg msgKey={this.props.title}/></strong></Title></GridItem>
{this.props.onRefresh && {this.props.onRefresh &&
<GridItem span={1}> <GridItem span={1}>
<Tooltip content={<Msg msgKey='refreshPage'/>}><Button id='refresh-page' variant='plain' onClick={this.props.onRefresh}><RedoIcon size='sm'/></Button></Tooltip> <Tooltip content={<Msg msgKey='refreshPage'/>}><Button id='refresh-page' variant='plain' onClick={this.props.onRefresh}><RedoIcon size='sm'/></Button></Tooltip>
</GridItem> </GridItem>
@ -52,8 +52,8 @@ export class ContentPage extends React.Component<ContentPageProps> {
{this.props.introMessage && <GridItem span={12}> <Msg msgKey={this.props.introMessage}/></GridItem>} {this.props.introMessage && <GridItem span={12}> <Msg msgKey={this.props.introMessage}/></GridItem>}
</Grid> </Grid>
</section> </section>
<section className="pf-c-page__main-section"> <section className="pf-c-page__main-section pf-m-no-padding-mobile">
{this.props.children} {this.props.children}
</section> </section>
</React.Fragment> </React.Fragment>

86
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/DeviceActivityPage.tsx
View file

@ -1,4 +1,4 @@
/* /*
* Copyright 2018 Red Hat, Inc. and/or its affiliates. * Copyright 2018 Red Hat, Inc. and/or its affiliates.
* *
* Licensed under the Apache License, Version 2.0 (the "License"); * Licensed under the Apache License, Version 2.0 (the "License");
@ -34,15 +34,15 @@ import {
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { import {
AmazonIcon, AmazonIcon,
ChromeIcon, ChromeIcon,
EdgeIcon, EdgeIcon,
FirefoxIcon, FirefoxIcon,
GlobeIcon, GlobeIcon,
InternetExplorerIcon, InternetExplorerIcon,
OperaIcon, OperaIcon,
SafariIcon, SafariIcon,
YandexInternationalIcon, YandexInternationalIcon,
} from '@patternfly/react-icons'; } from '@patternfly/react-icons';
import {Msg} from '../../widgets/Msg'; import {Msg} from '../../widgets/Msg';
@ -50,7 +50,7 @@ import {ContinueCancelModal} from '../../widgets/ContinueCancelModal';
import {KeycloakService} from '../../keycloak-service/keycloak.service'; import {KeycloakService} from '../../keycloak-service/keycloak.service';
import {ContentPage} from '../ContentPage'; import {ContentPage} from '../ContentPage';
import { ContentAlert } from '../ContentAlert'; import { ContentAlert } from '../ContentAlert';
declare const baseUrl: string; declare const baseUrl: string;
export interface DeviceActivityPageProps { export interface DeviceActivityPageProps {
@ -87,12 +87,12 @@ interface Client {
clientId: string; clientId: string;
clientName: string; clientName: string;
} }
/** /**
* @author Stan Silvert ssilvert@redhat.com (C) 2019 Red Hat Inc. * @author Stan Silvert ssilvert@redhat.com (C) 2019 Red Hat Inc.
*/ */
export class DeviceActivityPage extends React.Component<DeviceActivityPageProps, DeviceActivityPageState> { export class DeviceActivityPage extends React.Component<DeviceActivityPageProps, DeviceActivityPageState> {
public constructor(props: DeviceActivityPageProps) { public constructor(props: DeviceActivityPageProps) {
super(props); super(props);
@ -124,11 +124,11 @@ export class DeviceActivityPage extends React.Component<DeviceActivityPageProps,
console.log({response}); console.log({response});
let devices: Device[] = this.moveCurrentToTop(response.data); let devices: Device[] = this.moveCurrentToTop(response.data);
this.setState({ this.setState({
devices: devices devices: devices
}); });
}); });
} }
@ -215,7 +215,7 @@ export class DeviceActivityPage extends React.Component<DeviceActivityPageProps,
} }
public render(): React.ReactNode { public render(): React.ReactNode {
return ( return (
<ContentPage title="device-activity" onRefresh={this.fetchDevices.bind(this)}> <ContentPage title="device-activity" onRefresh={this.fetchDevices.bind(this)}>
<Stack gutter="md"> <Stack gutter="md">
@ -234,7 +234,7 @@ export class DeviceActivityPage extends React.Component<DeviceActivityPageProps,
</div> </div>
</DataListCell>, </DataListCell>,
<DataListCell key='signOutAllButton' width={1}> <DataListCell key='signOutAllButton' width={1}>
{this.isShowSignOutAll(this.state.devices) && {this.isShowSignOutAll(this.state.devices) &&
<ContinueCancelModal buttonTitle='signOutAllDevices' <ContinueCancelModal buttonTitle='signOutAllDevices'
buttonId='sign-out-all' buttonId='sign-out-all'
modalTitle='signOutAllDevices' modalTitle='signOutAllDevices'
@ -247,69 +247,65 @@ export class DeviceActivityPage extends React.Component<DeviceActivityPageProps,
/> />
</DataListItemRow> </DataListItemRow>
</DataListItem> </DataListItem>
<DataListItem aria-labelledby='sessions'> <DataListItem aria-labelledby='sessions'>
<DataListItemRow>
<Grid gutter='sm'> <Grid gutter='sm'>
<GridItem span={12}/> {/* <-- top spacing */} <GridItem span={12} /> {/* <-- top spacing */}
{this.state.devices.map((device: Device, deviceIndex: number) => { {this.state.devices.map((device: Device, deviceIndex: number) => {
return ( return (
<React.Fragment> <React.Fragment>
{device.sessions.map((session: Session, sessionIndex: number) => { {device.sessions.map((session: Session, sessionIndex: number) => {
return ( return (
<React.Fragment key={'device-' + deviceIndex + '-session-' + sessionIndex}> <React.Fragment key={'device-' + deviceIndex + '-session-' + sessionIndex}>
<GridItem span={3}> <GridItem md={3}>
<Stack> <Stack>
<StackItem isFilled={false}> <StackItem isFilled={false}>
<Bullseye>{this.findBrowserIcon(session)}</Bullseye> <Bullseye>{this.findBrowserIcon(session)}</Bullseye>
</StackItem> </StackItem>
{!this.state.devices[0].mobile && <StackItem isFilled={false}>
<Bullseye id={this.elementId('ip', session)}>{session.ipAddress}</Bullseye>
</StackItem>
{session.current &&
<StackItem isFilled={false}> <StackItem isFilled={false}>
<Bullseye id={this.elementId('ip', session)}>{session.ipAddress}</Bullseye> <Bullseye id={this.elementId('current-badge', session)}><strong className='pf-c-badge pf-m-read'><Msg msgKey="currentSession" /></strong></Bullseye>
</StackItem>
}
{session.current &&
<StackItem isFilled={false}>
<Bullseye id={this.elementId('current-badge', session)}><strong className='pf-c-badge pf-m-read'><Msg msgKey="currentSession"/></strong></Bullseye>
</StackItem> </StackItem>
} }
</Stack> </Stack>
</GridItem> </GridItem>
<GridItem span={9}> <GridItem md={9}>
{!session.browser.toLowerCase().includes('unknown') && {!session.browser.toLowerCase().includes('unknown') &&
<p id={this.elementId('browser', session)}><strong>{session.browser} / {this.findOS(device)} {this.findOSVersion(device)}</strong></p> <p id={this.elementId('browser', session)}><strong>{session.browser} / {this.findOS(device)} {this.findOSVersion(device)}</strong></p>}
}
{this.state.devices[0].mobile &&
<p id={this.elementId('ip', session)}><strong>{Msg.localize('ipAddress')} </strong> {session.ipAddress}</p>
}
<p id={this.elementId('last-access', session)}><strong>{Msg.localize('lastAccessedOn')}</strong> {this.time(session.lastAccess)}</p> <p id={this.elementId('last-access', session)}><strong>{Msg.localize('lastAccessedOn')}</strong> {this.time(session.lastAccess)}</p>
<p id={this.elementId('clients', session)}><strong>{Msg.localize('clients')}</strong> {this.makeClientsString(session.clients)}</p> <p id={this.elementId('clients', session)}><strong>{Msg.localize('clients')}</strong> {this.makeClientsString(session.clients)}</p>
<p id={this.elementId('started', session)}><strong>{Msg.localize('startedAt')}</strong> {this.time(session.started)}</p> <p id={this.elementId('started', session)}><strong>{Msg.localize('startedAt')}</strong> {this.time(session.started)}</p>
<p id={this.elementId('expires', session)}><strong>{Msg.localize('expiresAt')}</strong> {this.time(session.expires)}</p> <p id={this.elementId('expires', session)}><strong>{Msg.localize('expiresAt')}</strong> {this.time(session.expires)}</p>
{!session.current && {!session.current &&
<ContinueCancelModal buttonTitle='doSignOut' <ContinueCancelModal buttonTitle='doSignOut'
buttonId={this.elementId('sign-out', session)} buttonId={this.elementId('sign-out', session)}
modalTitle='doSignOut' modalTitle='doSignOut'
buttonVariant='secondary' buttonVariant='secondary'
modalMessage='signOutWarning' modalMessage='signOutWarning'
onContinue={() => this.signOutSession(device, session)} onContinue={() => this.signOutSession(device, session)}
/> />
} }
</GridItem> </GridItem>
</React.Fragment> </React.Fragment>
); );
})} })}
</React.Fragment> </React.Fragment>
) )
})} })}
<GridItem span={12}/> {/* <-- bottom spacing */} <GridItem span={12} /> {/* <-- bottom spacing */}
</Grid> </Grid>
</DataListItem> </DataListItemRow>
</DataListItem>
</DataList> </DataList>
</StackItem> </StackItem>
</Stack> </Stack>
</ContentPage> </ContentPage>
); );