change password moved to profile

softvisio-node · Jul 30, 2021 · 6eab70b · 6eab70b
1 parent 29ce357
commit 6eab70b
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 8 deletions.
diff --git a/lib/components/menu/sheet.vue b/lib/components/menu/sheet.vue
@@ -13,7 +13,7 @@
             <slot name="bottom-up"/>
             <ext-button iconCls="fas fa-key" text="API Access Tokens" textAlign="left" :hidden="apiTokens !== 'true'" @tap="showApiTokens"/>
             <ext-button iconCls="fas fa-user" text="Your Profile" textAlign="left" @tap="showProfile"/>
-            <ext-button iconCls="fas fa-asterisk" text="Change Password" textAlign="left" @tap="changePassword"/>
+            <!-- <ext-button iconCls="fas fa-asterisk" text="Change Password" textAlign="left" @tap="changePassword"/> -->
             <slot name="bottom-down"/>
             <ext-button iconCls="fas fa-sign-out-alt" text="Sign Out" textAlign="left" @tap="signout"/>
 
@@ -26,7 +26,8 @@
 
 <script>
 import Avatar from "./avatar";
-import ChangePasswordDialog from "../change-password-dialog";
+
+// import ChangePasswordDialog from "../change-password-dialog";
 import ApiTokensDialog from "../api-tokens/dialog";
 
 export default {
@@ -92,13 +93,13 @@ export default {
             cmp.ext.show();
         },
 
-        async changePassword () {
-            this.hide();
+        // async changePassword () {
+        //     this.hide();
 
-            const cmp = await this.$mount( ChangePasswordDialog );
+        //     const cmp = await this.$mount( ChangePasswordDialog );
 
-            cmp.ext.show();
-        },
+        //     cmp.ext.show();
+        // },
 
         signout () {
             this.hide();

diff --git a/lib/components/profile/panel.vue b/lib/components/profile/panel.vue
@@ -2,7 +2,21 @@
     <ext-tabpanel tabBarPosition="left" tabRotation="none" tabBar='{"layout":{"type":"vbox","pack":"start","align":"start"},"defaults":{"padding":"0 10 0 10","width":250,"height":50,"flex":null,"textAlign":"right"}}' layout='{"animation":{"type":"slide","direction":"vertical"}}' padding="0 10 0 10">
         <slot name="top"/>
 
-        <!-- Theme -->
+        <!-- security -->
+        <ext-panel title="Security" layout="vbox" viewModel="true" padding="0 10 0 10">
+            <ext-toolbar docked="top" :hidden="titles !== 'true'">
+                <ext-container html="Security"/>
+            </ext-toolbar>
+            <ext-fieldpanel ref="changePasswordForm" defaults='{"labelAlign":"left","labelWidth":150}'>
+                <ext-passwordfield name="password" label="Mew Password" required="true"/>
+                <ext-passwordfield ref="passwordConfirm" label="Confirm New Password" required="true"/>
+                <ext-toolbar docked="bottom" layout='{"type":"hbox","pack":"end"}'>
+                    <ext-button text="Change Password" ui="action" @tap="changePassword"/>
+                </ext-toolbar>
+            </ext-fieldpanel>
+        </ext-panel>
+
+        <!-- theme -->
         <ext-panel title="Interface Theme" layout="vbox" viewModel="true">
             <ext-toolbar docked="top" :hidden="titles !== 'true'">
                 <ext-container html="Interface Theme"/>
@@ -97,6 +111,36 @@ export default {
 
             this.$store.theme.setTheme( { "accent": record.get( "name" ) } );
         },
+
+        async changePassword () {
+            var form = this.$refs.changePasswordForm.ext,
+                passwordCondirm = this.$refs.passwordConfirm.ext;
+
+            if ( !form.validate() ) return;
+
+            var vals = form.getValues();
+
+            if ( vals.password !== passwordCondirm.getValue() ) {
+                passwordCondirm.setError( "Passwords are not match" );
+
+                return;
+            }
+
+            Ext.Viewport.mask();
+
+            const res = await this.$store.session.setPassword( vals.password );
+
+            Ext.Viewport.unmask();
+
+            if ( res.ok ) {
+                form.reset( true );
+
+                this.$utils.toast( "Password changed." );
+            }
+            else {
+                this.$utils.toast( res );
+            }
+        },
     },
 };
 </script>