feat(links): made them use env for base url api

fix local dev; refactor password field
2026-03-11 13:23:19 -04:00 · 2026-03-11 04:08:32 -04:00
18 changed files with 412 additions and 100 deletions
--- a/scripts/start-infrastructure.sh
+++ b/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
-
--- a/src/TrackApi/TrackQrApi/Program.cs
+++ b/src/TrackApi/TrackQrApi/Program.cs
@@ -194,7 +194,6 @@ try

    app.UseCors();
    app.UseRateLimiter();
-    app.UseHttpsRedirection();
    app.UseAuthentication();
    app.UseAuthorization();

--- a/src/TrackApi/TrackQrApi/Properties/launchSettings.json
+++ b/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"
      }
--- a/src/TrackApi/TrackQrApi/appsettings.Development.json
+++ b/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",
-      "https://localhost:5173"
+      "http://192.168.1.2:5173",
+      "https://192.168.1.2:5173"
    ]
  },
  "Stripe": {
--- a/src/frontend/.env.development
+++ b/src/frontend/.env.development
@@ -0,0 +1 @@
+VITE_API_URL=http://192.168.1.2:42001
--- a/src/frontend/package-lock.json
+++ b/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",
--- a/src/frontend/package.json
+++ b/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"
  }
 }
--- a/src/frontend/src/api/base.js
+++ b/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');
--- a/src/frontend/src/assets/icons/eye-closed.svg
+++ b/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>
--- a/src/frontend/src/assets/icons/eye-open.svg
+++ b/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>
--- a/src/frontend/src/components/PasswordInput.vue
+++ b/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>
--- a/src/frontend/src/style.css
+++ b/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(
-      90deg,
+  background: repeating-linear-gradient(90deg,
      rgba(15, 23, 42, 0.9) 0 8px,
-      transparent 8px 16px
-    ),
-    repeating-linear-gradient(
-      0deg,
+      transparent 8px 16px),
+    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);
  }
--- a/src/frontend/src/views/auth/Login.vue
+++ b/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>
--- a/src/frontend/src/views/auth/Register.vue
+++ b/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();
--- a/src/frontend/src/views/auth/ResetPassword.vue
+++ b/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();

--- a/src/frontend/src/views/links/Links.vue
+++ b/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';
@@ -463,7 +463,8 @@ const deleteLink = async () => {
 };

 const getShortUrl = (link) => {
-  return `localhost:42001/${link.slug}`;
+  const origin = new URL(import.meta.env.VITE_API_URL).origin;
+  return `${origin}/${link.slug}`;
 };

 const truncateUrl = (url) => {
@@ -475,7 +476,7 @@ const truncateUrl = (url) => {

 const copyToClipboard = async (text) => {
  try {
-    await navigator.clipboard.writeText(`http://${text}`);
+    await navigator.clipboard.writeText(text);
  } catch (err) {
    console.error('Failed to copy:', err);
  }
--- a/src/frontend/src/views/settings/Settings.vue
+++ b/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);
--- a/src/frontend/vite.config.js
+++ b/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({
-  plugins: [vue()],
-  server: {
-    host: '0.0.0.0',
-    port: 5173,
-    proxy: {
-      '/api': {
-        target: 'https://localhost:42001',
-        changeOrigin: true,
-        secure: false,
-        rewrite: (path) => path.replace(/^\/api/, '')
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd());
+
+  return {
+    plugins: [vue(), svgLoader()],
+    server: {
+      host: '0.0.0.0',
+      port: 5173,
+      proxy: {
+        '/api': {
+          target: env.VITE_API_URL,
+          changeOrigin: true,
+          secure: false,
+          rewrite: (path) => path.replace(/^\/api/, '')
+        }
      }
    }
-  }
+  };
 });
Author	SHA1	Message	Date
Jonathan Bourdon	eb8ba2aa5b	feat(links): made them use env for base url api	2026-03-11 13:23:19 -04:00
Jonathan Bourdon	14b7dadfa0	fix local dev; refactor password field	2026-03-11 04:08:32 -04:00