fix local dev; refactor password field

scripts/start-infrastructure.sh

@@ -13,11 +13,10 @@ else
   echo "PostgreSQL container does not exist. Creating..."
   docker run -d \
     --name TRAKQR_POSTGRES \
-    -v "${DATA_ROOT}/postgres:/var/lib/postgresql/data" \
+    -v "${DATA_ROOT}/postgres:/var/lib/postgresql" \
     -p 5400:5432 \
     -e POSTGRES_USER=sa \
     -e POSTGRES_PASSWORD=P@ssword123! \
     -e POSTGRES_DB=trakqr \
     postgres:$POSTGRES_VERSION
 fi
-

src/TrackApi/TrackQrApi/Program.cs

@@ -194,7 +194,6 @@ try
 
     app.UseCors();
     app.UseRateLimiter();
-    app.UseHttpsRedirection();
     app.UseAuthentication();
     app.UseAuthorization();
 

src/TrackApi/TrackQrApi/Properties/launchSettings.json

@@ -1,11 +1,11 @@
 {
   "$schema": "https://json.schemastore.org/launchsettings.json",
   "profiles": {
-    "https": {
+    "http": {
       "commandName": "Project",
       "dotnetRunMessages": true,
       "launchBrowser": false,
-      "applicationUrl": "https://0.0.0.0:42001",
+      "applicationUrl": "http://0.0.0.0:42001",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

src/TrackApi/TrackQrApi/appsettings.Development.json

@@ -6,10 +6,10 @@
     }
   },
   "App": {
-    "PublicUrl": "https://192.168.1.17:42001"
+    "PublicUrl": "http://192.168.1.2:42001"
   },
   "ConnectionStrings": {
-    "PostgresConnection": "Host=localhost;Port=5400;Database=trakqr;Username=sa;Password=P@ssword123!"
+    "PostgresConnection": "Host=192.168.1.2;Port=5400;Database=trakqr;Username=sa;Password=P@ssword123!"
   },
   "Jwt": {
     "Secret": "dev-secret-key-min-32-characters-long-for-hmac256!",
@@ -21,12 +21,12 @@
     "Provider": "console",
     "FromEmail": "noreply@trakqr.local",
     "FromName": "TrakQR",
-    "BaseUrl": "http://localhost:5173"
+    "BaseUrl": "http://192.168.1.2:5173"
   },
   "Cors": {
     "AllowedOrigins": [
-      "http://localhost:5173",
+      "http://192.168.1.2:5173",
-      "https://localhost:5173"
+      "https://192.168.1.2:5173"
     ]
   },
   "Stripe": {

src/frontend/.env.development

@@ -0,0 +1 @@
+VITE_API_URL=http://192.168.1.2:42001

src/frontend/package-lock.json

@@ -15,7 +15,8 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
-        "vite": "^5.2.0"
+        "vite": "^5.2.0",
+        "vite-svg-loader": "^5.1.1"
       }
     },
     "node_modules/@babel/helper-string-parser": {
@@ -907,6 +908,21 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/copy-anything": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
@@ -921,11 +937,169 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
     },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/entities": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.0.tgz",
@@ -1018,11 +1192,23 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "dev": true
+    },
     "node_modules/mitt": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
     },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -1040,6 +1226,18 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/perfect-debounce": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -1143,6 +1341,15 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/sax": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.5.0.tgz",
+      "integrity": "sha512-21IYA3Q5cQf089Z6tgaUTr7lDAyzoTPx5HRtbhsME8Udispad8dC/+sziTNugOEx54ilvatQ9YCzl4KQLPcRHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1170,6 +1377,31 @@
         "node": ">=16"
       }
     },
+    "node_modules/svgo": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.3.tgz",
+      "integrity": "sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==",
+      "dev": true,
+      "dependencies": {
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0",
+        "sax": "^1.5.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.21",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
@@ -1229,6 +1461,19 @@
         }
       }
     },
+    "node_modules/vite-svg-loader": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.1.tgz",
+      "integrity": "sha512-RPzcXA/EpKJA0585x58DBgs7my2VfeJ+j2j1EoHY4Zh82Y7hV4cR1fElgy2aZi85+QSrcLLoTStQ5uZjD68u+Q==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.4",
+        "svgo": "^3.3.3"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.13"
+      }
+    },
     "node_modules/vue": {
       "version": "3.5.26",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.26.tgz",

src/frontend/package.json

@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
-    "vite": "^5.2.0"
+    "vite": "^5.2.0",
+    "vite-svg-loader": "^5.1.1"
   }
 }

src/frontend/src/api/base.js

@@ -1,4 +1,4 @@
-const API_BASE = 'https://localhost:42001';
+const API_BASE = import.meta.env.VITE_API_URL;
 
 class BaseClient {
   constructor() {
@@ -29,7 +29,7 @@ class BaseClient {
 
     const response = await fetch(`${API_BASE}${path}`, options);
 
-    if (response.status === 401) {
+    if (response.status === 401 && this.token) {
       this.setToken(null);
       window.location.href = '/login';
       throw new Error('Unauthorized');

src/frontend/src/assets/icons/eye-closed.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>
+  <path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>
+  <line x1="1" y1="1" x2="23" y2="23"/>
+</svg>

src/frontend/src/assets/icons/eye-open.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+  <circle cx="12" cy="12" r="3"/>
+</svg>

src/frontend/src/components/PasswordInput.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="password-field">
+    <input
+      :id="id"
+      :value="modelValue"
+      :type="showPassword ? 'text' : 'password'"
+      :placeholder="placeholder"
+      :autocomplete="autocomplete"
+      :required="required"
+      :minlength="minlength"
+      :name="name"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+    <button
+      type="button"
+      class="password-toggle"
+      :aria-label="showPassword ? 'Hide password' : 'Show password'"
+      :aria-pressed="showPassword"
+      @click="showPassword = !showPassword"
+    >
+      <EyeClosedIcon v-if="showPassword" />
+      <EyeOpenIcon v-else />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import EyeOpenIcon from '../assets/icons/eye-open.svg?component';
+import EyeClosedIcon from '../assets/icons/eye-closed.svg?component';
+
+defineProps({
+  modelValue: String,
+  id: String,
+  placeholder: String,
+  autocomplete: String,
+  required: Boolean,
+  minlength: [String, Number],
+  name: String,
+});
+
+defineEmits(['update:modelValue']);
+
+const showPassword = ref(false);
+</script>
+
+<style scoped>
+.password-field {
+  position: relative;
+}
+
+.password-field input {
+  width: 100%;
+  padding: 12px 16px;
+  padding-right: 44px;
+  border: 1px solid var(--line, #d1d5db);
+  border-radius: 12px;
+  font-size: 1rem;
+  font-family: inherit;
+  transition: border-color 0.15s ease;
+  box-sizing: border-box;
+}
+
+.password-field input:focus {
+  outline: none;
+  border-color: var(--accent, #3b82f6);
+}
+
+.password-toggle {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--muted, #6b7280);
+  cursor: pointer;
+}
+
+.password-toggle:hover {
+  color: var(--accent, #3b82f6);
+}
+</style>

src/frontend/src/style.css

@@ -41,6 +41,12 @@ a {
   gap: 48px;
 }
 
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+
 .topbar {
   display: flex;
   align-items: center;
@@ -206,16 +212,12 @@ a {
 .qr-grid {
   width: 180px;
   height: 180px;
-  background: repeating-linear-gradient(
+  background: repeating-linear-gradient(90deg,
-      90deg,
       rgba(15, 23, 42, 0.9) 0 8px,
-      transparent 8px 16px
+      transparent 8px 16px),
-    ),
+    repeating-linear-gradient(0deg,
-    repeating-linear-gradient(
-      0deg,
       rgba(15, 23, 42, 0.9) 0 8px,
-      transparent 8px 16px
+      transparent 8px 16px);
-    );
   border-radius: 16px;
   box-shadow: inset 0 0 0 10px #fff;
 }
@@ -235,7 +237,7 @@ a {
 .feature {
   background: rgba(255, 255, 255, 0.85);
   border-radius: 20px;
-  padding: 18px 20px;
+  padding: 24px 28px;
   border: 1px solid var(--line);
   box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
   transition: transform 0.2s ease;
@@ -303,6 +305,7 @@ a {
     opacity: 0;
     transform: translateY(12px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -313,6 +316,7 @@ a {
   from {
     transform: scaleY(0.6);
   }
+
   to {
     transform: scaleY(1);
   }

src/frontend/src/views/auth/Login.vue

@@ -25,23 +25,13 @@
 
         <div class="form-group">
           <label for="password">Password</label>
-          <input
+          <PasswordInput
             id="password"
             v-model="password"
-            :type="showPassword ? 'text' : 'password'"
             autocomplete="current-password"
             placeholder="Your password"
             required
           />
-          <button
-              type="button"
-              class="password-toggle"
-              :aria-label="showPassword ? 'Hide password' : 'Show password'"
-              :aria-pressed="showPassword"
-              @click="showPassword = !showPassword"
-          >
-            {{ showPassword ? 'Hide' : 'Show' }}
-          </button>
         </div>
 
         <div v-if="authStore.error" class="error-message">
@@ -69,6 +59,7 @@
 import { ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useAuthStore } from '../../stores/auth';
+import PasswordInput from '../../components/PasswordInput.vue';
 
 const router = useRouter();
 const route = useRoute();
@@ -77,8 +68,6 @@ const authStore = useAuthStore();
 const email = ref('');
 const password = ref('');
 
-const showPassword = ref(false);
-
 const handleSubmit = async () => {
   const success = await authStore.login(email.value, password.value);
   if (success) {
@@ -218,33 +207,5 @@ const handleSubmit = async () => {
   color: var(--accent);
   font-weight: 500;
 }
-.password-field {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.password-field input {
-  width: 100%;
-  padding-right: 72px; /* space for the button */
-}
-
-.password-toggle {
-  position: absolute;
-  right: 10px;
-  height: 32px;
-  padding: 0 10px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--surface);
-  color: var(--muted);
-  font-size: 0.85rem;
-  cursor: pointer;
-}
-
-.password-toggle:hover {
-  color: var(--accent);
-  border-color: var(--accent);
-}
 
 </style>

src/frontend/src/views/auth/Register.vue

@@ -24,10 +24,9 @@
 
         <div class="form-group">
           <label for="password">Password</label>
-          <input
+          <PasswordInput
             id="password"
             v-model="password"
-            type="password"
             placeholder="At least 8 characters"
             minlength="8"
             required
@@ -36,10 +35,9 @@
 
         <div class="form-group">
           <label for="confirmPassword">Confirm Password</label>
-          <input
+          <PasswordInput
             id="confirmPassword"
             v-model="confirmPassword"
-            type="password"
             placeholder="Repeat your password"
             required
           />
@@ -66,6 +64,7 @@
 import { ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useAuthStore } from '../../stores/auth';
+import PasswordInput from '../../components/PasswordInput.vue';
 
 const router = useRouter();
 const authStore = useAuthStore();

src/frontend/src/views/auth/ResetPassword.vue

@@ -13,10 +13,9 @@
       <form v-if="!success" @submit.prevent="handleSubmit" class="auth-form">
         <div class="form-group">
           <label for="password">New Password</label>
-          <input
+          <PasswordInput
             id="password"
             v-model="password"
-            type="password"
             placeholder="At least 8 characters"
             minlength="8"
             required
@@ -25,10 +24,9 @@
 
         <div class="form-group">
           <label for="confirmPassword">Confirm Password</label>
-          <input
+          <PasswordInput
             id="confirmPassword"
             v-model="confirmPassword"
-            type="password"
             placeholder="Repeat your password"
             required
           />
@@ -62,6 +60,7 @@
 import { ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { authApi } from '../../api/auth.js';
+import PasswordInput from '../../components/PasswordInput.vue';
 
 const route = useRoute();
 

src/frontend/src/views/links/Links.vue

@@ -213,10 +213,9 @@
 
               <div class="form-group">
                 <label for="password">Password (optional)</label>
-                <input
+                <PasswordInput
                   id="password"
                   v-model="formData.password"
-                  type="password"
                   placeholder="Password protect"
                 />
               </div>
@@ -311,6 +310,7 @@
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue';
 import AppLayout from '../../components/layout/AppLayout.vue';
+import PasswordInput from '../../components/PasswordInput.vue';
 import { useWorkspaceStore } from '../../stores/workspace.js';
 import { useLinksStore } from '../../stores/links.js';
 import { linksApi } from '../../api/links.js';

src/frontend/src/views/settings/Settings.vue

@@ -49,19 +49,17 @@
             <form @submit.prevent="changePassword">
               <div class="form-group">
                 <label for="currentPassword">Current Password</label>
-                <input
+                <PasswordInput
                   id="currentPassword"
                   v-model="passwordForm.currentPassword"
-                  type="password"
                   required
                 />
               </div>
               <div class="form-group">
                 <label for="newPassword">New Password</label>
-                <input
+                <PasswordInput
                   id="newPassword"
                   v-model="passwordForm.newPassword"
-                  type="password"
                   required
                   minlength="8"
                 />
@@ -69,10 +67,9 @@
               </div>
               <div class="form-group">
                 <label for="confirmPassword">Confirm New Password</label>
-                <input
+                <PasswordInput
                   id="confirmPassword"
                   v-model="passwordForm.confirmPassword"
-                  type="password"
                   required
                 />
               </div>
@@ -251,10 +248,9 @@
               </p>
               <div class="form-group">
                 <label for="deletePassword">Enter your password to confirm</label>
-                <input
+                <PasswordInput
                   id="deletePassword"
                   v-model="deletePassword"
-                  type="password"
                   required
                   placeholder="Your password"
                 />
@@ -282,6 +278,7 @@ import { apiKeysApi } from '../../api/apiKeys.js';
 import { useAuthStore } from '../../stores/auth.js';
 import { useWorkspaceStore } from '../../stores/workspace.js';
 import AppLayout from '../../components/layout/AppLayout.vue';
+import PasswordInput from '../../components/PasswordInput.vue';
 
 const router = useRouter();
 const authStore = useAuthStore();
@@ -598,7 +595,8 @@ function isExpired(date) {
   margin-bottom: 0.5rem;
 }
 
-.form-group input {
+.form-group input,
+.form-group :deep(.password-field input) {
   width: 100%;
   padding: 0.625rem 0.75rem;
   border: 1px solid #d1d5db;
@@ -606,7 +604,12 @@ function isExpired(date) {
   font-size: 0.875rem;
 }
 
-.form-group input:focus {
+.form-group :deep(.password-field input) {
+  padding-right: 44px;
+}
+
+.form-group input:focus,
+.form-group :deep(.password-field input:focus) {
   outline: none;
   border-color: #3b82f6;
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);

src/frontend/vite.config.js

@@ -1,18 +1,23 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
+import svgLoader from "vite-svg-loader";
 
-export default defineConfig({
+export default defineConfig(({ mode }) => {
-  plugins: [vue()],
+  const env = loadEnv(mode, process.cwd());
+
+  return {
+    plugins: [vue(), svgLoader()],
     server: {
       host: '0.0.0.0',
       port: 5173,
       proxy: {
         '/api': {
-        target: 'https://localhost:42001',
+          target: env.VITE_API_URL,
           changeOrigin: true,
           secure: false,
           rewrite: (path) => path.replace(/^\/api/, '')
         }
       }
     }
+  };
 });