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;