add password-dialog

2 files changed, 23 insertions, 0 deletions

diff --git a/static/pages/settings/index.css b/static/pages/settings/index.css
index 0d6b234..dcd952f 100644
--- a/static/pages/settings/index.css
+++ b/static/pages/settings/index.css
@@ -78,6 +78,18 @@
 	font-family: 'Pacifico';
 }
 
+#change-password {
+	background: var(--primary);
+  padding: 10px;
+  border-radius: var(--border-radius);
+  color: var(--fg-primary);
+  box-shadow: var(--shadow);
+  font-weight: bold;
+  text-align: center;
+	cursor: pointer;
+	user-select: none;
+}
+
 #logout {
 	padding: 10px;
 	width: 100%;
@@ -88,4 +100,5 @@
 	font-weight: bold;
 	border-radius: var(--border-radius);
 	cursor: pointer;
+	user-select: none;
 }
diff --git a/static/pages/settings/index.js b/static/pages/settings/index.js
index 36c1d09..4924f8b 100644
--- a/static/pages/settings/index.js
+++ b/static/pages/settings/index.js
@@ -4,6 +4,7 @@ const { Div, Img } = sfw.element.native;
 import * as api from '../../api/index.js';
 
 import Editable from '../../widgets/editable/index.js';
+import PasswordDialog from '../../widgets/password-dialog/index.js';
 
 import icons from '../../icons/index.js';
 
@@ -15,6 +16,7 @@ export default class SettingsView extends sfw.element.Container {
 	#birthday
 
 	#profile
+	#change_password
 
 	constructor() {
 		super({ css });
@@ -64,6 +66,14 @@ export default class SettingsView extends sfw.element.Container {
 						onupdate: () => this.#update(),
 					}),
 					Div.new({
+						id: 'change-password',
+						innerText: 'Change Password',
+						onclick: (e) => {
+							e.stopPropagation();
+							this.body.append(PasswordDialog.new());
+						}
+					}),
+					Div.new({
 						id: 'logout',
 						innerText: 'Logout',
 						onclick: () => this.onlogout(),