feat: initial commit
This commit is contained in:
Jonas Juselius
+350
@@ -0,0 +1,350 @@
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
/*
|
||||
* Copyright 2018 Red Hat, Inc. and/or its affiliates.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import * as React from "../../../../common/keycloak/web_modules/react.js";
|
||||
import { withRouter } from "../../../../common/keycloak/web_modules/react-router-dom.js";
|
||||
import { Alert, Button, DataList, DataListAction, DataListItemCells, DataListCell, DataListItem, DataListItemRow, EmptyState, EmptyStateVariant, EmptyStateBody, Split, SplitItem, Title, Dropdown, DropdownPosition, KebabToggle, PageSection, PageSectionVariants } from "../../../../common/keycloak/web_modules/@patternfly/react-core.js";
|
||||
import { AIACommand } from "../../util/AIACommand.js";
|
||||
import TimeUtil from "../../util/TimeUtil.js";
|
||||
import { AccountServiceContext } from "../../account-service/AccountServiceContext.js";
|
||||
import { ContinueCancelModal } from "../../widgets/ContinueCancelModal.js";
|
||||
import { Msg } from "../../widgets/Msg.js";
|
||||
import { ContentPage } from "../ContentPage.js";
|
||||
import { ContentAlert } from "../ContentAlert.js";
|
||||
import { KeycloakContext } from "../../keycloak-service/KeycloakContext.js";
|
||||
|
||||
/**
|
||||
* @author Stan Silvert ssilvert@redhat.com (C) 2018 Red Hat Inc.
|
||||
*/
|
||||
class SigningInPage extends React.Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
|
||||
_defineProperty(this, "context", void 0);
|
||||
|
||||
_defineProperty(this, "handleRemove", (credentialId, userLabel) => {
|
||||
this.context.doDelete("/credentials/" + credentialId).then(() => {
|
||||
this.getCredentialContainers();
|
||||
ContentAlert.success("successRemovedMessage", [userLabel]);
|
||||
});
|
||||
});
|
||||
|
||||
this.context = context;
|
||||
this.state = {
|
||||
credentialContainers: new Map()
|
||||
};
|
||||
this.getCredentialContainers();
|
||||
}
|
||||
|
||||
getCredentialContainers() {
|
||||
this.context.doGet("/credentials").then(response => {
|
||||
const allContainers = new Map();
|
||||
const containers = response.data || [];
|
||||
containers.forEach(container => {
|
||||
let categoryMap = allContainers.get(container.category);
|
||||
|
||||
if (!categoryMap) {
|
||||
categoryMap = new Map();
|
||||
allContainers.set(container.category, categoryMap);
|
||||
}
|
||||
|
||||
categoryMap.set(container.type, container);
|
||||
});
|
||||
this.setState({
|
||||
credentialContainers: allContainers
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
static credElementId(credType, credId, item) {
|
||||
return `${credType}-${item}-${credId.substring(0, 8)}`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return /*#__PURE__*/React.createElement(ContentPage, {
|
||||
title: "signingIn",
|
||||
introMessage: "signingInSubMessage"
|
||||
}, this.renderCategories());
|
||||
}
|
||||
|
||||
renderCategories() {
|
||||
return Array.from(this.state.credentialContainers.keys()).map(category => /*#__PURE__*/React.createElement(PageSection, {
|
||||
key: category,
|
||||
variant: PageSectionVariants.light
|
||||
}, /*#__PURE__*/React.createElement(Title, {
|
||||
id: `${category}-categ-title`,
|
||||
headingLevel: "h2",
|
||||
size: "xl"
|
||||
}, /*#__PURE__*/React.createElement(Msg, {
|
||||
msgKey: category
|
||||
})), this.renderTypes(category)));
|
||||
}
|
||||
|
||||
renderTypes(category) {
|
||||
let credTypeMap = this.state.credentialContainers.get(category);
|
||||
return /*#__PURE__*/React.createElement(KeycloakContext.Consumer, null, keycloak => /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(credTypeMap.keys()).map((credType, index, typeArray) => [this.renderCredTypeTitle(credTypeMap.get(credType), keycloak, category), this.renderUserCredentials(credTypeMap, credType, keycloak)])));
|
||||
}
|
||||
|
||||
renderEmptyRow(type, isLast) {
|
||||
if (isLast) return; // don't put empty row at the end
|
||||
|
||||
return /*#__PURE__*/React.createElement(DataListItem, {
|
||||
"aria-labelledby": "empty-list-item-" + type
|
||||
}, /*#__PURE__*/React.createElement(DataListItemRow, {
|
||||
key: "empty-row-" + type
|
||||
}, /*#__PURE__*/React.createElement(DataListItemCells, {
|
||||
dataListCells: [/*#__PURE__*/React.createElement(DataListCell, null)]
|
||||
})));
|
||||
}
|
||||
|
||||
renderUserCredentials(credTypeMap, credType, keycloak) {
|
||||
const credContainer = credTypeMap.get(credType);
|
||||
const userCredentialMetadatas = credContainer.userCredentialMetadatas;
|
||||
const removeable = credContainer.removeable;
|
||||
const type = credContainer.type;
|
||||
const displayName = credContainer.displayName;
|
||||
|
||||
if (!userCredentialMetadatas || userCredentialMetadatas.length === 0) {
|
||||
const localizedDisplayName = Msg.localize(displayName);
|
||||
return /*#__PURE__*/React.createElement(DataList, {
|
||||
"aria-label": Msg.localize('notSetUp', [localizedDisplayName]),
|
||||
className: "pf-u-mb-xl"
|
||||
}, /*#__PURE__*/React.createElement(DataListItem, {
|
||||
key: "no-credentials-list-item",
|
||||
"aria-labelledby": Msg.localize('notSetUp', [localizedDisplayName])
|
||||
}, /*#__PURE__*/React.createElement(DataListItemRow, {
|
||||
key: "no-credentials-list-item-row",
|
||||
className: "pf-u-align-items-center"
|
||||
}, /*#__PURE__*/React.createElement(DataListItemCells, {
|
||||
dataListCells: [/*#__PURE__*/React.createElement(DataListCell, {
|
||||
key: 'no-credentials-cell-0'
|
||||
}), /*#__PURE__*/React.createElement(EmptyState, {
|
||||
id: `${type}-not-set-up`,
|
||||
key: 'no-credentials-cell-1',
|
||||
variant: EmptyStateVariant.xs
|
||||
}, /*#__PURE__*/React.createElement(EmptyStateBody, null, /*#__PURE__*/React.createElement(Msg, {
|
||||
msgKey: "notSetUp",
|
||||
params: [localizedDisplayName]
|
||||
}))), /*#__PURE__*/React.createElement(DataListCell, {
|
||||
key: 'no-credentials-cell-2'
|
||||
})]
|
||||
}))));
|
||||
}
|
||||
|
||||
userCredentialMetadatas.forEach(credentialMetadata => {
|
||||
let credential = credentialMetadata.credential;
|
||||
if (!credential.userLabel) credential.userLabel = Msg.localize(credential.type);
|
||||
|
||||
if (credential.hasOwnProperty('createdDate') && credential.createdDate && credential.createdDate > 0) {
|
||||
credential.strCreatedDate = TimeUtil.format(credential.createdDate);
|
||||
}
|
||||
});
|
||||
let updateAIA;
|
||||
|
||||
if (credContainer.updateAction) {
|
||||
updateAIA = new AIACommand(keycloak, credContainer.updateAction);
|
||||
}
|
||||
|
||||
let maxWidth = {
|
||||
maxWidth: 689
|
||||
};
|
||||
return /*#__PURE__*/React.createElement(React.Fragment, {
|
||||
key: "userCredentialMetadatas"
|
||||
}, " ", userCredentialMetadatas.map(credentialMetadata => /*#__PURE__*/React.createElement(React.Fragment, null, credentialMetadata.infoMessage && !credentialMetadata.warningMessageTitle && !credentialMetadata.warningMessageDescription && /*#__PURE__*/React.createElement(Alert, {
|
||||
variant: "default",
|
||||
className: "pf-u-mb-md",
|
||||
isInline: true,
|
||||
isPlain: true,
|
||||
title: Msg.localize(JSON.parse(credentialMetadata.infoMessage).key, JSON.parse(credentialMetadata.infoMessage).parameters)
|
||||
}), credentialMetadata.warningMessageTitle && credentialMetadata.warningMessageDescription && /*#__PURE__*/React.createElement(Alert, {
|
||||
variant: "warning",
|
||||
className: "pf-u-mb-md",
|
||||
isInline: true,
|
||||
title: Msg.localize(JSON.parse(credentialMetadata.warningMessageTitle).key, JSON.parse(credentialMetadata.warningMessageTitle).parameters),
|
||||
style: maxWidth
|
||||
}, /*#__PURE__*/React.createElement("p", null, Msg.localize(JSON.parse(credentialMetadata.warningMessageDescription).key, JSON.parse(credentialMetadata.warningMessageDescription).parameters))), /*#__PURE__*/React.createElement(DataList, {
|
||||
"aria-label": "user credential",
|
||||
className: "pf-u-mb-xl"
|
||||
}, /*#__PURE__*/React.createElement(DataListItem, {
|
||||
id: `${SigningInPage.credElementId(type, credentialMetadata.credential.id, 'row')}`,
|
||||
key: 'credential-list-item-' + credentialMetadata.credential.id,
|
||||
"aria-labelledby": 'credential-list-item-' + credentialMetadata.credential.userLabel
|
||||
}, /*#__PURE__*/React.createElement(DataListItemRow, {
|
||||
key: 'userCredentialRow-' + credentialMetadata.credential.id,
|
||||
className: "pf-u-align-items-center"
|
||||
}, /*#__PURE__*/React.createElement(DataListItemCells, {
|
||||
dataListCells: this.credentialRowCells(credentialMetadata, type)
|
||||
}), /*#__PURE__*/React.createElement(CredentialAction, {
|
||||
credential: credentialMetadata.credential,
|
||||
removeable: removeable,
|
||||
updateAction: updateAIA,
|
||||
credRemover: this.handleRemove
|
||||
})))))), " ");
|
||||
}
|
||||
|
||||
credentialRowCells(credMetadata, type) {
|
||||
const credRowCells = [];
|
||||
const credential = credMetadata.credential;
|
||||
let maxWidth = {
|
||||
"--pf-u-max-width--MaxWidth": "300px"
|
||||
};
|
||||
credRowCells.push( /*#__PURE__*/React.createElement(DataListCell, {
|
||||
id: `${SigningInPage.credElementId(type, credential.id, 'label')}`,
|
||||
key: 'userLabel-' + credential.id,
|
||||
className: "pf-u-max-width",
|
||||
style: maxWidth
|
||||
}, credential.userLabel));
|
||||
|
||||
if (credential.strCreatedDate) {
|
||||
credRowCells.push( /*#__PURE__*/React.createElement(DataListCell, {
|
||||
id: `${SigningInPage.credElementId(type, credential.id, "created-at")}`,
|
||||
key: "created-" + credential.id
|
||||
}, /*#__PURE__*/React.createElement("strong", {
|
||||
className: "pf-u-mr-md"
|
||||
}, /*#__PURE__*/React.createElement(Msg, {
|
||||
msgKey: "credentialCreatedAt"
|
||||
}), " "), credential.strCreatedDate));
|
||||
credRowCells.push( /*#__PURE__*/React.createElement(DataListCell, {
|
||||
key: "spacer-" + credential.id
|
||||
}));
|
||||
}
|
||||
|
||||
return credRowCells;
|
||||
}
|
||||
|
||||
renderCredTypeTitle(credContainer, keycloak, category) {
|
||||
if (!credContainer.hasOwnProperty("helptext") && !credContainer.hasOwnProperty("createAction")) return;
|
||||
let setupAction;
|
||||
|
||||
if (credContainer.createAction) {
|
||||
setupAction = new AIACommand(keycloak, credContainer.createAction);
|
||||
}
|
||||
|
||||
const credContainerDisplayName = Msg.localize(credContainer.displayName);
|
||||
return /*#__PURE__*/React.createElement(React.Fragment, {
|
||||
key: "credTypeTitle-" + credContainer.type
|
||||
}, /*#__PURE__*/React.createElement(Split, {
|
||||
className: "pf-u-mt-lg pf-u-mb-lg"
|
||||
}, /*#__PURE__*/React.createElement(SplitItem, null, /*#__PURE__*/React.createElement(Title, {
|
||||
headingLevel: "h3",
|
||||
size: "md",
|
||||
className: "pf-u-mb-md"
|
||||
}, /*#__PURE__*/React.createElement("span", {
|
||||
className: "cred-title pf-u-display-block",
|
||||
id: `${credContainer.type}-cred-title`
|
||||
}, /*#__PURE__*/React.createElement(Msg, {
|
||||
msgKey: credContainer.displayName
|
||||
}))), /*#__PURE__*/React.createElement("span", {
|
||||
id: `${credContainer.type}-cred-help`
|
||||
}, credContainer.helptext && /*#__PURE__*/React.createElement(Msg, {
|
||||
msgKey: credContainer.helptext
|
||||
}))), /*#__PURE__*/React.createElement(SplitItem, {
|
||||
isFilled: true
|
||||
}, credContainer.createAction && /*#__PURE__*/React.createElement("div", {
|
||||
id: "mob-setUpAction-" + credContainer.type,
|
||||
className: "pf-u-display-none-on-lg pf-u-float-right"
|
||||
}, /*#__PURE__*/React.createElement(Dropdown, {
|
||||
isPlain: true,
|
||||
position: DropdownPosition.right,
|
||||
toggle: /*#__PURE__*/React.createElement(KebabToggle, {
|
||||
onToggle: isOpen => {
|
||||
credContainer.open = isOpen;
|
||||
this.setState({
|
||||
credentialContainers: new Map(this.state.credentialContainers)
|
||||
});
|
||||
}
|
||||
}),
|
||||
isOpen: credContainer.open,
|
||||
dropdownItems: [/*#__PURE__*/React.createElement("button", {
|
||||
id: `mob-${credContainer.type}-set-up`,
|
||||
className: "pf-c-button pf-m-link",
|
||||
type: "button",
|
||||
onClick: () => setupAction.execute()
|
||||
}, /*#__PURE__*/React.createElement("span", {
|
||||
className: "pf-c-button__icon"
|
||||
}, /*#__PURE__*/React.createElement("i", {
|
||||
className: "fas fa-plus-circle",
|
||||
"aria-hidden": "true"
|
||||
})), /*#__PURE__*/React.createElement(Msg, {
|
||||
msgKey: "setUpNew",
|
||||
params: [credContainerDisplayName]
|
||||
}))]
|
||||
})), credContainer.createAction && /*#__PURE__*/React.createElement("div", {
|
||||
id: "setUpAction-" + credContainer.type,
|
||||
className: "pf-u-display-none pf-u-display-inline-flex-on-lg pf-u-float-right"
|
||||
}, /*#__PURE__*/React.createElement("button", {
|
||||
id: `${credContainer.type}-set-up`,
|
||||
className: "pf-c-button pf-m-link",
|
||||
type: "button",
|
||||
onClick: () => setupAction.execute()
|
||||
}, /*#__PURE__*/React.createElement("span", {
|
||||
className: "pf-c-button__icon"
|
||||
}, /*#__PURE__*/React.createElement("i", {
|
||||
className: "fas fa-plus-circle",
|
||||
"aria-hidden": "true"
|
||||
})), /*#__PURE__*/React.createElement(Msg, {
|
||||
msgKey: "setUpNew",
|
||||
params: [credContainerDisplayName]
|
||||
}))))));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
_defineProperty(SigningInPage, "contextType", AccountServiceContext);
|
||||
|
||||
;
|
||||
|
||||
class CredentialAction extends React.Component {
|
||||
render() {
|
||||
if (this.props.updateAction) {
|
||||
return /*#__PURE__*/React.createElement(DataListAction, {
|
||||
"aria-labelledby": Msg.localize('updateCredAriaLabel'),
|
||||
"aria-label": Msg.localize('updateCredAriaLabel'),
|
||||
id: "updateAction-" + this.props.credential.id
|
||||
}, /*#__PURE__*/React.createElement(Button, {
|
||||
variant: "secondary",
|
||||
id: `${SigningInPage.credElementId(this.props.credential.type, this.props.credential.id, "update")}`,
|
||||
onClick: () => this.props.updateAction.execute()
|
||||
}, /*#__PURE__*/React.createElement(Msg, {
|
||||
msgKey: "update"
|
||||
})));
|
||||
}
|
||||
|
||||
if (this.props.removeable) {
|
||||
const userLabel = this.props.credential.userLabel;
|
||||
return /*#__PURE__*/React.createElement(DataListAction, {
|
||||
"aria-label": Msg.localize('removeCredAriaLabel'),
|
||||
"aria-labelledby": Msg.localize('removeCredAriaLabel'),
|
||||
id: 'removeAction-' + this.props.credential.id
|
||||
}, /*#__PURE__*/React.createElement(ContinueCancelModal, {
|
||||
buttonTitle: "remove",
|
||||
buttonVariant: "danger",
|
||||
buttonId: `${SigningInPage.credElementId(this.props.credential.type, this.props.credential.id, 'remove')}`,
|
||||
modalTitle: Msg.localize('removeCred', [userLabel]),
|
||||
modalMessage: Msg.localize('stopUsingCred', [userLabel]),
|
||||
onContinue: () => this.props.credRemover(this.props.credential.id, userLabel)
|
||||
}));
|
||||
}
|
||||
|
||||
return /*#__PURE__*/React.createElement(React.Fragment, null);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const SigningInPageWithRouter = withRouter(SigningInPage);
|
||||
export { SigningInPageWithRouter as SigningInPage };
|
||||
//# sourceMappingURL=SigningInPage.js.map
|
||||
Reference in New Issue
Block a user