tools-legacy/tools/public/assets/cropper/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Image Cropper · YOUreka Tools</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@carbon/styles@1.69.0/css/styles.min.css">
  <link rel="stylesheet" href="/assets/style.css">
  <link rel="icon" type="image/png" href="/assets/youreka-favicon.png">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.css">
  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/ui-shell.min.js"></script>
  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/modal.min.js"></script>
  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/button.min.js"></script>
  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/notification.min.js"></script>
  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/version/v2.50.0/tag.min.js"></script>
  <style>
    .croppa-pad { border: 1px solid var(--cds-border-strong, #8d8d8d); width: 252px; height: 270px; overflow: hidden; background: var(--cds-field, #f4f4f4); }
    .croppa-pad img { width: 250px; display: block; }
    .review-options .form-check { margin-bottom: 0.35rem; }
  </style>
</head>
<body class="app cds--g100">
<div id="app">
  <!--app-header-->

  <main class="container" v-cloak v-if="session">
    <div class="page-head">
      <div>
        <h1>Image Cropper</h1>
        <p class="sub">Review, crop and save identity photos</p>
      </div>
    </div>

    <!-- notifications -->
    <div class="toast-viewport" aria-live="polite">
      <cds-inline-notification v-for="t in toasts" v-bind:key="t.id" v-bind:kind="t.kind"
                               v-bind:title="t.title" v-bind:subtitle="t.caption" low-contrast
                               v-on:cds-notification-closed="removeToast(t.id)"></cds-inline-notification>
    </div>

    <!-- 1 · load -->
    <section class="card panel">
      <div class="panel-head">
        <span class="step-chip">1</span>
        <h2>Load a picture</h2>
        <span class="hint" v-if="message && message.message">Working on {{ message.message.caption || '(no caption)' }} &middot; {{ message.message.domain }}</span>
      </div>
      <div class="row-gap">
        <cds-button v-bind:disabled="busy.load" v-on:click="loadPicture('next')">
          <svg slot="icon" width="16" height="16" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M16 8L14.57 9.393 20.15 15 8 15 8 17 20.15 17 14.57 22.573 16 24 24 16 16 8z"/><path d="M16,30A14,14,0,1,1,30,16,14.0158,14.0158,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12.0137,12.0137,0,0,0,16,4Z"/></svg>
          <span v-if="!busy.load">Load next queued</span>
          <span v-else>Loading&hellip;</span>
        </cds-button>
        <cds-button kind="secondary" v-bind:disabled="busy.load" v-on:click="loadPicture('by-id')">
          <svg slot="icon" width="16" height="16" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"/></svg>
          Load by upload ID
        </cds-button>
        <cds-button kind="ghost" v-if="message && message.message" v-on:click="reset">
          <svg slot="icon" width="16" height="16" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M18,28A12,12,0,1,0,6,16v6.2L2.4,18.6,1,20l6,6,6-6-1.4-1.4L8,22.2V16H8A10,10,0,1,1,18,26Z"/></svg>
          Clear
        </cds-button>
      </div>
    </section>

    <!-- 2 · review & crop -->
    <section class="card panel" v-if="message && message.message">
      <div class="panel-head">
        <span class="step-chip">2</span>
        <h2>Review picture</h2>
        <span class="hint">Accept, or reject with reasons</span>
      </div>

      <dl class="details">
        <div><dt>Phone</dt><dd>{{ message.message.caption || '—' }}</dd></div>
        <div>
          <dt>Domain</dt>
          <dd>
            {{ message.message.domainCode || message.message.domain }}
            <span v-if="message.message.domainCode && message.message.domainCode !== message.message.domain" class="faint">
              &middot; picture target {{ message.message.domain }}
            </span>
          </dd>
        </div>
        <div v-if="agent"><dt>Agent</dt><dd>{{ agent.name }} <span class="faint">{{ agent.phone }}</span></dd></div>
        <div v-if="message.message.process">
          <dt>Process</dt>
          <dd>{{ message.message.process.variables.name }} <cds-tag type="blue">{{ message.message.process.variables.environment }}</cds-tag></dd>
        </div>
      </dl>

      <div class="editor-grid mt-2">
        <div class="editor-media">
          <label class="cds--label">Original — crop it</label>
          <div class="croppa-pad mt-1">
            <croppa ref="croppa" v-model="myCroppa" :show-remove-button="false" :width="250" :height="267.44" :quality="2">
              <img slot="initial" crossOrigin="anonymous" :src="message.message.file_url" style="width: 300px">
            </croppa>
          </div>
          <template v-if="cleanedImage">
            <label class="cds--label mt-2" style="display:block;">Cleaned preview</label>
            <div class="croppa-pad mt-1">
              <img :src="cleanedImage" alt="cleaned preview">
            </div>
            <cds-button kind="ghost" class="mt-1" v-on:click="cleanedImage = null">
              <svg slot="icon" width="16" height="16" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M12 12H14V24H12zM18 12H20V24H18z"/><path d="M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z"/></svg>
              Remove cleaned image
            </cds-button>
          </template>
        </div>

        <div class="editor-controls">
          <div class="row-gap" style="align-items:flex-end;">
            <div style="min-width:200px;">
              <label class="cds--label" for="requiresCleaning">Requires cleaning?</label>
              <select id="requiresCleaning" class="cds--select-input" v-model="requiresCleaning">
                <option value="">--Choose--</option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
              </select>
            </div>
            <cds-button v-if="requiresCleaning === 'Yes'" v-bind:disabled="busy.clean" v-on:click="cleanImage">
              <svg slot="icon" width="16" height="16" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M29.4141,24,12,6.5859a2.0476,2.0476,0,0,0-2.8281,0l-2.586,2.586a2.0021,2.0021,0,0,0,0,2.8281L23.999,29.4141a2.0024,2.0024,0,0,0,2.8281,0l2.587-2.5865a1.9993,1.9993,0,0,0,0-2.8281ZM8,10.5859,10.5859,8l5,5-2.5866,2.5869-5-5ZM25.4131,28l-11-10.999L17,14.4141l11,11Z"/><path d="M2.586 14.586H5.414V17.414H2.586z" transform="rotate(-45 4 16)"/><path d="M14.586 2.586H17.414V5.414H14.586z" transform="rotate(-45 16 4)"/><path d="M2.586 2.586H5.414V5.414H2.586z" transform="rotate(-45 4 4)"/></svg>
              <span v-if="!busy.clean">Clean background</span>
              <span v-else>Cleaning&hellip;</span>
            </cds-button>
          </div>

          <hr class="mt-2">

          <div class="row-gap" v-if="!reviewed">
            <cds-button v-on:click="reviewed = true; accepted = true">
              <svg slot="icon" width="16" height="16" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z"/></svg>
              Accept picture
            </cds-button>
            <cds-button kind="danger" v-on:click="reviewed = true; accepted = false">
              <svg slot="icon" width="16" height="16" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M16,2C8.2,2,2,8.2,2,16s6.2,14,14,14s14-6.2,14-14S23.8,2,16,2z M16,28C9.4,28,4,22.6,4,16S9.4,4,16,4s12,5.4,12,12S22.6,28,16,28z"/><path d="M21.4 23L16 17.6 10.6 23 9 21.4 14.4 16 9 10.6 10.6 9 16 14.4 21.4 9 23 10.6 17.6 16 23 21.4z"/></svg>
              Reject picture
            </cds-button>
          </div>

          <div v-if="reviewed && accepted" class="mt-2">
            <div class="row-gap" style="align-items:flex-end;">
              <cds-button v-bind:disabled="!canSave" v-on:click="saveChanges">
                <svg slot="icon" width="16" height="16" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M25,20H23V9H12V7H23a2,2,0,0,1,2,2Z"/><path d="M9,23V2H7V7H2V9H7V23a2,2,0,0,0,2,2H23v5h2V25h5V23Z"/></svg>
                <span v-if="!busy.save">Crop and upload picture</span>
                <span v-else>Saving&hellip;</span>
              </cds-button>
              <cds-button kind="ghost" v-on:click="reviewed = false">
                <svg slot="icon" width="16" height="16" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M20,10H7.8149l3.5874-3.5859L10,5,4,11,10,17l1.4023-1.4146L7.8179,12H20a6,6,0,0,1,0,12H12v2h8a8,8,0,0,0,0-16Z"/></svg>
                Change review
              </cds-button>
            </div>
          </div>

          <div v-if="reviewed && !accepted" class="mt-2">
            <label class="cds--label">Please state why this picture is not good enough.</label>
            <div class="review-options mt-1" v-for="item in reviewOptions" v-bind:key="item.index">
              <div class="cds--form-item cds--checkbox-wrapper">
                <input class="cds--checkbox" type="checkbox" v-bind:id="'reason-' + item.index"
                       v-bind:value="item.name" v-model="selectedReviewOptions">
                <label class="cds--checkbox-label" v-bind:for="'reason-' + item.index">
                  <span class="cds--checkbox-label-text">{{ item.name }}</span>
                </label>
              </div>
            </div>
            <div class="mt-1" style="max-width:480px;" v-if="otherOptionSelected">
              <label class="cds--label" for="otherReviewOption">Others (please specify).</label>
              <div class="cds--text-area__wrapper">
                <textarea id="otherReviewOption" rows="3" class="cds--text-area" v-model="otherReviewOption"></textarea>
              </div>
            </div>
            <div class="row-gap mt-2">
              <cds-button kind="danger" v-bind:disabled="!canReview" v-on:click="reviewPicture()">
                <svg slot="icon" width="16" height="16" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M27.45,15.11l-22-11a1,1,0,0,0-1.08.12,1,1,0,0,0-.33,1L7,16,4,26.74A1,1,0,0,0,5,28a1,1,0,0,0,.45-.11l22-11a1,1,0,0,0,0-1.78Zm-20.9,10L8.76,17H18V15H8.76L6.55,6.89,24.76,16Z"/></svg>
                <span v-if="!busy.review">Send review</span>
                <span v-else>Sending&hellip;</span>
              </cds-button>
              <cds-button kind="ghost" v-if="!message.message.process" v-bind:disabled="!canReview" v-on:click="removeFromQueue">
                <svg slot="icon" width="16" height="16" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M8 15H24V17H8z"/></svg>
                Dequeue only
              </cds-button>
              <cds-button kind="ghost" v-on:click="reviewed = false">
                <svg slot="icon" width="16" height="16" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M20,10H7.8149l3.5874-3.5859L10,5,4,11,10,17l1.4023-1.4146L7.8179,12H20a6,6,0,0,1,0,12H12v2h8a8,8,0,0,0,0-16Z"/></svg>
                Change review
              </cds-button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <main class="container" v-cloak v-if="loading && !session">
    <div class="narrow center-v">
      <div class="card panel" style="text-align:center;">Loading your session&hellip;</div>
    </div>
  </main>

  <footer class="foot" v-cloak v-if="session">
    <div class="container">
      <span>Smart Photo Editor</span>
      <span>Signed in as {{ session.phone }}</span>
    </div>
  </footer>

  <script src="/assets/cropper/app.js"></script>
</div>
</body>
</html>