steve/check-printing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add first-run setup wizard with 3-step account configuration

Browse Source
This commit is contained in:
Steve Dogiakos
2026-03-12 14:18:15 -06:00
parent 68300d0375
commit 14e1e15226
4 changed files with 346 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+97
View File
@@ -118,6 +118,103 @@
</form>
</aside>
<!-- Setup wizard -->
<div id="wizard-overlay" class="modal-overlay"></div>
<div id="wizard-modal" class="modal wizard-modal" role="dialog" aria-labelledby="wizard-title">
<div class="modal-header">
<h2 id="wizard-title">Account Setup</h2>
</div>
<div class="wizard-steps-indicator">
<div class="wizard-step-dot active" data-step="1"><span>1</span><label>Checkwriter</label></div>
<div class="wizard-step-line"></div>
<div class="wizard-step-dot" data-step="2"><span>2</span><label>Bank</label></div>
<div class="wizard-step-line"></div>
<div class="wizard-step-dot" data-step="3"><span>3</span><label>Account</label></div>
</div>
<div class="modal-body wizard-body">
<!-- Step 1: Checkwriter -->
<div class="wizard-step" id="wizard-step-1">
<div class="form-group required">
<label for="w-company1">Organization Name</label>
<input type="text" id="w-company1" autocomplete="organization">
</div>
<div class="form-group">
<label for="w-addr1">Address</label>
<input type="text" id="w-addr1" autocomplete="street-address">
</div>
<div class="form-row form-row-3">
<div class="form-group">
<label for="w-city">City</label>
<input type="text" id="w-city" autocomplete="address-level2">
</div>
<div class="form-group form-group-sm">
<label for="w-state">State</label>
<input type="text" id="w-state" maxlength="2" autocomplete="address-level1" placeholder="MT">
</div>
<div class="form-group form-group-sm">
<label for="w-zip">ZIP</label>
<input type="text" id="w-zip" maxlength="10" autocomplete="postal-code">
</div>
</div>
<div class="form-group">
<label for="w-contact">Phone / Website / Email</label>
<input type="text" id="w-contact" placeholder="e.g. 406-555-0100">
</div>
</div>
<!-- Step 2: Bank -->
<div class="wizard-step" id="wizard-step-2" hidden>
<div class="form-group required">
<label for="w-bank-name">Bank Name</label>
<input type="text" id="w-bank-name">
</div>
<div class="form-group">
<label for="w-bank-addr">Bank Address</label>
<input type="text" id="w-bank-addr">
</div>
<div class="form-group">
<label for="w-transit">Transit Code</label>
<input type="text" id="w-transit" placeholder="e.g. 092900383">
</div>
<div class="form-group">
<label for="w-bank-contact">Phone / Website</label>
<input type="text" id="w-bank-contact">
</div>
</div>
<!-- Step 3: Account -->
<div class="wizard-step" id="wizard-step-3" hidden>
<div class="form-group required">
<label for="w-routing">Routing Number</label>
<input type="text" id="w-routing" inputmode="numeric" maxlength="9">
</div>
<div class="form-group required">
<label for="w-account">Account Number</label>
<input type="text" id="w-account" inputmode="numeric">
</div>
<div class="form-group required">
<label for="w-start-check">Starting Check Number</label>
<input type="number" id="w-start-check" min="1" step="1" value="1001">
</div>
<div class="form-group">
<label for="w-logo">Logo (optional)</label>
<input type="file" id="w-logo" accept="image/*">
<span class="field-hint">Printed top-left of each check. PNG or GIF recommended.</span>
</div>
</div>
<div id="wizard-error" class="wizard-error" hidden></div>
</div>
<div class="modal-footer wizard-footer">
<button id="btn-wizard-prev" class="btn-secondary" hidden>← Back</button>
<button id="btn-wizard-next" class="btn-primary">Next →</button>
<button id="btn-wizard-finish" class="btn-primary" hidden>Save &amp; Start</button>
<button id="btn-wizard-skip" class="btn-ghost">Use Import instead</button>
</div>
</div>
<!-- Import modal -->
<div id="import-modal-overlay" class="modal-overlay"></div>
<div id="import-modal" class="modal" role="dialog" aria-labelledby="import-modal-title">