add ui for self reset amidaware/tacticalrmm#1378

src/api/accounts.js

@@ -12,6 +12,25 @@ export async function fetchUsers(params = {}) {
   }
 }
 
+export async function resetPass(pass) {
+  const payload = { password: pass };
+  try {
+    const { data } = await axios.put(`${baseUrl}/resetpw/`, payload);
+    return data;
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+export async function resetTwoFactor() {
+  try {
+    const { data } = await axios.put(`${baseUrl}/reset2fa/`);
+    return data;
+  } catch (e) {
+    console.error(e);
+  }
+}
+
 // role api function
 export async function fetchRoles(params = {}) {
   try {

src/components/accounts/ResetPass.vue

@@ -0,0 +1,75 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin" style="width: 60vw">
+      <q-card-section class="row">
+        <div class="col-3">New password:</div>
+        <div class="col-9">
+          <q-input
+            outlined
+            dense
+            v-model="pass"
+            :type="isPwd ? 'password' : 'text'"
+            :rules="[(val) => !!val || '*Required']"
+          >
+            <template v-slot:append>
+              <q-icon
+                :name="isPwd ? 'visibility_off' : 'visibility'"
+                class="cursor-pointer"
+                @click="isPwd = !isPwd"
+              />
+            </template>
+          </q-input>
+        </div>
+        <div class="col-3">Confirm password:</div>
+        <div class="col-9">
+          <q-input
+            outlined
+            dense
+            v-model="pass2"
+            :type="isPwd ? 'password' : 'text'"
+            :rules="[(val) => val === pass || 'Passwords do not match']"
+          >
+            <template v-slot:append>
+              <q-icon
+                :name="isPwd ? 'visibility_off' : 'visibility'"
+                class="cursor-pointer"
+                @click="isPwd = !isPwd"
+              />
+            </template>
+          </q-input>
+        </div>
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn
+          color="primary"
+          label="Reset"
+          @click="onOKClick"
+          :disable="!pass || pass !== pass2"
+        />
+        <q-btn color="negative" label="Cancel" @click="onDialogCancel" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useDialogPluginComponent } from "quasar";
+import { resetPass } from "@/api/accounts";
+import { notifySuccess } from "@/utils/notify";
+
+const pass = ref("");
+const pass2 = ref("");
+const isPwd = ref(true);
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
+  useDialogPluginComponent();
+
+async function onOKClick() {
+  const ret = await resetPass(pass.value);
+  notifySuccess(ret);
+  onDialogOK();
+}
+</script>

src/layouts/MainLayout.vue

@@ -140,6 +140,32 @@
                 <q-item-label>Preferences</q-item-label>
               </q-item-section>
             </q-item>
+            <q-item clickable>
+              <q-item-section>Account</q-item-section>
+              <q-item-section side>
+                <q-icon name="keyboard_arrow_right" />
+              </q-item-section>
+
+              <q-menu anchor="top end" self="top start">
+                <q-list>
+                  <q-item
+                    clickable
+                    v-ripple
+                    @click="resetPassword"
+                    v-close-popup
+                  >
+                    <q-item-section>
+                      <q-item-label>Reset Password</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item clickable v-ripple @click="reset2FA" v-close-popup>
+                    <q-item-section>
+                      <q-item-label>Reset 2FA</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-menu>
+            </q-item>
             <q-item to="/expired" exact>
               <q-item-section>
                 <q-item-label>Logout</q-item-label>
@@ -161,10 +187,13 @@ import { useQuasar } from "quasar";
 import { useStore } from "vuex";
 import axios from "axios";
 import { getWSUrl } from "@/websocket/channels";
+import { resetTwoFactor } from "@/api/accounts";
+import { notifySuccess } from "@/utils/notify";
 
 // ui imports
 import AlertsIcon from "@/components/AlertsIcon.vue";
 import UserPreferences from "@/components/modals/coresettings/UserPreferences.vue";
+import ResetPass from "@/components/accounts/ResetPass.vue";
 
 export default {
   name: "MainLayout",
@@ -202,6 +231,26 @@ export default {
       }).onOk(() => store.dispatch("getDashInfo"));
     }
 
+    function resetPassword() {
+      $q.dialog({
+        component: ResetPass,
+      });
+    }
+
+    function reset2FA() {
+      $q.dialog({
+        title: "Reset 2FA",
+        message: "Are you sure you would like to reset your 2FA token?",
+        cancel: true,
+        persistent: true,
+      }).onOk(async () => {
+        try {
+          const ret = await resetTwoFactor();
+          notifySuccess(ret, 3000);
+        } catch {}
+      });
+    }
+
     const serverCount = ref(0);
     const serverOfflineCount = ref(0);
     const workstationCount = ref(0);
@@ -286,6 +335,8 @@ export default {
 
       // methods
       showUserPreferences,
+      resetPassword,
+      reset2FA,
       updateAvailable,
     };
   },