keycloak-d4science-spi-parent/keycloak-d4science-theme/src/main/resources/theme/d4science.v2/account/resources/content/d4science-page/AvatarForm.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; }

import * as React from "../../../resources/web_modules/react.js";
import { Form, FormGroup, ActionGroup, FileUpload, Avatar, Button, Tooltip } from "../../../resources/web_modules/@patternfly/react-core.js";
import { OutlinedQuestionCircleIcon } from "../../../resources/web_modules/@patternfly/react-icons.js";
import { AccountServiceContext } from "../../account-service/AccountServiceContext.js";
import { ContentAlert } from "../ContentAlert.js";
import { Msg } from "../../widgets/Msg.js";
export class AvatarForm extends React.Component {
  constructor(props, context) {
    super(props);

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

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

    _defineProperty(this, "imageScale", (imgData, callback) => {
      var img = new Image();
      img.src = imgData;

      img.onload = event => {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
        var MAX_WIDTH = 250;
        var MAX_HEIGHT = 250;
        var width = img.width;
        var height = img.height;

        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }

        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        canvas.toBlob(callback);
      };
    });

    _defineProperty(this, "handleSubmit", event => {
      event.preventDefault();
      const form = event.target;
      var formData = new FormData(form);
      formData.append("image", this.state.imageBlob);
      var xhr = new XMLHttpRequest();

      xhr.onreadystatechange = () => {
        if (xhr.readyState == 4) {
          if (200 <= xhr.status && xhr.status <= 204) {
            ContentAlert.success('avatarUpdatedMessage');
          } else {
            ContentAlert.danger(xhr.response);
          } // force reload avatar


          this.setState({
            errors: {
              avatar: ""
            },
            imageBlob: null,
            filename: "",
            avatarSrc: this.state.avatarUrl
          });
        }
      };

      xhr.open(form.method, form.action, true);
      xhr.send(formData);
    });

    _defineProperty(this, "handleError", event => {
      this.setState({
        errors: {
          avatar: Msg.localize('error-noAvatarFound')
        },
        avatarSrc: ""
      });
    });

    this.context = context;
    var currentAvatar = props.accountUrl + "-avatar";
    this.state = {
      errors: {
        avatar: ''
      },
      imageBlob: null,
      filename: "",
      avatarUrl: currentAvatar,
      avatarSrc: currentAvatar,
      noAvatarSrc: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMiwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNiAzNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzYgMzY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRjBGMEYwO30KCS5zdDF7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRDJEMkQyO30KCS5zdDJ7ZmlsbDojQjhCQkJFO30KCS5zdDN7ZmlsbDojRDJEMkQyO30KPC9zdHlsZT4KPHJlY3QgY2xhc3M9InN0MCIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2Ii8+CjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0xNy43LDIwLjFjLTMuNSwwLTYuNC0yLjktNi40LTYuNHMyLjktNi40LDYuNC02LjRzNi40LDIuOSw2LjQsNi40UzIxLjMsMjAuMSwxNy43LDIwLjF6Ii8+CjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMy4zLDM2bDAtNi43Yy0yLDAuNC0yLjksMS40LTMuMSwzLjVMMTAuMSwzNkgxMy4zeiIvPgo8cGF0aCBjbGFzcz0ic3QzIiBkPSJNMTAuMSwzNmwwLjEtMy4yYzAuMi0yLjEsMS4xLTMuMSwzLjEtMy41bDAsNi43aDkuNGwwLTYuN2MyLDAuNCwyLjksMS40LDMuMSwzLjVsMC4xLDMuMmg0LjcKCWMtMC40LTMuOS0xLjMtOS0yLjktMTFjLTEuMS0xLjQtMi4zLTIuMi0zLjUtMi42cy0xLjgtMC42LTYuMy0wLjZzLTYuMSwwLjctNi4xLDAuN2MtMS4yLDAuNC0yLjQsMS4yLTMuNCwyLjYKCUM2LjcsMjcsNS44LDMyLjIsNS40LDM2SDEwLjF6Ii8+CjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0yNS45LDM2bC0wLjEtMy4yYy0wLjItMi4xLTEuMS0zLjEtMy4xLTMuNWwwLDYuN0gyNS45eiIvPgo8L3N2Zz4="
    };
    var reader = new FileReader();

    reader.onloadend = event => {
      var imgData = String(event.target.result);
      this.imageScale(imgData, blob => {
        this.setState({
          imageBlob: blob,
          avatarSrc: URL.createObjectURL(blob)
        });
      });
    };

    this.handleFileInputChange = (file, filename) => {
      if (filename != "") {
        this.setState({
          filename: filename
        });
        reader.readAsDataURL(file);
      } else {
        this.setState({
          imageBlob: null,
          filename: "",
          avatarSrc: currentAvatar
        });
      }
    };
  }

  render() {
    const {
      filename,
      avatarUrl,
      avatarSrc,
      noAvatarSrc
    } = this.state;
    const avatarStyle = {
      objectFit: 'cover',
      width: '150px',
      height: '150px',
      border: '1px solid lightgray',
      boxShadow: 'lightgray 6px 3px 10px 2px'
    };
    return /*#__PURE__*/React.createElement(Form, {
      id: "avatarForm",
      method: "post",
      action: avatarUrl,
      encType: "multipart/form-data",
      onSubmit: event => this.handleSubmit(event)
    }, /*#__PURE__*/React.createElement(FormGroup, {
      label: Msg.localize('avatarLabel'),
      fieldId: "avatar-current-or-preview",
      helperTextInvalid: this.state.errors.avatar,
      validated: this.state.errors.avatar === '' ? 'success' : 'error'
    }, avatarSrc !== "" ? /*#__PURE__*/React.createElement(Avatar, {
      src: avatarSrc,
      style: avatarStyle,
      alt: "Avatar image preview",
      onError: this.handleError
    }) : /*#__PURE__*/React.createElement(Avatar, {
      src: noAvatarSrc,
      style: avatarStyle,
      alt: "No avatar found"
    })), /*#__PURE__*/React.createElement(FormGroup, {
      fieldId: "avatar-upload",
      label: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Msg, {
        msgKey: "uploadLabel"
      }), ' ', /*#__PURE__*/React.createElement(Tooltip, {
        content: /*#__PURE__*/React.createElement(Msg, {
          msgKey: "avatarInfo"
        })
      }, /*#__PURE__*/React.createElement(OutlinedQuestionCircleIcon, null)))
    }, /*#__PURE__*/React.createElement(FileUpload, {
      id: "simple-file",
      filename: filename,
      filenamePlaceholder: Msg.localize('dragdropInfo'),
      browseButtonText: Msg.localize('browseButton'),
      clearButtonText: Msg.localize('clearButton'),
      onChange: this.handleFileInputChange
    })), /*#__PURE__*/React.createElement(ActionGroup, null, /*#__PURE__*/React.createElement(Button, {
      id: "save-btn",
      type: "submit",
      variant: "primary",
      isDisabled: filename === ""
    }, /*#__PURE__*/React.createElement(Msg, {
      msgKey: "doSave"
    }))));
  }

}

_defineProperty(AvatarForm, "contextType", AccountServiceContext);
//# sourceMappingURL=AvatarForm.js.map