@internetarchive/elements 1.1.3-webdev-9240.0 → 1.1.3

package/dist/src/elements/ia-reviews/ia-review-form.js

@@ -1,685 +0,0 @@
-import { __decorate } from "tslib";
-import { html, css, LitElement, nothing, } from 'lit';
-import { property, state, query } from 'lit/decorators.js';
-import { customElement } from '../../util/custom-element.js';
-import { localized, msg, str } from '@lit/localize';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import DOMPurify from 'dompurify';
-import '../../elements/ia-button/ia-button.js';
-import { Review } from '@internetarchive/metadata-service';
-import starSelected from './assets/star-selected.svg';
-import starUnselected from './assets/star-unselected.svg';
-import './ia-review.js';
-/**
- * Renders a form to edit a given IA review.
- */
-let IAReviewForm = class IAReviewForm extends LitElement {
-    constructor() {
-        super(...arguments);
-        /* Optionally avoid using recaptcha for the form */
-        this.bypassRecaptcha = false;
-        /* Number of stars currently selected */
-        this.currentStars = 0;
-        /* Length of review subject currently filled in */
-        this.currentSubjectLength = 0;
-        /* Length of review body currently filled in */
-        this.currentBodyLength = 0;
-        /* Whether recaptcha failed to load, which blocks submission */
-        this.recaptchaUnavailable = false;
-        /* Whether to enable the submit button */
-        this.formCanSubmit = false;
-        /* Whether to show a loading indicator for the form */
-        this.submissionInProgress = false;
-    }
-    render() {
-        return html `<form id="review-form" @submit=${this.handleSubmit}>
-      ${this.unrecoverableErrorMessage
-            ? this.unrecoverableErrorTemplate
-            : html `
-            <span class="inputs">
-              ${this.starsInputTemplate} ${this.subjectInputTemplate}
-              ${this.bodyInputTemplate}
-            </span>
-          `}
-      ${this.recaptchaMessageTemplate} ${this.recoverableErrorTemplate}
-      ${this.actionButtonsTemplate}
-    </form>`;
-    }
-    willUpdate(changed) {
-        // Fill in previous review, if provided
-        if (changed.has('oldReview')) {
-            this.currentStars = this.oldReview?.stars ?? 0;
-            this.currentSubjectLength = this.oldReview?.reviewtitle?.length ?? 0;
-            this.currentBodyLength = this.oldReview?.reviewbody?.length ?? 0;
-        }
-        // Set up ReCaptcha, if possible
-        if (changed.has('recaptchaManager') &&
-            !this.bypassRecaptcha &&
-            this.recaptchaManager) {
-            this.setupRecaptcha();
-        }
-        // Disable form if unrecoverable error added
-        if (changed.has('unrecoverableError') ||
-            changed.has('recaptchaUnavailable')) {
-            this.formCanSubmit = this.checkSubmissionAllowed();
-        }
-        // Ensure new subject and body have correct length
-        if (changed.has('currentSubjectLength') ||
-            changed.has('currentBodyLength') ||
-            changed.has('maxSubjectLength') ||
-            changed.has('maxBodyLength')) {
-            this.formCanSubmit = this.checkSubmissionAllowed();
-        }
-    }
-    /** Error to render instead of form inputs */
-    get unrecoverableErrorTemplate() {
-        const message = this.unrecoverableErrorMessage;
-        return message
-            ? html `
-          <div class="unrecoverable-error">
-            <span class="error-msg">${message}</span>
-          </div>
-        `
-            : nothing;
-    }
-    /** Error to render next to submit button */
-    get recoverableErrorTemplate() {
-        const message = this.recoverableErrorMessage;
-        return message
-            ? html `
-          <div class="recoverable-error">
-            ${unsafeHTML(this.sanitizeErrorMsg(message))}
-          </div>
-        `
-            : nothing;
-    }
-    /* The error that replaces the form inputs: one passed in, or recaptcha failing to load */
-    get unrecoverableErrorMessage() {
-        if (this.unrecoverableError)
-            return this.unrecoverableError;
-        return this.recaptchaUnavailable ? this.recaptchaErrorMessage : undefined;
-    }
-    /* The error shown next to the submit button: one passed in or sent back, or one the form raised */
-    get recoverableErrorMessage() {
-        if (this.recoverableError)
-            return this.recoverableError;
-        switch (this.formError) {
-            case 'recaptcha':
-                return this.recaptchaErrorMessage;
-            case 'generic':
-                return this.genericErrorMessage;
-            default:
-                return undefined;
-        }
-    }
-    /* Error to show if recaptcha cannot be loaded or run */
-    get recaptchaErrorMessage() {
-        return msg('Could not validate review. Please try again later.');
-    }
-    get genericErrorMessage() {
-        return msg("There's been a temporary error. Please wait a moment and try again.");
-    }
-    get recaptchaMessageTemplate() {
-        if (this.bypassRecaptcha)
-            return nothing;
-        return html `
-      <span class="recaptcha-disclaimer"
-        >${msg(html `This site is protected by reCAPTCHA and the Google
-            <a
-              target="_blank"
-              class="inline-link"
-              href="https://policies.google.com/privacy"
-              >Privacy Policy</a
-            >
-            and
-            <a
-              target="_blank"
-              class="inline-link"
-              href="https://policies.google.com/terms"
-              >Terms of Service</a
-            >
-            apply.`)}</span
-      >
-    `;
-    }
-    /** Clickable group of stars */
-    get starsInputTemplate() {
-        return html `
-      <div class="form-heading rating">
-        <label for="stars-field">${msg('Rating (optional)')}</label>
-      </div>
-      <input
-        type="hidden"
-        name="field_stars"
-        id="stars-input"
-        .value=${this.currentStars.toString()}
-        required
-      />
-      <div class="stars">
-        ${[1, 2, 3, 4, 5].map((num) => this.renderStar(num))}
-        <button
-          type="button"
-          class="clear-stars-btn"
-          @click=${this.handleClearBtnClicked}
-        >
-          ${msg('Clear')}
-        </button>
-      </div>
-    `;
-    }
-    /** Subject input and character counter */
-    get subjectInputTemplate() {
-        return html `
-      <span id="subject-input" class="input-box ${this.maxSubjectLength &&
-            this.currentSubjectLength > this.maxSubjectLength
-            ? 'error'
-            : ''}"
-      ><div class="form-heading">
-        <label for="field_reviewtitle">${msg('Subject')}</label>
-        ${this.maxSubjectLength
-            ? html `<div class="char-count subject">
-                ${this.currentSubjectLength}/${this.maxSubjectLength}
-              </div>`
-            : nothing}
-      </div>
-      <input
-        type="text"
-        name="field_reviewtitle"
-        id="field_reviewtitle"
-        .value=${this.oldReview?.reviewtitle ?? ''}
-        @input=${this.handleSubjectChanged}
-        required
-    />${this.maxSubjectLength
-            ? html `
-            <div class="input-error">
-              ${msg(str `Subject may only have ${this.maxSubjectLength} characters`)}
-            </div>
-          `
-            : nothing}</div></span>
-    `;
-    }
-    /** Body input and character counter */
-    get bodyInputTemplate() {
-        return html `
-      <span
-        id="body-input"
-        class="input-box ${this.maxBodyLength &&
-            this.currentBodyLength > this.maxBodyLength
-            ? 'error'
-            : ''}"
-        ><div class="form-heading">
-          <label for="field_reviewbody">${msg('Review')}</label>
-          ${this.maxBodyLength
-            ? html `<div class="char-count body">
-                ${this.currentBodyLength}/${this.maxBodyLength}
-              </div>`
-            : nothing}
-        </div>
-        <textarea
-          name="field_reviewbody"
-          id="field_reviewbody"
-          .value=${this.oldReview?.reviewbody ?? ''}
-          rows="10"
-          cols="50"
-          required
-          @input=${this.handleBodyChanged}
-        ></textarea>
-        ${this.maxBodyLength
-            ? html `
-              <div class="input-error">
-                ${msg(str `Review may only have ${this.maxBodyLength} characters`)}
-              </div>
-            `
-            : nothing}
-      </span>
-    `;
-    }
-    /** Buttons to render at bottom of form */
-    get actionButtonsTemplate() {
-        return html `<div class="action-btns">
-      <ia-button
-        mode="secondary"
-        class="cancel-btn"
-        data-testid="cancel-btn"
-        @click=${this.cancelReviewEdit}
-      >
-        ${msg('Cancel')}
-      </ia-button>
-      <ia-button
-        mode="primary"
-        type="submit"
-        class="submit-btn"
-        .disabled=${!this.formCanSubmit}
-        .loading=${this.submissionInProgress}
-      >
-        ${msg('Submit review')}
-      </ia-button>
-    </div>`;
-    }
-    /**
-     * Renders a star icon, using its number and the current star rating
-     * to determine whether it should appear selected or not
-     *
-     * @param {number} num The number of the current star
-     * @returns {HTMLTemplateResult} The correct icon, rendered within a button
-     */
-    renderStar(num) {
-        const isSelected = num === this.currentStars;
-        const ratingLabel = num === 1 ? msg('Rate 1 star') : msg(str `Rate ${num} stars`);
-        return html `
-      <button
-        class="star star-${num}"
-        title=${isSelected ? msg('Clear rating') : ratingLabel}
-        @click=${(e) => this.handleStarClicked(e, num)}
-      >
-        ${num <= this.currentStars
-            ? html `<img
-              class="star-selected"
-              src=${starSelected}
-              alt=""
-              aria-hidden="true"
-            />`
-            : html `<img
-              class="star-unselected"
-              src=${starUnselected}
-              alt=""
-              aria-hidden="true"
-            />`}
-      </button>
-    `;
-    }
-    /**
-     * Sets up ReCaptcha for the form, if possible.
-     *
-     * On failure, replaces form inputs with the ReCaptcha error message.
-     */
-    async setupRecaptcha() {
-        try {
-            this.recaptchaWidget = await this.recaptchaManager?.getRecaptchaWidget();
-        }
-        catch {
-            this.recaptchaUnavailable = true;
-        }
-    }
-    /**
-     * Uses DOMpurify to sanitize any error message before render.
-     *
-     * @param {string} errorMsg The error message to be sanitized
-     * @returns {string} The sanitized error message
-     */
-    sanitizeErrorMsg(errorMsg) {
-        return DOMPurify.sanitize(errorMsg, { ALLOWED_TAGS: ['a', 'b', 'br'] });
-    }
-    /** Handles validation and recaptcha execution on form submission */
-    async handleSubmit(e) {
-        e.preventDefault();
-        // Prevent disallowed or double submission
-        if (!this.formCanSubmit || this.submissionInProgress)
-            return;
-        // Set loading behavior
-        this.submissionInProgress = true;
-        this.recoverableError = '';
-        this.formError = undefined;
-        // Check for HTML errors
-        if (!this.reviewForm.reportValidity()) {
-            return this.stopSubmission();
-        }
-        if (!this.reviewService || !this.identifier) {
-            this.formError = 'generic';
-            return this.stopSubmission();
-        }
-        try {
-            let recaptchaToken;
-            if (!this.bypassRecaptcha) {
-                recaptchaToken = await this.getRecaptchaToken();
-                if (!recaptchaToken)
-                    return this.handleRecaptchaError();
-            }
-            const result = await this.reviewService.submitReview({
-                identifier: this.identifier,
-                title: this.reviewForm.field_reviewtitle.value,
-                body: this.reviewForm.field_reviewbody.value,
-                stars: this.reviewForm.field_stars.value,
-                recaptchaToken,
-            });
-            if (result?.success === true) {
-                this.submissionInProgress = false;
-                const newReview = this.generateSubmittedReview();
-                // Emit a reviewUpdated event
-                const event = new CustomEvent('reviewUpdated', {
-                    detail: newReview,
-                });
-                this.dispatchEvent(event);
-            }
-            else {
-                if (result.error)
-                    this.recoverableError = result.error;
-                else
-                    this.formError = 'generic';
-                this.stopSubmission();
-            }
-        }
-        catch (e) {
-            console.error(e);
-            this.formError = 'generic';
-            this.stopSubmission();
-        }
-    }
-    /**
-     * Generates a review object from the submitted review,
-     * for optimistic display on success.
-     *
-     * @returns {Review} The review to display
-     */
-    generateSubmittedReview() {
-        const today = new Date().toDateString();
-        const newReview = new Review({
-            reviewtitle: this.reviewForm.field_reviewtitle.value,
-            reviewbody: this.reviewForm.field_reviewbody.value,
-            stars: this.reviewForm.field_stars.value,
-            reviewdate: today,
-            reviewer: this.oldReview?.reviewer ??
-                this.submitterScreenname ??
-                msg('Anonymous'),
-            reviewer_itemname: this.oldReview?.reviewer_itemname ?? this.submitterItemname,
-            createdate: this.dateToString(this.oldReview?.createdate) ?? today,
-        });
-        return newReview;
-    }
-    /**
-     * Converts date to string if it is a Date, otherwise
-     * leaves unchanged.
-     */
-    dateToString(date) {
-        if (date instanceof Date)
-            return date.toDateString();
-        return date;
-    }
-    /**
-     * Executes the ReCaptcha challenge for the form.
-     * Attempts form submission on success.
-     * */
-    async getRecaptchaToken() {
-        if (!this.recaptchaWidget) {
-            this.handleRecaptchaError();
-            return;
-        }
-        try {
-            const recaptchaToken = await this.recaptchaWidget.execute();
-            return recaptchaToken;
-        }
-        catch {
-            this.handleRecaptchaError();
-            return;
-        }
-    }
-    /* Handles a recaptcha error during submission */
-    handleRecaptchaError() {
-        this.formError = 'recaptcha';
-        this.stopSubmission();
-    }
-    /* Handles canceled form submission */
-    stopSubmission() {
-        if (this.submissionInProgress) {
-            this.submissionInProgress = false;
-        }
-    }
-    /* Emits an event to close the form */
-    cancelReviewEdit() {
-        const event = new CustomEvent('reviewEditCanceled');
-        this.dispatchEvent(event);
-    }
-    /* Prevents form submission and sets stars based on number clicked */
-    handleStarClicked(e, num) {
-        e.preventDefault();
-        this.setStars(num);
-    }
-    /* Clear stars if requested */
-    handleClearBtnClicked(e) {
-        e.preventDefault();
-        this.currentStars = 0;
-    }
-    /* Updates star count, resetting to 0 if the currently selected star is clicked */
-    setStars(num) {
-        this.currentStars = num === this.currentStars ? 0 : num;
-    }
-    /* Updates subject input length */
-    handleSubjectChanged(e) {
-        const subjectInput = e.target;
-        this.currentSubjectLength = subjectInput.value.length;
-    }
-    /* Updates body input length */
-    handleBodyChanged(e) {
-        const bodyInput = e.target;
-        this.currentBodyLength = bodyInput.value.length;
-    }
-    /* Checks if submission should be allowed */
-    checkSubmissionAllowed() {
-        // Form must not have an unrecoverable error
-        if (this.unrecoverableErrorMessage) {
-            return false;
-        }
-        // Subject and body must not be empty
-        if (!this.currentBodyLength || !this.currentSubjectLength) {
-            return false;
-        }
-        // Subject must be correct length
-        if (!!this.maxSubjectLength &&
-            this.currentSubjectLength > this.maxSubjectLength) {
-            return false;
-        }
-        // Body must be correct length
-        if (!!this.maxBodyLength && this.currentBodyLength > this.maxBodyLength) {
-            return false;
-        }
-        return true;
-    }
-    static get styles() {
-        return [
-            css `
-        .form-heading {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          padding-top: 15px;
-        }
-
-        .form-heading.rating {
-          padding-top: 0;
-        }
-
-        .form-heading label {
-          font-size: 1.6rem;
-          font-weight: bold;
-        }
-
-        label {
-          display: inline-block;
-          margin-bottom: 5px;
-        }
-
-        textarea,
-        input[type='text'],
-        .unrecoverable-error {
-          padding: 5px;
-          width: calc(100% - 10px);
-          font-family: inherit;
-          border-radius: 5px;
-          border: 1px solid var(--container-border-color, #999999);
-        }
-
-        .input-box.error input,
-        .input-box.error textarea {
-          border: 2px solid var(--container-error-color, #ea0202);
-        }
-
-        .input-box.error .char-count,
-        .input-error,
-        .unrecoverable-error,
-        .recoverable-error {
-          color: var(--container-error-color, #ea0202);
-        }
-
-        .input-error {
-          display: none;
-        }
-
-        .input-box.error .input-error {
-          display: block;
-          text-align: right;
-          padding-top: 5px;
-        }
-
-        .inline-link {
-          color: var(--container-link-color, #4f65f5);
-          text-decoration: none;
-        }
-
-        .inline-link:hover {
-          text-decoration: underline;
-        }
-
-        .stars {
-          display: flex;
-          flex-direction: row;
-          gap: 2px;
-          align-items: center;
-        }
-
-        .star {
-          all: unset;
-          height: 30px;
-          width: 30px;
-        }
-
-        .star-selected,
-        .star-unselected {
-          display: block;
-          width: 100%;
-          height: 100%;
-        }
-
-        .star:hover {
-          cursor: pointer;
-        }
-
-        .clear-stars-btn,
-        .recoverable-error a {
-          padding: 0 5px;
-          color: var(--container-link-color, #4f65f5);
-          font-family: inherit;
-          border: none;
-          background: transparent;
-          display: inline-block;
-          padding-top: 5px;
-        }
-
-        .clear-stars-btn:hover,
-        .recoverable-error a:hover {
-          cursor: pointer;
-          text-decoration: underline;
-        }
-
-        .action-btns {
-          width: 100%;
-          display: flex;
-          justify-content: flex-end;
-          gap: 10px;
-          padding-top: 15px;
-        }
-
-        .ia-button:disabled {
-          opacity: 0.75;
-        }
-
-        .ia-button:disabled:hover {
-          cursor: not-allowed;
-        }
-
-        .unrecoverable-error {
-          min-height: 50px;
-          padding: 5px;
-          text-align: center;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          background-color: var(--container-bg-color, #fbfbfd);
-        }
-
-        .recaptcha-disclaimer {
-          font-size: 1.2rem;
-        }
-
-        @media only screen and (max-width: 350px) {
-          .action-btns {
-            flex-direction: column-reverse;
-            align-items: center;
-          }
-        }
-      `,
-        ];
-    }
-};
-__decorate([
-    property({ type: String })
-], IAReviewForm.prototype, "identifier", void 0);
-__decorate([
-    property({ type: String })
-], IAReviewForm.prototype, "submitterScreenname", void 0);
-__decorate([
-    property({ type: String })
-], IAReviewForm.prototype, "submitterItemname", void 0);
-__decorate([
-    property({ type: Object })
-], IAReviewForm.prototype, "oldReview", void 0);
-__decorate([
-    property({ type: String })
-], IAReviewForm.prototype, "unrecoverableError", void 0);
-__decorate([
-    property({ type: Number })
-], IAReviewForm.prototype, "maxSubjectLength", void 0);
-__decorate([
-    property({ type: Number })
-], IAReviewForm.prototype, "maxBodyLength", void 0);
-__decorate([
-    property({ type: Object })
-], IAReviewForm.prototype, "reviewService", void 0);
-__decorate([
-    property({ type: Object })
-], IAReviewForm.prototype, "recaptchaManager", void 0);
-__decorate([
-    property({ type: Boolean })
-], IAReviewForm.prototype, "bypassRecaptcha", void 0);
-__decorate([
-    state()
-], IAReviewForm.prototype, "currentStars", void 0);
-__decorate([
-    state()
-], IAReviewForm.prototype, "currentSubjectLength", void 0);
-__decorate([
-    state()
-], IAReviewForm.prototype, "currentBodyLength", void 0);
-__decorate([
-    state()
-], IAReviewForm.prototype, "recoverableError", void 0);
-__decorate([
-    state()
-], IAReviewForm.prototype, "formError", void 0);
-__decorate([
-    state()
-], IAReviewForm.prototype, "recaptchaUnavailable", void 0);
-__decorate([
-    state()
-], IAReviewForm.prototype, "formCanSubmit", void 0);
-__decorate([
-    state()
-], IAReviewForm.prototype, "submissionInProgress", void 0);
-__decorate([
-    query('#review-form')
-], IAReviewForm.prototype, "reviewForm", void 0);
-IAReviewForm = __decorate([
-    customElement('ia-review-form'),
-    localized()
-], IAReviewForm);
-export { IAReviewForm };
-//# sourceMappingURL=ia-review-form.js.map