start accounts tab

index.html

@@ -37,9 +37,15 @@
             .pb-1 {
                 padding-bottom: 1rem;
             }
+            .pl-1 {
+                padding-left: 1rem;
+            }
             .mr-1 {
                 margin-right: 1rem;
             }
+            .ml-1 {
+                margin-left: 1rem;
+            }
             .mb-2 {
                 margin-bottom: 2rem;
             }
@@ -181,6 +187,32 @@
                 width: 100%;
                 justify-content: center;
             }
+            .unfocused {
+                display: none;
+            }
+            .fr {
+                float: right;
+            }
+            .stealth-input-hidden {
+                border-style: none;
+                --fallback-box-shadow: none;
+                --field-hover-box-shadow: none;
+                --field-focus-box-shadow: none;
+                padding-top: 0.1rem;
+                padding-bottom: 0.1rem;
+            }
+            .stealth-input {
+                font-size: 1rem;
+                padding-top: 0.1rem;
+                padding-bottom: 0.1rem;
+                margin-left: 0.5rem;
+                margin-right: 1rem;
+                max-width: 50%;
+            
+            }
+
+
+
         </style>
         <title>{{ .lang.pageTitle }}</title>
     </head>
@@ -201,6 +233,7 @@
                     <span class="button ~neutral !normal mb-1">Theme</span>
                 </div>
             </div>
+            <div id="invitesTab" class="unfocused">
                 <div class="card ~neutral !high invites mb-1">
                     <span class="heading">Invites</span>
                     <div class="inv">
@@ -290,8 +323,11 @@
                         <div class="card ~neutral !low col">
                             <label class="label supra" for="inv-uses">Number of uses</label>
                             <div class="button-input mb-1">
-                            <input type="number" id="inv-uses" class="input ~neutral !normal mr-1" value=1>
+                                <input type="number" min="0" id="inv-uses" class="input ~neutral !normal mr-1" value=1>
-                            <span id="inv-inf-uses" class="button ~neutral !normal" aria-label="Infinite uses">∞</span>
+                                <label for="inv-inf-uses" class="button ~neutral !normal">
+                                    <span>∞</span>
+                                    <input type="checkbox" class="unfocused" id="inv-inf-uses" aria-label="Set uses to infinite">
+                                </label>
                             </div>
                             <label class="label supra">Profile</label>
                             <div class="select ~neutral !normal mb-1" id="inv-profile">
@@ -304,13 +340,48 @@
                             <label class="label supra">Send to</label>
                             <div class="button-input mb-1">
                                 <input type="text" id="inv-email" class="input ~neutral !normal mr-1" placeholder="example@example.com">
-                            <span id="inv-email-enabled" class="button ~neutral !normal" aria-label="Send to enabled">✓</span>
+                                <label for="inv-email-enabled" class="button ~neutral !normal">
+                                    <input type="checkbox" id="inv-email-enabled" aria-label="Send to address enabled">
+                                </label>
                             </div>
                             <span class="button ~positive !normal supra full-width button-lg">Create</span>
                         </div>
                     </div>
                 </div>
             </div>
+            <div id="accountsTab">
+                <div class="card ~neutral !high accounts mb-1">
+                    <span class="heading">Accounts</span>
+                    <div class="card ~neutral !normal accounts-header mt-half">
+                        <div class="fr">
+                            <span class="button ~neutral !normal" id="accounts-add-user">Add User</span>
+                            <span class="button ~positive !normal" id="accounts-modify-user">Modify Settings</span>
+                            <span class="button ~critical !normal" id="accounts-delte-user">Delete User</span>
+                        </div>
+                        <table class="table">
+                            <thead>
+                                <tr>
+                                    <th><input type="checkbox" value="" id="accounts-select-all"></th>
+                                    <th>Username</th>
+                                    <th>Email Address</th>
+                                    <th>Last Active</th>
+                                </tr>
+                            </thead>
+                            <tbody id="accounts-list">
+                                <tr>
+                                    <td><input type="checkbox" value=""></td>
+                                    <td>Person <span class="chip ~info ml-1">Admin</span></td>
+                                    <td><i class="icon icon-edit"></i><input type="email" class="input ~neutral !normal stealth-input stealth-input-hidden" value="email@addr.ess" readonly></td>
+                                    <td>13/12/20 00:39</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
         <script>
             const whichTransitionEvent = () => {
                 const el = document.createElement("fakeElement");
@@ -349,21 +420,70 @@
                     //el.classList.toggle("hidden");
                 };
             }
-            document.getElementById('inv-inf-uses').onclick = function () {
+            const checkInfUses = function (check, mode = 2) {
                 const uses = document.getElementById('inv-uses');
-                uses.disabled = (this.classList.contains('!normal'));
+                if (mode == 2) {
-                this.classList.toggle('!normal');
+                    uses.disabled = check.checked;
-                this.classList.toggle('!high');
+                    check.parentElement.classList.toggle('!normal');
-                this.classList.toggle('inf');
+                    check.parentElement.classList.toggle('!high');
+                } else if (mode == 1) {
+                    uses.disabled = true;
+                    check.checked = true;
+                    check.parentElement.classList.remove('!normal');
+                    check.parentElement.classList.add('!high');
+                } else {
+                    uses.disabled = false;
+                    check.checked = false;
+                    check.parentElement.classList.remove('!high');
+                    check.parentElement.classList.add('!normal');
+                }
             };
         
-            document.getElementById('inv-email-enabled').onclick = function () {
+            let invInfUses = document.getElementById('inv-inf-uses');
-                const uses = document.getElementById('inv-email');
+            invInfUses.onclick = () => { checkInfUses(invInfUses, 2); };
-                uses.disabled = !(this.classList.contains('!normal'));
+
-                this.classList.toggle('!normal');
+            const checkEmailEnabled = function (check, mode = 2) {
-                this.classList.toggle('!high');
+                const input = document.getElementById('inv-email');
-                this.classList.toggle('enabled');
+                if (mode == 2) {
+                    input.disabled = !check.checked;
+                    check.parentElement.classList.toggle('!normal');
+                    check.parentElement.classList.toggle('!high');
+                } else if (mode == 1) {
+                    input.disabled = false;
+                    check.checked = true;
+                    check.parentElement.classList.remove('!normal');
+                    check.parentElement.classList.add('!high');
+                } else {
+                    input.disabled = true;
+                    check.checked = false;
+                    check.parentElement.classList.remove('!high');
+                    check.parentElement.classList.add('!normal');
+                }
             };
+            let invEmailEnabled = document.getElementById('inv-email-enabled')
+            invEmailEnabled.onchange = () => { checkEmailEnabled(invEmailEnabled, 2); };
+
+            checkInfUses(invInfUses, 0);
+            checkEmailEnabled(invEmailEnabled, 0);
+            
+            const loadAccounts = function () {
+                const rows = document.getElementById("accounts-list").children;
+                for (let i = 0; i < rows.length; i++) {
+                    const row = rows[i];
+                    const editButton = row.querySelector(".icon");
+                    const emailInput = row.querySelector(".input");
+                    editButton.onclick = function () {
+                        emailInput.classList.toggle('stealth-input-hidden');
+                        emailInput.readOnly = !emailInput.readOnly;
+                        editButton.classList.toggle('icon-edit');
+                        editButton.classList.toggle('icon-check');
+                    };
+                }
+            };
+
+            loadAccounts();
+
+                    
 
         </script>
     </body>