Local history dialog for web app

src/Heimdallr.Host/ClientApp/src/components/HistoryModal.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-dialog v-model="dialog" max-width="600" @input="$emit('close')">
+    <v-card>
+      <v-card-title>
+        Password Generation History
+        <v-btn icon @click="clearHistory">
+          <v-icon>mdi-delete</v-icon>
+        </v-btn>
+        <v-spacer></v-spacer>
+        <v-btn icon @click="$emit('close')">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+      <v-card-text>
+        <v-list v-if="history.length > 0">
+          <v-list-item
+            v-for="(item, index) in history"
+            :key="index"
+            @click="applyHistory(item)"
+          >
+            <v-list-item-content>
+              <v-list-item-title>{{ item.serviceName }}</v-list-item-title>
+              <v-list-item-subtitle>
+                {{ item.commonName }} - v{{ item.version }}
+              </v-list-item-subtitle>
+            </v-list-item-content>
+            <v-list-item-action>
+              <v-btn icon @click.stop="deleteHistoryItem(index)">
+                <v-icon>mdi-close</v-icon>
+              </v-btn>
+            </v-list-item-action>
+          </v-list-item>
+        </v-list>
+        <v-alert
+          v-else
+          type="info"
+          border="left"
+          colored-border
+          elevation="2"
+        >
+          History is empty
+        </v-alert>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    dialog: {
+      type: Boolean,
+      required: true
+    },
+    history: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    applyHistory(item) {
+      this.$emit('apply-history', item);
+    },
+    deleteHistoryItem(index) {
+      this.$emit('delete-history-item', index);
+    },
+    clearHistory() {
+      this.$emit('clear-history');
+    }
+  }
+};
+</script>

src/Heimdallr.Host/ClientApp/src/components/PasswordGenerate.vue

@@ -1,7 +1,13 @@
 <template>
   <div align="center">
     <v-card elevation="2">
-      <v-card-title>Generate password</v-card-title>
+      <v-card-title>
+        Generate password
+        <v-spacer></v-spacer>
+        <v-btn icon @click="openHistory" class="ml-2">
+          <v-icon>mdi-history</v-icon>
+        </v-btn>
+      </v-card-title>
       <v-card-text>
         <v-form ref="form" v-model="formValidation.state" lazy-validation>
           <v-row>
@@ -76,6 +82,14 @@
               ></number-input>
             </v-col>
           </v-row>
+          <v-row>
+            <v-col class="col-lg-12 disable-top-bottom-padding">
+              <v-checkbox
+                v-model="saveToHistory"
+                label="Save to history"
+              ></v-checkbox>
+            </v-col>
+          </v-row>
         </v-form>
         <div class="mt-2" align="right" v-if="!firstGenerated">
           <v-btn class="ma-2" outlined color="indigo" @click="Generate">Generate</v-btn>
@@ -105,14 +119,27 @@
       type="error"
       elevation="4"
     >{{error.text}}</v-alert>
+
+    <history-modal
+      :dialog="historyDialog"
+      :history="history"
+      @apply-history="applyHistory"
+      @delete-history-item="deleteHistoryItem"
+      @clear-history="clearHistory"
+      @close="historyDialog = false"
+    />
   </div>
 </template>
 
 <script>
 // eslint-disable-next-line
 import VueNumberInput from "@chenfengyuan/vue-number-input";
+import HistoryModal from "./HistoryModal.vue";
 export default {
   name: "PasswordGenerate",
+  components: {
+    HistoryModal
+  },
   data: () => {
     return {
       securityRequest: {
@@ -125,6 +152,9 @@ export default {
         length: 16,
         version: 1
       },
+      saveToHistory: localStorage.getItem('saveToHistoryEnabled') === 'true' || false,
+      historyDialog: false,
+      history: [],
       masterPasswordShow: false,
       firstGenerated: false,
       generatedPassword: "",
@@ -145,6 +175,11 @@ export default {
       }
     };
   },
+  watch: {
+    saveToHistory: function(newVal) {
+      localStorage.setItem('saveToHistoryEnabled', newVal);
+    }
+  },
   methods: {
     Generate: function() {
       if(!this.$refs.form.validate())
@@ -167,6 +202,32 @@ export default {
 
         self.generatedPassword = result.generatedPassword;
         self.firstGenerated = true;
+
+        if (self.saveToHistory) {
+          const history = JSON.parse(localStorage.getItem('generateHistory') || '[]');
+          const existingIndex = history.findIndex(item => 
+            item.serviceName === self.securityRequest.serviceName &&
+            item.commonName === self.securityRequest.commonName
+          );
+
+          const historyItem = {
+            serviceName: self.securityRequest.serviceName,
+            commonName: self.securityRequest.commonName,
+            version: self.securityRequest.version,
+            hasLetters: self.securityRequest.hasLetters,
+            hasNumeric: self.securityRequest.hasNumeric,
+            hasSpecialSymbols: self.securityRequest.hasSpecialSymbols,
+            length: self.securityRequest.length
+          };
+
+          if (existingIndex !== -1) {
+            history[existingIndex] = historyItem;
+          } else {
+            history.push(historyItem);
+          }
+
+          localStorage.setItem('generateHistory', JSON.stringify(history));
+        }
       };
       request.send(JSON.stringify(this.securityRequest));
     },
@@ -209,6 +270,28 @@ export default {
           self.error.state = false;
           self.error.text = "";
         }, 15000));
+    },
+    openHistory: function() {
+      this.history = JSON.parse(localStorage.getItem('generateHistory') || '[]');
+      this.historyDialog = true;
+    },
+    applyHistory: function(item) {
+      this.securityRequest.serviceName = item.serviceName;
+      this.securityRequest.commonName = item.commonName;
+      this.securityRequest.version = item.version;
+      this.securityRequest.hasLetters = item.hasLetters;
+      this.securityRequest.hasNumeric = item.hasNumeric;
+      this.securityRequest.hasSpecialSymbols = item.hasSpecialSymbols;
+      this.securityRequest.length = item.length;
+      this.historyDialog = false;
+    },
+    deleteHistoryItem: function(index) {
+      this.history.splice(index, 1);
+      localStorage.setItem('generateHistory', JSON.stringify(this.history));
+    },
+    clearHistory: function() {
+      this.history = [];
+      localStorage.removeItem('generateHistory');
     }
   }
 };
@@ -218,4 +301,4 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
 }
-</style>
+</style>