apdli-keycloak-theme/themes/keycloak.v2/account/resources/content/signingin-page/SigningInPage.js

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 { Button, DataList, DataListAction, DataListItemCells, DataListCell, DataListItem, DataListItemRow, Stack, StackItem, Title, TitleLevel, DataListActionVisibility, Dropdown, DropdownPosition, KebabToggle } 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";
import { css } from "../../../../common/keycloak/web_modules/@patternfly/react-styles.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
      });
      console.log({
        allContainers
      });
    });
  }

  static credElementId(credType, credId, item) {
    return `${credType}-${item}-${credId.substring(0, 8)}`;
  }

  render() {
    return React.createElement(ContentPage, {
      title: "signingIn",
      introMessage: "signingInSubMessage"
    }, React.createElement(Stack, {
      gutter: "md"
    }, this.renderCategories()));
  }

  renderCategories() {
    return React.createElement(React.Fragment, null, " ", Array.from(this.state.credentialContainers.keys()).map(category => React.createElement(StackItem, {
      key: category,
      isFilled: true
    }, React.createElement(Title, {
      id: `${category}-categ-title`,
      headingLevel: TitleLevel.h2,
      size: "2xl"
    }, React.createElement("strong", null, React.createElement(Msg, {
      msgKey: category
    }))), React.createElement(DataList, {
      "aria-label": "foo"
    }, this.renderTypes(this.state.credentialContainers.get(category))))));
  }

  renderTypes(credTypeMap) {
    return React.createElement(KeycloakContext.Consumer, null, keycloak => React.createElement(React.Fragment, null, Array.from(credTypeMap.keys()).map((credType, index, typeArray) => [this.renderCredTypeTitle(credTypeMap.get(credType), keycloak), this.renderUserCredentials(credTypeMap, credType, keycloak), this.renderEmptyRow(credTypeMap.get(credType).type, index === typeArray.length - 1)])));
  }

  renderEmptyRow(type, isLast) {
    if (isLast) return; // don't put empty row at the end

    return React.createElement(DataListItem, {
      "aria-labelledby": 'empty-list-item-' + type
    }, React.createElement(DataListItemRow, {
      key: 'empty-row-' + type
    }, React.createElement(DataListItemCells, {
      dataListCells: [React.createElement(DataListCell, null)]
    })));
  }

  renderUserCredentials(credTypeMap, credType, keycloak) {
    const credContainer = credTypeMap.get(credType);
    const userCredentials = credContainer.userCredentials;
    const removeable = credContainer.removeable;
    const type = credContainer.type;
    const displayName = credContainer.displayName;

    if (!userCredentials || userCredentials.length === 0) {
      const localizedDisplayName = Msg.localize(displayName);
      return React.createElement(DataListItem, {
        key: "no-credentials-list-item",
        "aria-labelledby": "no-credentials-list-item"
      }, React.createElement(DataListItemRow, {
        key: "no-credentials-list-item-row"
      }, React.createElement(DataListItemCells, {
        dataListCells: [React.createElement(DataListCell, {
          key: 'no-credentials-cell-0'
        }), React.createElement("strong", {
          id: `${type}-not-set-up`,
          key: 'no-credentials-cell-1'
        }, React.createElement(Msg, {
          msgKey: "notSetUp",
          params: [localizedDisplayName]
        })), React.createElement(DataListCell, {
          key: 'no-credentials-cell-2'
        })]
      })));
    }

    userCredentials.forEach(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);
    }

    return React.createElement(React.Fragment, {
      key: "userCredentials"
    }, " ", userCredentials.map(credential => React.createElement(DataListItem, {
      id: `${SigningInPage.credElementId(type, credential.id, 'row')}`,
      key: 'credential-list-item-' + credential.id,
      "aria-labelledby": 'credential-list-item-' + credential.userLabel
    }, React.createElement(DataListItemRow, {
      key: 'userCredentialRow-' + credential.id
    }, React.createElement(DataListItemCells, {
      dataListCells: this.credentialRowCells(credential, type)
    }), React.createElement(CredentialAction, {
      credential: credential,
      removeable: removeable,
      updateAction: updateAIA,
      credRemover: this.handleRemove
    })))));
  }

  credentialRowCells(credential, type) {
    const credRowCells = [];
    credRowCells.push(React.createElement(DataListCell, {
      id: `${SigningInPage.credElementId(type, credential.id, 'label')}`,
      key: 'userLabel-' + credential.id
    }, credential.userLabel));

    if (credential.strCreatedDate) {
      credRowCells.push(React.createElement(DataListCell, {
        id: `${SigningInPage.credElementId(type, credential.id, 'created-at')}`,
        key: 'created-' + credential.id
      }, React.createElement("strong", null, React.createElement(Msg, {
        msgKey: "credentialCreatedAt"
      }), ": "), credential.strCreatedDate));
      credRowCells.push(React.createElement(DataListCell, {
        key: 'spacer-' + credential.id
      }));
    }

    return credRowCells;
  }

  renderCredTypeTitle(credContainer, keycloak) {
    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 React.createElement(React.Fragment, {
      key: 'credTypeTitle-' + credContainer.type
    }, React.createElement(DataListItem, {
      "aria-labelledby": 'type-datalistitem-' + credContainer.type
    }, React.createElement(DataListItemRow, {
      key: 'credTitleRow-' + credContainer.type
    }, React.createElement(DataListItemCells, {
      dataListCells: [React.createElement(DataListCell, {
        width: 5,
        key: 'credTypeTitle-' + credContainer.type
      }, React.createElement(Title, {
        headingLevel: TitleLevel.h3,
        size: "2xl"
      }, React.createElement("strong", {
        id: `${credContainer.type}-cred-title`
      }, React.createElement(Msg, {
        msgKey: credContainer.displayName
      }))), React.createElement("span", {
        id: `${credContainer.type}-cred-help`
      }, credContainer.helptext && React.createElement(Msg, {
        msgKey: credContainer.helptext
      })))]
    }), credContainer.createAction && React.createElement(DataListAction, {
      "aria-labelledby": "create",
      "aria-label": "create action",
      id: 'mob-setUpAction-' + credContainer.type,
      className: DataListActionVisibility.hiddenOnLg
    }, React.createElement(Dropdown, {
      isPlain: true,
      position: DropdownPosition.right,
      toggle: React.createElement(KebabToggle, {
        onToggle: isOpen => {
          credContainer.open = isOpen;
          this.setState({
            credentialContainers: new Map(this.state.credentialContainers)
          });
        }
      }),
      isOpen: credContainer.open,
      dropdownItems: [React.createElement("button", {
        id: `mob-${credContainer.type}-set-up`,
        className: "pf-c-button pf-m-link",
        type: "button",
        onClick: () => setupAction.execute()
      }, React.createElement("span", {
        className: "pf-c-button__icon"
      }, React.createElement("i", {
        className: "fas fa-plus-circle",
        "aria-hidden": "true"
      })), React.createElement(Msg, {
        msgKey: "setUpNew",
        params: [credContainerDisplayName]
      }))]
    })), credContainer.createAction && React.createElement(DataListAction, {
      "aria-labelledby": "create",
      "aria-label": "create action",
      id: 'setUpAction-' + credContainer.type,
      className: css(DataListActionVisibility.visibleOnLg, DataListActionVisibility.hidden)
    }, React.createElement("button", {
      id: `${credContainer.type}-set-up`,
      className: "pf-c-button pf-m-link",
      type: "button",
      onClick: () => setupAction.execute()
    }, React.createElement("span", {
      className: "pf-c-button__icon"
    }, React.createElement("i", {
      className: "fas fa-plus-circle",
      "aria-hidden": "true"
    })), React.createElement(Msg, {
      msgKey: "setUpNew",
      params: [credContainerDisplayName]
    }))))));
  }

}

_defineProperty(SigningInPage, "contextType", AccountServiceContext);

;
;

class CredentialAction extends React.Component {
  render() {
    if (this.props.updateAction) {
      return React.createElement(DataListAction, {
        "aria-labelledby": "foo",
        "aria-label": "foo action",
        id: 'updateAction-' + this.props.credential.id
      }, React.createElement(Button, {
        id: `${SigningInPage.credElementId(this.props.credential.type, this.props.credential.id, 'update')}`,
        variant: "primary",
        onClick: () => this.props.updateAction.execute()
      }, React.createElement(Msg, {
        msgKey: "update"
      })));
    }

    if (this.props.removeable) {
      const userLabel = this.props.credential.userLabel;
      return React.createElement(DataListAction, {
        "aria-labelledby": "foo",
        "aria-label": "foo action",
        id: 'removeAction-' + this.props.credential.id
      }, React.createElement(ContinueCancelModal, {
        buttonTitle: "remove",
        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 React.createElement(React.Fragment, null);
  }

}

const SigningInPageWithRouter = withRouter(SigningInPage);
export { SigningInPageWithRouter as SigningInPage };
//# sourceMappingURL=SigningInPage.js.map