89 lines
5.0 KiB
HTML
89 lines
5.0 KiB
HTML
<div id="imap-modal" @click.away="$refs.modal.close()" class="modal-box" x-data="{ errors: {{ 'true' if errors else 'false' }} }" x-init="$nextTick(() => { if (errors) { document.querySelector('#submit-btn').classList.add('shake'); } })" >
|
|
<h3 class="font-bold text-lg mb-4">Configure IMAP Connection</h3>
|
|
|
|
{% if success %}
|
|
<div class="alert alert-success mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
<span>{{ message }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if errors and errors.general %}
|
|
<div class="alert alert-error mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
|
<span>{{ errors.general }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form id="imap-form" hx-post="/api/imap/test" hx-target="#imap-modal" hx-swap="outerHTML">
|
|
<div class="mb-4">
|
|
<label for="imap-server" class="block text-sm font-medium mb-1">IMAP Server</label>
|
|
<input type="text" id="imap-server" name="server"
|
|
class="input input-bordered w-full {% if errors and errors.server %}input-error{% endif %}"
|
|
placeholder="e.g., imap.gmail.com" required
|
|
value="{% if server is defined %}{{ server }}{% endif %}">
|
|
{% if errors and errors.server %}
|
|
<div class="text-error text-sm mt-1">{{ errors.server }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="imap-port" class="block text-sm font-medium mb-1">Port</label>
|
|
<input type="number" id="imap-port" name="port"
|
|
class="input input-bordered w-full {% if errors and errors.port %}input-error{% endif %}"
|
|
placeholder="e.g., 993" required
|
|
value="{% if port is defined %}{{ port }}{% else %}993{% endif %}">
|
|
{% if errors and errors.port %}
|
|
<div class="text-error text-sm mt-1">{{ errors.port }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="imap-username" class="block text-sm font-medium mb-1">Username</label>
|
|
<input type="text" id="imap-username" name="username"
|
|
class="input input-bordered w-full {% if errors and errors.username %}input-error{% endif %}"
|
|
placeholder="e.g., your-email@gmail.com" required
|
|
value="{% if username is defined %}{{ username }}{% endif %}">
|
|
{% if errors and errors.username %}
|
|
<div class="text-error text-sm mt-1">{{ errors.username }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="imap-password" class="block text-sm font-medium mb-1">Password</label>
|
|
<input type="password" id="imap-password" name="password"
|
|
class="input input-bordered w-full {% if errors and errors.password %}input-error{% endif %}"
|
|
placeholder="App password or account password" required
|
|
value="{% if password is defined %}{{ password }}{% endif %}">
|
|
{% if errors and errors.password %}
|
|
<div class="text-error text-sm mt-1">{{ errors.password }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="flex items-center cursor-pointer">
|
|
<input type="checkbox" id="imap-use-ssl" name="use_ssl" class="checkbox mr-2" checked>
|
|
<span class="text-sm font-medium">Use SSL (Recommended)</span>
|
|
</label>
|
|
<p class="text-xs text-base-content/70 mt-1">Most IMAP servers use SSL on port 993</p>
|
|
</div>
|
|
|
|
<div class="modal-action" data-loading-states>
|
|
<button type="button" class="btn btn-outline"
|
|
@click="$dispatch('close-modal')">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="submit-btn" :class="{ 'shake': errors }" data-loading-disable >
|
|
<span data-loading-class="!hidden">Test Connection</span>
|
|
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{% if success %}
|
|
<div class="mt-4 pt-4 border-t border-base-300" data-loading-states>
|
|
<button class="btn btn-success w-full" hx-post="/api/imap/sync" hx-target="#folders-list" hx-swap="innerHTML" data-loading-disable>
|
|
<span data-loading-class="!hidden"><i class="fas fa-sync mr-2"></i>Sync Folders</span>
|
|
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
</div> |