Overlay Components

Full-screen overlay panels from components/overlays/. Built on OverlayBase.vue (full-screen v-dialog) with OverlayHeader.vue (close button) or OverlayHeaderLogo.vue (logo + close).

OverlaySigning

components/overlays/OverlaySigning.vue — Shown during the signing process. Displays SigningSpinner with mobile number. Opens Swisscom/ATrust iframes in nested dialogs for certificate confirmation.

Signing in progress
Please confirm on your mobile device
+41 79 *** ** 45

OverlaySigningSuccess

components/overlays/OverlaySigningSuccess.vue — Success confirmation after signing. Props: isSealing, isSimpleUi, processedRequests[], showHeader. Handles single vs multiple requests, auto-redirect with exit URLs.

Successfully signed!
Your document has been signed and all parties have been notified.

OverlaySigningSuccessNas

components/overlays/OverlaySigningSuccessNas.vue — Success screen for NAS (non-authenticated signing) with signer table and upgrade upsell. Uses OverlayHeaderLogo. Two-column layout with SignersTable + UpgradeToStarterPlan.

Document signed
All signers have been notified.
anna@example.comSigned
bob@example.comSigned
Try Skribble for free
Create your own signing requests and manage documents.

OverlaySigningFailure

components/overlays/OverlaySigningFailure.vue — Comprehensive signing error overlay handling multiple error cases: cancelled, timeout, MobileID, PIN errors, password/OTP errors, free signature limits. Two-column layout with error-specific image and message.

Cancelled

sign-cancel
Signing cancelled
You cancelled the signing process. You can try again at any time.

Timeout / Expired

verification-code-expired
Session expired
Your signing session has timed out. Please try again.

Generic error

sign-error
Something went wrong
An error occurred during signing. Please try again or contact support if the issue persists.

OverlaySigningFailureXQES

components/overlays/OverlaySigningFailureXQES.vue — Failure screen for eIDAS qualified signature. Shows transaction ID and contact support link. Props: failureReason, transactionId. No header (showHeader: false).

Signing failed
The eIDAS qualified signature could not be completed.
Transaction ID:
txn_a1b2c3d4e5f6

OverlaySigningLocked

components/overlays/OverlaySigningLocked.vue — Shown when another signer is currently signing. Polls lock status every 3 seconds. Shows locking user name and "Sign Now" when unlocked. Props: lockData, processedRequests[].

someone-signing.webp
Someone is signing
Anna Schmidt is currently signing this document. Please wait.

OverlayMabSigningFailure

components/overlays/OverlayMabSigningFailure.vue — Generic signing failure with minimal layout. Shows image + title + "Sign Now" button + optional cancel link. Props: processedRequests[].

sr-failed.webp
Signing failed
Something went wrong. Please try again.
Cancel

OverlayPart11Verification

components/overlays/OverlayPart11Verification.vue — 6-digit TAN verification for Part 11 (21 CFR Part 11) authentication. Props: continuationData {challengeId}. Uses InputTan component.

Enter verification code
We sent a 6-digit code to your email address.
Resend code

OverlayMobileAes

components/overlays/OverlayMobileAes.vue — TAN verification for AES (Advanced Electronic Signature) via SMS. Same layout as Part11 but with mobile-specific messaging. Props: continuationData {challengeId}.

Enter SMS code
We sent a code to +41 79 *** ** 45.
Resend code

OverlayTanExpired

components/overlays/OverlayTanExpired.vue — Expired TAN notification with option to retry. Props: isLinkFlow, documentTitle, requestOwnerName, isLoading. Two-column layout.

Code expired
Your verification code has expired. Request a new one to continue signing.
Document: Contract_2025.pdf
From: Anna Schmidt
tan-expired

OverlayTanInvalid

components/overlays/OverlayTanInvalid.vue — Wrong TAN entered with retry option. Props: isLinkFlow, documentTitle, requestOwnerName, isLoading. 5/7 two-column split.

Wrong code
The code you entered is incorrect. Please check and try again.
verification-code-wrong

OverlayTanLocked

components/overlays/OverlayTanLocked.vue — TAN entry locked after too many failed attempts. Shows countdown timer. Props: isLinkFlow, lockedMinutes. 5/7 two-column split.

Account locked
Too many incorrect attempts. Your account is temporarily locked.
Try again in 15 minutes.
tan-locked

OverlaySerialNumMismatch

components/overlays/OverlaySerialNumMismatch.vue — Error when certificate serial number doesn't match. Two-column layout with help section.

Certificate mismatch
The certificate serial number does not match. Please contact support.
tan-expired

OverlayDirectSign

components/overlays/OverlayDirectSign.vue — QR code display for direct signing with document viewer and FAQ. Desktop shows QR + "How it works" step panels. Props: signatureRequest, isDesktop.

Sign with your phone
Scan the QR code with your phone to sign the document.
QR Code
1. Scan
Scan QR code with your phone camera
2. Identify
Verify your identity on your device
3. Sign
Confirm the signature on your phone

OverlayDeleteUser

components/overlays/OverlayDeleteUser.vue — Delete account confirmation. Requires password or email re-entry. 5/7 two-column split with image.

delete-skribble
Delete account
This action cannot be undone. Enter your password to confirm.

OverlayTransferToIdent

components/overlays/OverlayTransferToIdent.vue — Transfer to identity verification with QR code. Uses OverlayHeaderLogo. Shows QR code + FAQ section. Props: url, signatureRequestId.

Verify your identity
Scan the QR code with your phone to start the identification process.
QR Code

OverlayEditSignature

components/overlays/OverlayEditSignature.vue — Create/edit visual signature with cropper, settings toggles, and preview. Props: signature, operationType ('create'|'edit'), isLoading. Complex form with SignatureCropper, TextInputs, SkrSwitch toggles.

Edit visual signature
Signature preview
Display options

OverlayCreateSignerGroup

components/overlays/OverlayCreateSignerGroup.vue — Create/edit signer group with member selection. Props: groupId, maxParticipants, operationType ('create'|'edit'). Form with group name, member list, save/delete buttons.

Create signer group
Members
anna.schmidt@example.com
bob.jones@example.com

OverlayAddSeats

components/overlays/OverlayAddSeats.vue — Upgrade plan by adding seats with dynamic price preview. Props: currentSeats, maxSeatsDelta, isLoading. Complex form with NumberIncrement and CouponSubtotals.

Add seats
Add more seats to your plan. Changes apply immediately.
3
Additional seats
3 seats x CHF 25.00CHF 75.00
Total per monthCHF 75.00

OverlayStarterTrial

components/overlays/OverlayStarterTrial.vue — Upgrade to Team/Pro with trial activation form. Props: planType ('TEAM_V1'|'PRO_V1'). 5/7 two-column split with form + feature reassurance cards using custom:no_credit_card and custom:upgrade_arrow icons.

Try Team for free
Start a 30-day free trial. No credit card required.
No credit card
Try risk-free for 30 days
Easy upgrade
Seamlessly upgrade after your trial

OverlayExhaustedSignatures

components/overlays/OverlayExhaustedSignatures.vue — Displayed when user has no free signatures remaining. Two-column layout with image and redirect CTA.

No free signatures left
You've used all your free signatures. Upgrade your plan to continue signing.
error-no-free-sigs