apdli-keycloak-theme/themes/keycloak.v2/account/resources/content/account-page/AccountPage.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 { ActionGroup, Button, Form, FormGroup, TextInput, Grid, GridItem, Expandable } from "../../../../common/keycloak/web_modules/@patternfly/react-core.js";
import { AccountServiceContext } from "../../account-service/AccountServiceContext.js";
import { Msg } from "../../widgets/Msg.js";
import { ContentPage } from "../ContentPage.js";
import { ContentAlert } from "../ContentAlert.js";
import { LocaleSelector } from "../../widgets/LocaleSelectors.js";
import { KeycloakContext } from "../../keycloak-service/KeycloakContext.js";
import { AIACommand } from "../../util/AIACommand.js";

/**
 * @author Stan Silvert ssilvert@redhat.com (C) 2018 Red Hat Inc.
 */
export class AccountPage extends React.Component {
  constructor(props, context) {
    super(props);

    _defineProperty(this, "context", void 0);

    _defineProperty(this, "isRegistrationEmailAsUsername", features.isRegistrationEmailAsUsername);

    _defineProperty(this, "isEditUserNameAllowed", features.isEditUserNameAllowed);

    _defineProperty(this, "isDeleteAccountAllowed", features.deleteAccountAllowed);

    _defineProperty(this, "DEFAULT_STATE", {
      errors: {
        username: '',
        firstName: '',
        lastName: '',
        email: ''
      },
      formFields: {
        username: '',
        firstName: '',
        lastName: '',
        email: '',
        attributes: {}
      }
    });

    _defineProperty(this, "state", this.DEFAULT_STATE);

    _defineProperty(this, "handleCancel", () => {
      this.fetchPersonalInfo();
    });

    _defineProperty(this, "handleChange", (value, event) => {
      const target = event.currentTarget;
      const name = target.name;
      this.setState({
        errors: { ...this.state.errors,
          [name]: target.validationMessage
        },
        formFields: { ...this.state.formFields,
          [name]: value
        }
      });
    });

    _defineProperty(this, "handleSubmit", event => {
      event.preventDefault();
      const form = event.target;
      const isValid = form.checkValidity();

      if (isValid) {
        const reqData = { ...this.state.formFields
        };
        this.context.doPost("/", reqData).then(() => {
          ContentAlert.success('accountUpdatedMessage');

          if (locale !== this.state.formFields.attributes.locale[0]) {
            window.location.reload();
          }
        });
      } else {
        const formData = new FormData(form);
        const validationMessages = Array.from(formData.keys()).reduce((acc, key) => {
          acc[key] = form.elements[key].validationMessage;
          return acc;
        }, {});
        this.setState({
          errors: { ...validationMessages
          },
          formFields: this.state.formFields
        });
      }
    });

    _defineProperty(this, "handleDelete", keycloak => {
      new AIACommand(keycloak, "delete_account").execute();
    });

    _defineProperty(this, "UsernameInput", () => React.createElement(TextInput, {
      isRequired: true,
      type: "text",
      id: "user-name",
      name: "username",
      maxLength: 254,
      value: this.state.formFields.username,
      onChange: this.handleChange,
      isValid: this.state.errors.username === ''
    }));

    _defineProperty(this, "RestrictedUsernameInput", () => React.createElement(TextInput, {
      isDisabled: true,
      type: "text",
      id: "user-name",
      name: "username",
      value: this.state.formFields.username
    }));

    this.context = context;
    this.fetchPersonalInfo();
  }

  fetchPersonalInfo() {
    this.context.doGet("/").then(response => {
      this.setState(this.DEFAULT_STATE);
      const formFields = response.data;

      if (!formFields.attributes) {
        formFields.attributes = {
          locale: [locale]
        };
      } else if (!formFields.attributes.locale) {
        formFields.attributes.locale = [locale];
      }

      this.setState({ ...{
          formFields: formFields
        }
      });
    });
  }

  render() {
    const fields = this.state.formFields;
    return React.createElement(ContentPage, {
      title: "personalInfoHtmlTitle",
      introMessage: "personalSubMessage"
    }, React.createElement(Form, {
      isHorizontal: true,
      onSubmit: event => this.handleSubmit(event)
    }, !this.isRegistrationEmailAsUsername && React.createElement(FormGroup, {
      label: Msg.localize('username'),
      isRequired: true,
      fieldId: "user-name",
      helperTextInvalid: this.state.errors.username,
      isValid: this.state.errors.username === ''
    }, this.isEditUserNameAllowed && React.createElement(this.UsernameInput, null), !this.isEditUserNameAllowed && React.createElement(this.RestrictedUsernameInput, null)), React.createElement(FormGroup, {
      label: Msg.localize('email'),
      isRequired: true,
      fieldId: "email-address",
      helperTextInvalid: this.state.errors.email,
      isValid: this.state.errors.email === ''
    }, React.createElement(TextInput, {
      isRequired: true,
      type: "email",
      id: "email-address",
      name: "email",
      maxLength: 254,
      value: fields.email,
      onChange: this.handleChange,
      isValid: this.state.errors.email === ''
    })), React.createElement(FormGroup, {
      label: Msg.localize('firstName'),
      isRequired: true,
      fieldId: "first-name",
      helperTextInvalid: this.state.errors.firstName,
      isValid: this.state.errors.firstName === ''
    }, React.createElement(TextInput, {
      isRequired: true,
      type: "text",
      id: "first-name",
      name: "firstName",
      maxLength: 254,
      value: fields.firstName,
      onChange: this.handleChange,
      isValid: this.state.errors.firstName === ''
    })), React.createElement(FormGroup, {
      label: Msg.localize('lastName'),
      isRequired: true,
      fieldId: "last-name",
      helperTextInvalid: this.state.errors.lastName,
      isValid: this.state.errors.lastName === ''
    }, React.createElement(TextInput, {
      isRequired: true,
      type: "text",
      id: "last-name",
      name: "lastName",
      maxLength: 254,
      value: fields.lastName,
      onChange: this.handleChange,
      isValid: this.state.errors.lastName === ''
    })), features.isInternationalizationEnabled && React.createElement(FormGroup, {
      label: Msg.localize('selectLocale'),
      isRequired: true,
      fieldId: "locale"
    }, React.createElement(LocaleSelector, {
      id: "locale-selector",
      value: fields.attributes.locale || '',
      onChange: value => this.setState({
        errors: this.state.errors,
        formFields: { ...this.state.formFields,
          attributes: { ...this.state.formFields.attributes,
            locale: [value]
          }
        }
      })
    })), React.createElement(ActionGroup, null, React.createElement(Button, {
      type: "submit",
      id: "save-btn",
      variant: "primary",
      isDisabled: Object.values(this.state.errors).filter(e => e !== '').length !== 0
    }, React.createElement(Msg, {
      msgKey: "doSave"
    })), React.createElement(Button, {
      id: "cancel-btn",
      variant: "secondary",
      onClick: this.handleCancel
    }, React.createElement(Msg, {
      msgKey: "doCancel"
    })))), this.isDeleteAccountAllowed && React.createElement("div", {
      id: "delete-account",
      style: {
        marginTop: "30px"
      }
    }, React.createElement(Expandable, {
      toggleText: "Delete Account"
    }, React.createElement(Grid, {
      gutter: "sm"
    }, React.createElement(GridItem, {
      span: 6
    }, React.createElement("p", null, React.createElement(Msg, {
      msgKey: "deleteAccountWarning"
    }))), React.createElement(GridItem, {
      span: 4
    }, React.createElement(KeycloakContext.Consumer, null, keycloak => React.createElement(Button, {
      id: "delete-account-btn",
      variant: "danger",
      onClick: () => this.handleDelete(keycloak),
      className: "delete-button"
    }, React.createElement(Msg, {
      msgKey: "doDelete"
    })))), React.createElement(GridItem, {
      span: 2
    })))));
  }

}

_defineProperty(AccountPage, "contextType", AccountServiceContext);

;
//# sourceMappingURL=AccountPage.js.map