From 80efccf6c5e0e6874f108b71c2386b3390dcc7da Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 23 Nov 2023 08:54:03 +0100
Subject: [PATCH] Add autofocus to password prompt

---
 client/src/app/modal/confirm.component.html           | 11 +++++++++--
 .../app/shared/shared-forms/input-text.component.ts   | 11 +++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/client/src/app/modal/confirm.component.html b/client/src/app/modal/confirm.component.html
index 09028dc1b..5d3c2dad0 100644
--- a/client/src/app/modal/confirm.component.html
+++ b/client/src/app/modal/confirm.component.html
@@ -14,9 +14,16 @@
     <div *ngIf="inputLabel" class="form-group mt-3">
       <label for="confirmInput">{{ inputLabel }}</label>
 
-      <input *ngIf="!isPasswordInput" type="text" id="confirmInput" name="confirmInput" [(ngModel)]="inputValue" (keyup.enter)="confirm()" />
+      <input
+        *ngIf="!isPasswordInput" type="text"
+        myAutofocusid="confirmInput" name="confirmInput"
+        [(ngModel)]="inputValue" (keyup.enter)="confirm()"
+      />
 
-      <my-input-text *ngIf="isPasswordInput" inputId="confirmInput" [(ngModel)]="inputValue" (keyup.enter)="confirm()"></my-input-text>
+      <my-input-text
+        *ngIf="isPasswordInput" [autofocus]="true" autocomplete="on"
+        inputId="confirmInput" [(ngModel)]="inputValue" (keyup.enter)="confirm()"
+      ></my-input-text>
     </div>
 
     <div *ngIf="hasError()" class="text-danger">{{ errorMessage }}</div>
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index 2f3c8f603..dcfceb40e 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, forwardRef, Input, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, forwardRef, Input, ViewChild } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { FormReactiveErrors } from './form-reactive.service'
 
@@ -14,7 +14,7 @@ import { FormReactiveErrors } from './form-reactive.service'
     }
   ]
 })
-export class InputTextComponent implements ControlValueAccessor {
+export class InputTextComponent implements ControlValueAccessor, AfterViewInit {
   @ViewChild('input') inputElement: ElementRef
 
   @Input() inputId = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
@@ -27,6 +27,7 @@ export class InputTextComponent implements ControlValueAccessor {
   @Input() readonly = false
   @Input() show = false
   @Input() formError: string | FormReactiveErrors | FormReactiveErrors[]
+  @Input() autofocus = false
 
   get inputType () {
     return this.show
@@ -40,6 +41,12 @@ export class InputTextComponent implements ControlValueAccessor {
       : $localize`Show`
   }
 
+  ngAfterViewInit () {
+    if (this.autofocus !== true) return
+
+    this.inputElement.nativeElement.focus({ preventScroll: true })
+  }
+
   toggle () {
     this.show = !this.show
   }