feat(cropper): move the Image Cropper into the tools app at /cropper
- Smart Photo Editor ported from id-image-bot: queue/by-ID picture loading, vue-croppa editing, carvekit background cleanup, nodered review flow, a2loft save — restyled to the tools design language - unified login: YOUreka session identity, phone prefilled, OTP only at save (a2loft's requirement); artist-login step removed - crop_image @ domain:idid OpenFGA gate on every cropper route: cached 5-min on reads, live on save, fail closed - credentials (minio/azure/nodered/carvekit) via env, sole exception to hardcoded config; 503 when unconfigured; native FormData replaces form-data; new deps minio + azure-storage - 10 new tests (35 total) with fake minio/queue/nodered/removebg/a2loft
This commit is contained in:
@@ -0,0 +1,180 @@
|
||||
<!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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-croppa@1.3.8/dist/vue-croppa.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='6' fill='%233b4fd8'/><path d='M12 5a6 6 0 0 0-6 6c0 2.6.8 4.1 1.5 5.2' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/><path d='M15.5 19a7.5 7.5 0 0 0 3-9.7A6 6 0 0 0 7.1 7.9' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/><path d='M9.5 18.5a5.5 5.5 0 0 1-.8-7.6 3.8 3.8 0 0 1 7.2 1.5 4.3 4.3 0 0 1-3.4 4.6' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'/></svg>">
|
||||
<style>
|
||||
.croppa-pad { border: 1px dashed var(--faint); border-radius: 12px; width: 252px; height: 270px; overflow: hidden; background: #fafbfe; }
|
||||
.croppa-pad img { width: 250px; display: block; }
|
||||
.review-options .form-check { margin-bottom: 0.35rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div id="app">
|
||||
<nav class="nav">
|
||||
<div class="container">
|
||||
<a class="brand" href="/">
|
||||
<span class="brand-mark">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2v14a2 2 0 0 0 2 2h14"/><path d="M18 22V8a2 2 0 0 0-2-2H2"/></svg>
|
||||
</span>
|
||||
YOUreka <small>Tools</small>
|
||||
</a>
|
||||
<div class="nav-right" v-cloak v-if="session">
|
||||
<span class="user-chip">
|
||||
<span class="avatar">{{ initials }}</span>
|
||||
{{ session.firstName || session.phone }}
|
||||
</span>
|
||||
<a class="linklike" href="/auth/logout">Sign out</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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 }} · {{ message.message.domain }}</span>
|
||||
</div>
|
||||
<div class="row-gap">
|
||||
<button class="btn btn-primary" v-bind:disabled="busy.load" v-on:click="loadPicture('next')">
|
||||
<span v-if="!busy.load">Load next queued</span>
|
||||
<span v-else>Loading…</span>
|
||||
</button>
|
||||
<button class="btn btn-ghost" v-bind:disabled="busy.load" v-on:click="loadPicture('by-id')">Load by upload ID</button>
|
||||
<button class="btn btn-ghost" v-if="message && message.message" v-on:click="reset">Clear</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.domain }}</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 }} <span class="badge-soft badge-brand">{{ message.message.process.variables.environment }}</span></dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div class="finger-grid mt-2">
|
||||
<div>
|
||||
<label>Original — crop it</label>
|
||||
<div class="croppa-pad mt-1">
|
||||
<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>
|
||||
</div>
|
||||
<div v-if="cleanedImage">
|
||||
<label>Cleaned preview</label>
|
||||
<div class="croppa-pad mt-1">
|
||||
<img :src="cleanedImage" alt="cleaned preview">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-gap mt-2" style="align-items:flex-end;">
|
||||
<div style="min-width:200px;">
|
||||
<label for="requiresCleaning">Requires cleaning?</label>
|
||||
<select id="requiresCleaning" class="form-control" v-model="requiresCleaning">
|
||||
<option value="">--Choose--</option>
|
||||
<option value="Yes">Yes</option>
|
||||
<option value="No">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" v-if="requiresCleaning === 'Yes'" v-bind:disabled="busy.clean" v-on:click="cleanImage">
|
||||
<span v-if="!busy.clean">Clean background</span>
|
||||
<span v-else>Cleaning…</span>
|
||||
</button>
|
||||
<button class="btn btn-danger-ghost" v-if="cleanedImage" v-on:click="cleanedImage = null">Remove cleaned image</button>
|
||||
</div>
|
||||
|
||||
<hr class="mt-2">
|
||||
|
||||
<div class="row-gap" v-if="!reviewed">
|
||||
<div class="btn btn-success" style="border-radius:10px; padding:0.55rem 1.1rem; font-weight:600; cursor:pointer;" v-on:click="reviewed = true; accepted = true">Accept picture</div>
|
||||
<div class="btn btn-danger" style="border-radius:10px; padding:0.55rem 1.1rem; font-weight:600; cursor:pointer;" v-on:click="reviewed = true; accepted = false">Reject picture</div>
|
||||
</div>
|
||||
|
||||
<div v-if="reviewed && accepted" class="mt-2">
|
||||
<div class="row-gap" style="align-items:flex-end;">
|
||||
<div style="min-width:150px; max-width:200px;">
|
||||
<label for="otpSave">OTP</label>
|
||||
<input id="otpSave" class="form-control" v-model.trim="otp" autocomplete="one-time-code">
|
||||
</div>
|
||||
<button class="btn btn-primary" v-bind:disabled="!canSave" v-on:click="saveChanges">
|
||||
<span v-if="!busy.save">Crop and upload picture</span>
|
||||
<span v-else>Saving…</span>
|
||||
</button>
|
||||
<button class="btn btn-ghost" v-on:click="reviewed = false">Change review</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="reviewed && !accepted" class="mt-2">
|
||||
<label>Please state why this picture is not good enough.</label>
|
||||
<div class="review-options mt-1">
|
||||
<div class="form-check" v-for="item in reviewOptions" v-bind:key="item.index">
|
||||
<input class="form-check-input" type="checkbox" v-model="selectedReviewOptions" v-bind:id="'reason-' + item.index" v-bind:value="item.name">
|
||||
<label class="form-check-label" v-bind:for="'reason-' + item.index">{{ item.name }}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1" style="max-width:480px;">
|
||||
<label for="otherReviewOption">Others (please specify).</label>
|
||||
<textarea id="otherReviewOption" rows="3" class="form-control" v-model="otherReviewOption"></textarea>
|
||||
</div>
|
||||
<div class="row-gap mt-2">
|
||||
<button class="btn btn-primary" v-bind:disabled="!canReview" v-on:click="reviewPicture()">
|
||||
<span v-if="!busy.review">Send review</span>
|
||||
<span v-else>Sending…</span>
|
||||
</button>
|
||||
<button class="btn btn-danger-ghost" v-if="!message.message.process" v-bind:disabled="!canReview" v-on:click="removeFromQueue">Dequeue only</button>
|
||||
<button class="btn btn-ghost" v-on:click="reviewed = false">Change review</button>
|
||||
</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…</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="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>
|
||||
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
|
||||
<script src="/assets/cropper/app.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user