Files
imapsync/html/imapsync_form_extra.html

236 lines
10 KiB
HTML

<!DOCTYPE html>
<!-- $Id: imapsync_form_extra.html,v 1.4 2019/11/07 11:16:25 gilles Exp gilles $ -->
<html lang="en" id="top">
<head>
<title>Imapsync online</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="imapsync_form.css">
<link rel="license" href="https://imapsync.lamiral.info/NOLIMIT">
<noscript>
<link rel="stylesheet" href="noscript.css">
</noscript>
</head>
<body>
<div class="scripton">
<!-- will appear if some tests fail -->
<pre id="tests" class="collapse"></pre>
<!-- hidden stuff that must exit for the tests -->
<div class="d-none">
<input type="checkbox" id="test_checkbox">
<input type="text" id="test_text">
<input type="radio" id="test_radio1" name="test_radio" value="first">
<input type="radio" id="test_radio2" name="test_radio" value="second">
</div>
</div>
<div class="container">
<div class="row my-3">
<div class="col">
<h1 class="text-center">heyday Imap Sync</h1>
</div>
</div>
<form id="form" action="/cgi-bin/imapsync" method="post" autocomplete="on">
<div id="form_row" class="row h-100">
<div id="account1" class="col col-md-5 order-0 py-3">
<fieldset>
<legend class="text-center fs-2 text-light">IMAP source mailbox</legend>
<label for="user1" class="form-check-label text-light">Login</label>
<div class="input-group form-group">
<span class="input-group-text"><i class="bi bi-person"></i></span>
<input data-toggle="tooltip" data-placement="bottom"
title="Euer LDAP Login" type="text"
class="form-control input-lg" id="user1" name="user1" tabindex="1"
placeholder="kuhnm">
</div>
<label class="form-check-label text-light" for="password1">Password</label>
<div class="input-group form-group">
<span class="input-group-text"><i class="bi bi-lock"></i></span>
<input data-toggle="tooltip" data-placement="bottom"
title="Passwords are not stored on the server" type="password"
class="form-control input-lg" id="password1" name="password1" tabindex="2"
placeholder="Passwort">
</div>
<div class="text-end">
<label class="form-check-label text-light" for="showpassword1">
Zeige das Passwort
</label>
<input class="form-check-input" type="checkbox" id="showpassword1">
</div>
<label for="host1" class="form-check-label text-light">Server</label>
<div class="input-group form-group">
<span class="input-group-text"><i class="bi bi-cloudy"></i></span>
<input data-toggle="tooltip" data-placement="bottom"
title="IMAP transfers are done with encryption if the servers support it."
list="servers1" type="text" class="form-control input-lg" id="host1" name="host1" value="mail.heyday.marketing"
tabindex="3" placeholder="Enter imap source server name or IP address">
</div>
</fieldset>
</div>
<div id="account2" class="col col-md-5 order-1 order-lg-2 offset-md-2 py-3">
<fieldset>
<legend class="text-center h2 text-light">IMAP destination mailbox</legend>
<label for="user2" class="form-check-label text-light">Login</label>
<div class="input-group form-group">
<span class="input-group-text"><i class="bi bi-person"></i></span>
<input data-toggle="tooltip" data-placement="bottom"
title="Eure komplette E-Mail Adresse" type="text"
class="form-control input-lg" id="user2" name="user2" tabindex="6"
placeholder="m.kuhn@heydevelop.de">
</div>
<label for="password2" class="form-check-label text-light">Passwort</label>
<div class="input-group form-group">
<span class="input-group-text"><i class="bi bi-lock"></i></span>
<input data-toggle="tooltip" data-placement="bottom"
title="Passwords are not stored on the server" type="password"
class="form-control input-lg" id="password2" name="password2" tabindex="7"
placeholder="Passwort">
</div>
<div class="text-end">
<label class="form-check-label text-light" for="showpassword2">
Zeige passwort
</label>
<input class="form-check-input" type="checkbox" id="showpassword2">
</div>
<label for="host2" class="form-check-label text-light">Server</label>
<div class="input-group form-group ">
<span class="input-group-text"><i class="bi bi-cloudy"></i></span>
<input data-toggle="tooltip" data-placement="bottom"
title="IMAP transfers are done with encryption if the servers support it."
list="servers2" type="text" class="form-control input-lg" id="host2" name="host2" value="mail.heydevelop.de"
tabindex="8" placeholder="mail.heydevelop.de">
</div>
<div>
</div>
</fieldset>
</div>
</div>
<input type="hidden" name="automap" value="on">
<input type="hidden" name="addheader" value="on">
<!-- -#->
<input type="hidden" name="simulong" value="360">
<!-#- -->
<a id="buttons"></a>
<hr>
<!-- Classical button to go to the log only -->
<noscript>
<div class="row">
<div class="col-sm-12 p-0">
<button type="submit" class="btn btn-success btn-lg center-block btn-block">Los Synchronisiere!</button>
</div>
</div>
</noscript>
<!-- Javascript buttons using xhr -->
<div class="row scripton">
<div class="col-sm-6 p-0">
<button id="bt-sync" type="button" class="btn btn-success btn-lg center-block btn-block"
tabindex="11" data-toggle="tooltip" data-placement="top"
title="Launch the sync! You can abort the sync with the red Abort button nearby or by closing the tab/window.">
Sync Starten!<br>
<i class="bi bi-envelope"></i>
<i class="bi bi-arrow-right"></i>
<i class="bi bi-envelope"></i>
</button>
</div>
<div class="col-sm-6 d-bone ">
<button id="bt-abort" type="button" class="btn btn-danger btn-lg center-block btn-block"
tabindex="12" data-toggle="tooltip" data-placement="top"
title="Abort the sync! You can restart the sync later, no duplicates should happen.">
Abort!<br>
<i class="bi bi-scissors"></i>
</button>
</div>
</div>
</form>
<div class="row scripton" id="consoles">
<pre id="progress-txt">ETA: Estimation Time of Arrival</pre>
<div class="progress progress-stacked">
<div id="progress-bar-done" class="progress-bar bg-success" role="progressbar" aria-valuenow="0">
Done
</div>
<div id="progress-bar-left" class="progress-bar bg-info" role="progressbar" aria-valuenow="100">
Todo
</div>
</div>
<div class="col-sm-6 well">
<h2 class="text-center">Console of imapsync launch</h2>
<pre id="console" class="overflow-scroll">
</pre>
<a id="link_to_bottom" href="#bottom">Bottom of imapsync log</a>
</div>
<div class="col-sm-6 well">
<h2 class="text-center">Console of abort</h2>
<pre id="abort">
</pre>
</div>
</div>
</div>
<div class="container overflow-y-scroll vh-25">
<h2 class="text-center scripton">Log of imapsync run</h2>
<pre id="output" class="scripton overflow-scroll"></pre>
<hr>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="imapsync_form.js">
</script>
</body>
</html>