Gagan7900
231 lines
12 KiB
HTML
231 lines
12 KiB
HTML
<div class="box custom-card">
|
|
<div class="box-header justify-between">
|
|
<div class="box-title">
|
|
Branding
|
|
</div>
|
|
</div>
|
|
|
|
<div class="box-body">
|
|
<form [formGroup]="brandingForm" autocomplete="off" (ngSubmit)="onSave()">
|
|
|
|
<div class="grid grid-cols-12 gap-x-5 gap-y-5">
|
|
|
|
<!-- Organization Logo -->
|
|
<div class="col-span-12 md:col-span-3">
|
|
<input #orgLogoInput type="file" class="hidden" accept="image/*" (change)="onFileSelected($event, 'orgLogo')">
|
|
<div
|
|
class="border border-dashed rounded-md flex flex-col items-center justify-center p-4 text-center text-sm cursor-pointer transition-all min-h-36 h-full relative group"
|
|
[class.border-primary]="uploads().orgLogo.isDragging" [class.bg-primary\/5]="uploads().orgLogo.isDragging"
|
|
[class.border-gray-400]="!uploads().orgLogo.isDragging && !uploads().orgLogo.file"
|
|
[class.border-primary\/60]="!uploads().orgLogo.isDragging && uploads().orgLogo.file"
|
|
[class.bg-gray-50\/30]="!uploads().orgLogo.isDragging" (click)="triggerFileInput(orgLogoInput)"
|
|
(dragover)="onDragOver($event, 'orgLogo')" (dragleave)="onDragLeave($event, 'orgLogo')"
|
|
(drop)="onDrop($event, 'orgLogo')">
|
|
@if (uploads().orgLogo.file) {
|
|
<div class="flex flex-col items-center justify-center w-full h-full gap-2">
|
|
@if (uploads().orgLogo.previewUrl) {
|
|
<img [src]="uploads().orgLogo.previewUrl" alt="Organization Logo"
|
|
class="max-h-20 max-w-full object-contain rounded shadow-sm">
|
|
} @else {
|
|
<i class="ri-file-text-line text-3xl text-primary"></i>
|
|
}
|
|
<div class="text-xs text-gray-600 font-medium truncate max-w-full px-2">
|
|
{{ uploads().orgLogo.fileName }}
|
|
</div>
|
|
<div class="text-[11px] text-gray-400">
|
|
{{ uploads().orgLogo.fileSize }}
|
|
</div>
|
|
<button type="button"
|
|
class="mt-1 text-xs text-danger hover:text-danger/80 flex items-center gap-1 cursor-pointer z-10"
|
|
(click)="removeFile('orgLogo', $event)">
|
|
<i class="ri-delete-bin-line"></i> Remove
|
|
</button>
|
|
</div>
|
|
} @else {
|
|
<span class="flex items-center gap-1 italic mb-1 font-medium text-gray-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-4 h-4 text-gray-400">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
|
|
</svg>
|
|
Organization Logo
|
|
</span>
|
|
<span class="text-xs text-gray-400 italic">(click or drag file here)</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- White Logo -->
|
|
<div class="col-span-12 md:col-span-3">
|
|
<input #whiteLogoInput type="file" class="hidden" accept="image/*"
|
|
(change)="onFileSelected($event, 'whiteLogo')">
|
|
<div
|
|
class="border border-dashed rounded-md flex flex-col items-center justify-center p-4 text-center text-sm cursor-pointer transition-all min-h-36 h-full relative group"
|
|
[class.border-primary]="uploads().whiteLogo.isDragging"
|
|
[class.bg-primary\/5]="uploads().whiteLogo.isDragging"
|
|
[class.border-gray-400]="!uploads().whiteLogo.isDragging && !uploads().whiteLogo.file"
|
|
[class.border-primary\/60]="!uploads().whiteLogo.isDragging && uploads().whiteLogo.file"
|
|
[class.bg-gray-50\/30]="!uploads().whiteLogo.isDragging" (click)="triggerFileInput(whiteLogoInput)"
|
|
(dragover)="onDragOver($event, 'whiteLogo')" (dragleave)="onDragLeave($event, 'whiteLogo')"
|
|
(drop)="onDrop($event, 'whiteLogo')">
|
|
@if (uploads().whiteLogo.file) {
|
|
<div class="flex flex-col items-center justify-center w-full h-full gap-2">
|
|
@if (uploads().whiteLogo.previewUrl) {
|
|
<div class="p-2 bg-gray-800 rounded">
|
|
<img [src]="uploads().whiteLogo.previewUrl" alt="White Logo" class="max-h-16 max-w-full object-contain">
|
|
</div>
|
|
} @else {
|
|
<i class="ri-file-text-line text-3xl text-primary"></i>
|
|
}
|
|
<div class="text-xs text-gray-600 font-medium truncate max-w-full px-2">
|
|
{{ uploads().whiteLogo.fileName }}
|
|
</div>
|
|
<div class="text-[11px] text-gray-400">
|
|
{{ uploads().whiteLogo.fileSize }}
|
|
</div>
|
|
<button type="button"
|
|
class="mt-1 text-xs text-danger hover:text-danger/80 flex items-center gap-1 cursor-pointer z-10"
|
|
(click)="removeFile('whiteLogo', $event)">
|
|
<i class="ri-delete-bin-line"></i> Remove
|
|
</button>
|
|
</div>
|
|
} @else {
|
|
<span class="flex items-center gap-1 italic mb-1 font-medium text-gray-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-4 h-4 text-gray-400">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
|
|
</svg>
|
|
White Logo (dark bg)
|
|
</span>
|
|
<span class="text-xs text-gray-400 italic">(click or drag file here)</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Favicon -->
|
|
<div class="col-span-12 md:col-span-3">
|
|
<input #faviconInput type="file" class="hidden" accept="image/*" (change)="onFileSelected($event, 'favicon')">
|
|
<div
|
|
class="border border-dashed rounded-md flex flex-col items-center justify-center p-4 text-center text-sm cursor-pointer transition-all min-h-36 h-full relative group"
|
|
[class.border-primary]="uploads().favicon.isDragging" [class.bg-primary\/5]="uploads().favicon.isDragging"
|
|
[class.border-gray-400]="!uploads().favicon.isDragging && !uploads().favicon.file"
|
|
[class.border-primary\/60]="!uploads().favicon.isDragging && uploads().favicon.file"
|
|
[class.bg-gray-50\/30]="!uploads().favicon.isDragging" (click)="triggerFileInput(faviconInput)"
|
|
(dragover)="onDragOver($event, 'favicon')" (dragleave)="onDragLeave($event, 'favicon')"
|
|
(drop)="onDrop($event, 'favicon')">
|
|
@if (uploads().favicon.file) {
|
|
<div class="flex flex-col items-center justify-center w-full h-full gap-2">
|
|
@if (uploads().favicon.previewUrl) {
|
|
<img [src]="uploads().favicon.previewUrl" alt="Favicon"
|
|
class="max-h-16 max-w-full object-contain rounded shadow-sm">
|
|
} @else {
|
|
<i class="ri-file-text-line text-3xl text-primary"></i>
|
|
}
|
|
<div class="text-xs text-gray-600 font-medium truncate max-w-full px-2">
|
|
{{ uploads().favicon.fileName }}
|
|
</div>
|
|
<div class="text-[11px] text-gray-400">
|
|
{{ uploads().favicon.fileSize }}
|
|
</div>
|
|
<button type="button"
|
|
class="mt-1 text-xs text-danger hover:text-danger/80 flex items-center gap-1 cursor-pointer z-10"
|
|
(click)="removeFile('favicon', $event)">
|
|
<i class="ri-delete-bin-line"></i> Remove
|
|
</button>
|
|
</div>
|
|
} @else {
|
|
<span class="flex items-center gap-1 italic mb-1 font-medium text-gray-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-4 h-4 text-gray-400">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
|
|
</svg>
|
|
Favicon / Icon
|
|
</span>
|
|
<span class="text-xs text-gray-400 italic">(click or drag file here)</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Digital Seal -->
|
|
<div class="col-span-12 md:col-span-3">
|
|
<input #digitalSealInput type="file" class="hidden" accept="image/*"
|
|
(change)="onFileSelected($event, 'digitalSeal')">
|
|
<div
|
|
class="border border-dashed rounded-md flex flex-col items-center justify-center p-4 text-center text-sm cursor-pointer transition-all min-h-36 h-full relative group"
|
|
[class.border-primary]="uploads().digitalSeal.isDragging"
|
|
[class.bg-primary\/5]="uploads().digitalSeal.isDragging"
|
|
[class.border-gray-400]="!uploads().digitalSeal.isDragging && !uploads().digitalSeal.file"
|
|
[class.border-primary\/60]="!uploads().digitalSeal.isDragging && uploads().digitalSeal.file"
|
|
[class.bg-gray-50\/30]="!uploads().digitalSeal.isDragging" (click)="triggerFileInput(digitalSealInput)"
|
|
(dragover)="onDragOver($event, 'digitalSeal')" (dragleave)="onDragLeave($event, 'digitalSeal')"
|
|
(drop)="onDrop($event, 'digitalSeal')">
|
|
@if (uploads().digitalSeal.file) {
|
|
<div class="flex flex-col items-center justify-center w-full h-full gap-2">
|
|
@if (uploads().digitalSeal.previewUrl) {
|
|
<img [src]="uploads().digitalSeal.previewUrl" alt="Digital Seal"
|
|
class="max-h-20 max-w-full object-contain rounded shadow-sm">
|
|
} @else {
|
|
<i class="ri-file-text-line text-3xl text-primary"></i>
|
|
}
|
|
<div class="text-xs text-gray-600 font-medium truncate max-w-full px-2">
|
|
{{ uploads().digitalSeal.fileName }}
|
|
</div>
|
|
<div class="text-[11px] text-gray-400">
|
|
{{ uploads().digitalSeal.fileSize }}
|
|
</div>
|
|
<button type="button"
|
|
class="mt-1 text-xs text-danger hover:text-danger/80 flex items-center gap-1 cursor-pointer z-10"
|
|
(click)="removeFile('digitalSeal', $event)">
|
|
<i class="ri-delete-bin-line"></i> Remove
|
|
</button>
|
|
</div>
|
|
} @else {
|
|
<span class="flex items-center gap-1 italic mb-1 font-medium text-gray-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
|
|
stroke="currentColor" class="w-4 h-4 text-gray-400">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
|
|
</svg>
|
|
Digital Seal & Signature
|
|
</span>
|
|
<span class="text-xs text-gray-400 italic">(click or drag file here)</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Brand Color -->
|
|
<div class="col-span-12 md:col-span-3">
|
|
<app-form-input formControlName="brandColor" inputId="brand-color" label="Brand Color"
|
|
placeholder="e.g. #1F3A93" variant="floating">
|
|
</app-form-input>
|
|
</div>
|
|
|
|
<!-- Theme Dropdown -->
|
|
<div class="col-span-12 md:col-span-3">
|
|
<app-form-select formControlName="theme" [id]="'branding-theme'" variant="floating" label="Theme"
|
|
[options]="themeOptions" [clearable]="false" [searchable]="false" [selectClass]="'rounded-sm'"
|
|
bindLabel="label" bindValue="value"></app-form-select>
|
|
</div>
|
|
|
|
<!-- Help Text -->
|
|
<div class="col-span-12 text-xs text-gray-500 italic mt-4">
|
|
All settings have working defaults — nothing here blocks onboarding. Security tab holds MFA / password policy
|
|
/ session / IP restriction with platform defaults.
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="box-footer modern-modal-footer flex flex-col sm:flex-row sm:justify-end sm:items-center gap-3">
|
|
<div class="grid grid-cols-2 gap-3 w-full sm:flex sm:w-auto sm:items-center sm:gap-3">
|
|
<div class="w-full sm:w-auto">
|
|
<app-button action="cancel" [variant]="'custom'" label="Cancel" [showIcon]="true" [fullWidth]="true"
|
|
className="onboarding-nav-btn onboarding-save-btn ti-btn-outline-primary whitespace-nowrap justify-center sm:w-32"
|
|
(buttonClicked)="onDiscard()"></app-button>
|
|
</div>
|
|
<div class="w-full sm:w-auto">
|
|
<app-button action="save" label="Save" [showIcon]="true" [fullWidth]="true"
|
|
className="sm:w-32 justify-center" (buttonClicked)="onSave()"></app-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |