settings page, clipboard component

templates/components/clipboard/_copy.scss

@@ -0,0 +1,38 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+@mixin copy-icon-base {
+  margin: auto;
+  padding: 5px;
+}
+
+@mixin copy-icon {
+  @include copy-icon-base;
+}
+
+@mixin copy-icon-hover {
+  cursor: pointer;
+  filter: invert(17%) sepia(93%) saturate(5039%) hue-rotate(204deg)
+    brightness(100%) contrast(98%);
+}
+
+@mixin copy-done-icon {
+  @include copy-icon-base;
+  display: none;
+  filter: invert(58%) sepia(60%) saturate(331%) hue-rotate(76deg)
+    brightness(91%) contrast(92%);
+}

templates/components/clipboard/index.html

@@ -0,0 +1,10 @@
+<img class="<.= COPY_CLASS .>"
+  src="<.= crate::FILES.get("./static/cache/img/svg/clipboard.svg").unwrap() .>"
+  alt="<.= COPY_ALT .>"
+  data-<.= clipboard_data.0 .>="<.= clipboard_data.1 .>" 
+/> 
+<img
+  class="<.= DONE_CLASS .>"
+  src="<.= crate::FILES.get("./static/cache/img/svg/check.svg").unwrap() .>"
+  alt="<.= DONE_ALT .>"
+/>

templates/components/clipboard/index.ts

@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+class CopyIcon {
+  copyIconClass: string;
+  copyDoneIconClass: string;
+  writeText: string;
+
+  constructor(
+    writeText: string,
+    copyIconClass: string,
+    copyDoneIconClass: string,
+  ) {
+    this.copyIconClass = copyIconClass;
+    this.copyDoneIconClass = copyDoneIconClass;
+    this.writeText = writeText;
+
+    this.__registerHandlers();
+  }
+
+  __registerHandlers() {
+    const icons = document.querySelectorAll(`.${this.copyIconClass}`);
+    icons.forEach(icon => {
+      icon.addEventListener('click', e => this.copySitekey(e));
+    });
+  }
+
+  /*
+   * Copy secret to clipboard
+   */
+  async copySitekey(e: Event) {
+    const image = <HTMLElement>e.target;
+    if (!image.classList.contains(this.copyIconClass)) {
+      throw new Error(
+        'This method should only be called when sitekey copy button/icon is clicked',
+      );
+    }
+    const copyDoneIcon = <HTMLElement>(
+      image.parentElement.querySelector(`.${this.copyDoneIconClass}`)
+    );
+    await navigator.clipboard.writeText(this.writeText);
+    image.style.display = 'none';
+    copyDoneIcon.style.display = 'block';
+    setTimeout(() => {
+      copyDoneIcon.style.display = 'none';
+      image.style.display = 'block';
+    }, 1200);
+  }
+}
+
+export default CopyIcon;

templates/components/footers.html

@@ -10,7 +10,7 @@
 
   <link
     rel="stylesheet"
-    media="screen and (max-width: 961px)"
+    media="screen and (max-width: 1200px)"
     type="text/css"
     href="<.= &*crate::MOBILE_CSS .>" 
   />

templates/components/showPassword/index.ts

@@ -50,8 +50,7 @@ const hidePasswordButtons = () => {
 
 // e is click event from show password container
 export const showPassword = () => {
-  const form = document.querySelector('form');
-  const inputs = form.querySelectorAll('input');
+  const inputs = document.body.querySelectorAll('input');
 
   if (display == 'hidden') {
     display = 'show';
@@ -93,13 +92,3 @@ export const registerShowPassword = () => {
 };
 
 export default registerShowPassword;
-
-/*
- * so here's what im going to do:
- * the wrapper will be a check box and the check box will manipulate
- * show password and hide password buttons using CSS.
- *
- * There will also be an event hadler attached that will change field types of
- * parent fields only. Well, sibling maybe. Will have to see document structure
- *
- */