created auth system

src/app/components/region-selector/region-selector.component.html

@@ -0,0 +1,54 @@
+<div class="region-selector">
+  <button class="region-trigger" (click)="toggleDropdown()" [class.active]="dropdownOpen()">
+    <svg class="pin-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+      <circle cx="12" cy="10" r="3"></circle>
+    </svg>
+    <span class="region-name">
+      @if (detecting()) {
+        <span class="detecting">...</span>
+      } @else if (region()) {
+        {{ region()!.city }}
+      } @else {
+        {{ 'location.allRegions' | translate }}
+      }
+    </span>
+    <svg class="chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+         [class.rotated]="dropdownOpen()">
+      <path d="M6 9l6 6 6-6"></path>
+    </svg>
+  </button>
+
+  @if (dropdownOpen()) {
+    <div class="region-dropdown">
+      <div class="dropdown-header">
+        <span>{{ 'location.chooseRegion' | translate }}</span>
+        @if (!detecting()) {
+          <button class="detect-btn" (click)="detectLocation()" title="{{ 'location.detectAuto' | translate }}">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="3"></circle>
+              <path d="M12 2v4M12 18v4M2 12h4M18 12h4"></path>
+            </svg>
+          </button>
+        }
+      </div>
+
+      <div class="region-list">
+        <button class="region-option" [class.selected]="!region()" (click)="selectGlobal()">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+          </svg>
+          <span>{{ 'location.allRegions' | translate }}</span>
+        </button>
+
+        @for (r of regions(); track r.id) {
+          <button class="region-option" [class.selected]="region()?.id === r.id" (click)="selectRegion(r)">
+            <span class="region-city">{{ r.city }}</span>
+            <span class="region-country">{{ r.country }}</span>
+          </button>
+        }
+      </div>
+    </div>
+  }
+</div>