webinterface.git

Login-Screen mit Umschalter für Benutzeraccount/Mailbox/Kundennummer
Parent 09f320a
Bernd Wurst

Bernd Wurst commited on 2024-02-15 19:19:49
Zeige 3 geänderte Dateien mit 55 Einfügungen und 1 Löschungen.

themes/default/desktop.css
Zeige Datei @ 05ef7db
... ... 
@@ -512,3 +512,16 @@ span.buttonset.disabled input[type="radio"]:checked+label {
512 512 
 .nowrap {
513 513 
     white-space: nowrap;
514 514 
 }
515 
+
516 
+p.login_option {
517 
+    display: inline-block;
518 
+    padding: 3px 30px;
519 
+    border: 1px solid #b2c2cb;
520 
+    margin: 0;
521 
+}
522 
+
523 
+
524 
+p.login_option.active {
525 
+    background-color: #b2c2cb;
526 
+}
527 
+
themes/default/page-login.js
Zeige Datei @ 05ef7db
... ... 
@@ -0,0 +1,33 @@
1 
+// <p class="login_option active" id="login_option_useraccount">Benutzeraccount</p><p class="login_option" id="login_option_mailbox">E-Mail-Postfach</p><p class="login_option" id="login_option_customerno">Kundennummer</p>
2 
+//<p class="login_option_help">Über Ihren Benutzeraccount legen Sie alle Einstellungen fest.</p>
3 
+
4 
+function useraccountClicked() {
5 
+    document.querySelector('#login_option_useraccount').classList.add("active");
6 
+    document.querySelector('#login_option_mailbox').classList.remove("active");
7 
+    document.querySelector('#login_option_customerno').classList.remove("active");
8 
+    document.querySelector('.login_option_help').innerHTML = 'Über Ihren Benutzeraccount legen Sie alle Einstellungen fest.';
9 
+    document.querySelector('#username').previousElementSibling.innerHTML = 'Benutzername:';
10 
+}
11 
+
12 
+function mailboxClicked() {
13 
+    document.querySelector('#login_option_useraccount').classList.remove("active");
14 
+    document.querySelector('#login_option_mailbox').classList.add("active");
15 
+    document.querySelector('#login_option_customerno').classList.remove("active");
16 
+    document.querySelector('.login_option_help').innerHTML = 'Durch die Anmeldung mit Ihrem Postfach können Sie Ihre Weiterleitungen und Abwesenheitsmeldungen einrichten.';
17 
+    document.querySelector('#username').previousElementSibling.innerHTML = 'E-Mail-Adresse:';
18 
+}
19 
+
20 
+function customernoClicked() {
21 
+    document.querySelector('#login_option_useraccount').classList.remove("active");
22 
+    document.querySelector('#login_option_mailbox').classList.remove("active");
23 
+    document.querySelector('#login_option_customerno').classList.add("active");
24 
+    document.querySelector('.login_option_help').innerHTML = 'Mit der Kundennummer können Sie nur Einstellungen setzen, die nicht den Benutzeraccount betreffen.';
25 
+    document.querySelector('#username').previousElementSibling.innerHTML = 'Kundennummer:';
26 
+}
27 
+
28 
+
29 
+ready(() => {
30 
+    document.querySelector('#login_option_useraccount').addEventListener('click', useraccountClicked);
31 
+    document.querySelector('#login_option_mailbox').addEventListener('click', mailboxClicked);
32 
+    document.querySelector('#login_option_customerno').addEventListener('click', customernoClicked);
33 
+});
themes/default/page-login.tpl.php
Zeige Datei @ 05ef7db
... ... 
@@ -26,7 +26,9 @@ if ($title) {
26 26 
 <link rel="stylesheet" href="<?php echo $THEME_PATH; ?>style.css" media="screen" title="Normal">
27 27 
 <link rel="icon" href="<?php echo $THEME_PATH; ?>favicon.ico">
28 28 
 <?php echo $html_header; ?>
29 
+<script src="<?php echo $prefix; ?>js/common.js"></script>
29 30 
 <script src="<?php echo $THEME_PATH; ?>script.js"></script>
31 
+<script src="<?php echo $THEME_PATH; ?>page-login.js"></script>
30 32 
 </head>
31 33
32 34 
 <body onload="javascript:document.getElementById('username').focus();">
... ... 
@@ -56,10 +58,16 @@ if ($messages) {
56 58 
 <h3 class="headline">schokokeks.org Hosting Webinterface</h3>
57 59 
 <p>Auf dieser Seite können Sie diverse Einstellungen Ihres Accounts auf schokokeks.org Hosting festlegen. Sofern Sie noch kein Kunde von schokokeks.org Hosting sind, können Sie diese Seite nicht benutzen. Besuchen Sie in diesem Fall bitte unsere <a href="https://schokokeks.org">öffentliche Seite</a>.</p>
58 60 
 <form method="post">
59 
-<p class="login_field"><label for="username" class="login_label">Benutzername oder E-Mail-Adresse:</label> <input type="text" id="username" name="webinterface_username" size="30" autocomplete="username"></p>
61 
+<div class="login_chooser">
62 
+<p>Anmelden als:</p>
63 
+<p class="login_option active" id="login_option_useraccount">Benutzeraccount</p><p class="login_option" id="login_option_mailbox">E-Mail-Postfach</p><p class="login_option" id="login_option_customerno">Kundennummer</p>
64 
+<p class="login_option_help">Über Ihren Benutzeraccount legen Sie alle Einstellungen fest.</p>
65 
+
66 
+<p class="login_field"><label for="username" class="login_label">Benutzername:</label> <input type="text" id="username" name="webinterface_username" size="30" autocomplete="username"></p>
60 67 
 <p class="login_field"><label for="password" class="login_label">Passwort:</label> <input type="password" id="password" name="webinterface_password" size="30" autocomplete="current-password"> &nbsp; (<a href="<?php echo $BASE_PATH; ?>go/index/lost_password">Passwort vergessen?</a>)</p>
61 68 
 <p><span class="login_label">&#160;</span> <input type="submit" value="Anmelden"></p>
62 69 
 </form>
70 
+</div>
63 71 
 <p>Sie können sich hier mit Ihrem System-Benutzernamen, Ihrer E-Mail-Adresse oder Ihrer Kundennummer (jeweils mit zugehörigem Passwort) anmelden. Je nach gewählten Daten erhalten Sie unterschiedliche Zugriffsrechte.</p>
64 72 
 <?php /* <p>Sollten Sie Ihr Benutzer-Passwort nicht mehr kennen, wenden Sie sich bitte an den Support. Passwörter für E-Mail-Konten kann der Eigentümer des Benutzeraccounts neu setzen.</p> */ ?>
65 73
66 74