From 67201fc678e51c3518097c92ab1a938100c70658 Mon Sep 17 00:00:00 2001
From: Hamidreza Ghavami <hamid.r.gh.1998@gmail.com>
Date: Mon, 8 May 2023 18:15:08 +0430
Subject: create theme-switch component

---
 web/html/xui/component/themeSwitch.html | 58 +++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 web/html/xui/component/themeSwitch.html

(limited to 'web/html/xui/component')

diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html
new file mode 100644
index 00000000..1966d079
--- /dev/null
+++ b/web/html/xui/component/themeSwitch.html
@@ -0,0 +1,58 @@
+{{define "component/themeSwitchTemplate"}}
+<template>
+  <a-switch :default-checked="themeSwitcher.isDarkTheme"
+            checked-children="☀"
+            un-checked-children="🌙"
+            @change="themeSwitcher.toggleTheme()">
+  </a-switch>
+</template>
+{{end}}
+
+{{define "component/themeSwitcher"}}
+<script>
+  const colors = {
+    dark: {
+      bg: "#242c3a",
+      text: "hsla(0,0%,100%,.65)"
+    },
+    light: {
+      bg: '#fff',
+      text: "rgba(0, 0, 0, 0.7)",
+    }
+  }
+
+  function createThemeSwitcher() {
+    const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
+    const theme = isDarkTheme ? 'dark' : 'light';
+    return {
+      isDarkTheme,
+      bgStyle: `background: ${colors[theme].bg};`,
+      textStyle: `color: ${colors[theme].text};`,
+      darkClass: isDarkTheme ? 'ant-card-dark' : '',
+      darkCardClass: isDarkTheme ? 'ant-card-dark' : '',
+      darkDrawerClass: isDarkTheme ? 'ant-drawer-dark' : '',
+      get currentTheme() {
+        return this.isDarkTheme ? 'dark' : 'light';
+      },
+      toggleTheme() {
+        this.isDarkTheme = !this.isDarkTheme;
+        this.theme = this.isDarkTheme ? 'dark' : 'light';
+        localStorage.setItem('dark-mode', this.isDarkTheme);
+        this.bgStyle = `background: ${colors[this.theme].bg};`;
+        this.textStyle = `color: ${colors[this.theme].text};`;
+        this.darkClass = this.isDarkTheme ? 'ant-card-dark' : '';
+        this.darkCardClass = this.isDarkTheme ? 'ant-card-dark' : '';
+        this.darkDrawerClass = this.isDarkTheme ? 'ant-drawer-dark' : '';
+      },
+    };
+  }
+
+  const themeSwitcher = createThemeSwitcher();
+
+  Vue.component('theme-switch', {
+    props: [],
+    template: `{{template "component/themeSwitchTemplate"}}`,
+    data: () => ({ themeSwitcher }),
+  });
+</script>
+{{end}}
\ No newline at end of file
-- 
cgit v1.2.3


From f553922d5363fe63dd485f8cbaa7f56178a640cc Mon Sep 17 00:00:00 2001
From: Hamidreza Ghavami <hamid.r.gh.1998@gmail.com>
Date: Mon, 8 May 2023 19:21:58 +0430
Subject: add password component

---
 web/html/xui/component/password.html | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 web/html/xui/component/password.html

(limited to 'web/html/xui/component')

diff --git a/web/html/xui/component/password.html b/web/html/xui/component/password.html
new file mode 100644
index 00000000..ebea3be6
--- /dev/null
+++ b/web/html/xui/component/password.html
@@ -0,0 +1,35 @@
+{{define "component/passwordInput"}}
+<template>
+    <a-input :value="value" :type="showPassword ? 'text' : 'password'"
+            :placeholder="placeholder"
+            @input="$emit('input', $event.target.value)">
+        <template v-if="icon" #prefix>
+            <a-icon :type="icon" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
+        </template>
+        <template #addonAfter>
+            <a-icon :type="showPassword ? 'eye-invisible' : 'eye'"
+                    @click="toggleShowPassword"
+                    :style="'font-size: 16px;' + themeSwitcher.textStyle" />
+        </template>
+    </a-input>
+</template>
+{{end}}
+
+{{define "component/password"}}
+<script>
+  Vue.component('password-input', {
+    props: ["title", "value", "placeholder", "icon"],
+    template: `{{template "component/passwordInput"}}`,
+    data() {
+      return {
+        showPassword: false,
+      };
+    },
+    methods: {
+      toggleShowPassword() {
+        this.showPassword = !this.showPassword;
+      },
+    },
+  });
+</script>
+{{end}}
\ No newline at end of file
-- 
cgit v1.2.3


From bb6e6861ca683894139c5307bd2d41f2e264fe00 Mon Sep 17 00:00:00 2001
From: Hamidreza Ghavami <hamid.r.gh.1998@gmail.com>
Date: Mon, 8 May 2023 20:19:11 +0430
Subject: fix style bg :D

---
 web/html/xui/component/themeSwitch.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'web/html/xui/component')

diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html
index 1966d079..35013a9e 100644
--- a/web/html/xui/component/themeSwitch.html
+++ b/web/html/xui/component/themeSwitch.html
@@ -16,7 +16,7 @@
       text: "hsla(0,0%,100%,.65)"
     },
     light: {
-      bg: '#fff',
+      bg: '#f0f2f5',
       text: "rgba(0, 0, 0, 0.7)",
     }
   }
-- 
cgit v1.2.3