frontend/src/app/features/calculator/components/user-details/user-details.component.html

@@ -11,6 +11,7 @@
                 formControlName="name"
                 label="USER_DETAILS.NAME" 
                 placeholder="USER_DETAILS.NAME_PLACEHOLDER"
+                [required]="true"
                 [error]="form.get('name')?.invalid && form.get('name')?.touched ? ('COMMON.REQUIRED' | translate) : null">
               </app-input>
             </div>
@@ -19,6 +20,7 @@
                 formControlName="surname"
                 label="USER_DETAILS.SURNAME" 
                 placeholder="USER_DETAILS.SURNAME_PLACEHOLDER"
+                [required]="true"
                 [error]="form.get('surname')?.invalid && form.get('surname')?.touched ? ('COMMON.REQUIRED' | translate) : null">
               </app-input>
             </div>
@@ -32,6 +34,7 @@
                 label="USER_DETAILS.EMAIL" 
                 type="email"
                 placeholder="USER_DETAILS.EMAIL_PLACEHOLDER"
+                [required]="true"
                 [error]="form.get('email')?.invalid && form.get('email')?.touched ? ('COMMON.INVALID_EMAIL' | translate) : null">
               </app-input>
             </div>
@@ -41,6 +44,7 @@
                 label="USER_DETAILS.PHONE" 
                 type="tel"
                 placeholder="USER_DETAILS.PHONE_PLACEHOLDER"
+                [required]="true"
                 [error]="form.get('phone')?.invalid && form.get('phone')?.touched ? ('COMMON.REQUIRED' | translate) : null">
               </app-input>
             </div>
@@ -51,6 +55,7 @@
             formControlName="address"
             label="USER_DETAILS.ADDRESS" 
             placeholder="USER_DETAILS.ADDRESS_PLACEHOLDER"
+            [required]="true"
             [error]="form.get('address')?.invalid && form.get('address')?.touched ? ('COMMON.REQUIRED' | translate) : null">
           </app-input>
 
@@ -61,6 +66,7 @@
                 formControlName="zip"
                 label="USER_DETAILS.ZIP" 
                 placeholder="USER_DETAILS.ZIP_PLACEHOLDER"
+                [required]="true"
                 [error]="form.get('zip')?.invalid && form.get('zip')?.touched ? ('COMMON.REQUIRED' | translate) : null">
               </app-input>
             </div>
@@ -69,6 +75,7 @@
                 formControlName="city"
                 label="USER_DETAILS.CITY" 
                 placeholder="USER_DETAILS.CITY_PLACEHOLDER"
+                [required]="true"
                 [error]="form.get('city')?.invalid && form.get('city')?.touched ? ('COMMON.REQUIRED' | translate) : null">
               </app-input>
             </div>

frontend/src/app/shared/components/app-input/app-input.component.html

@@ -1,5 +1,10 @@
 <div class="form-group">
-  @if (label()) { <label [for]="id()">{{ label() }}</label> }
+  @if (label()) { 
+    <label [for]="id()">
+      {{ label() }}
+      @if (required()) { <span class="required-mark">*</span> }
+    </label> 
+  }
   <input
     [id]="id()"
     [type]="type()"

frontend/src/app/shared/components/app-input/app-input.component.scss

@@ -1,5 +1,6 @@
 .form-group { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
 label { font-size: 0.875rem; font-weight: 500; margin-bottom: var(--space-2); color: var(--color-text); }
+.required-mark { color: var(--color-danger-500); margin-left: 2px; }
 .form-control {
   padding: 0.5rem 0.75rem;
   border: 1px solid var(--color-border);

frontend/src/app/shared/components/app-input/app-input.component.ts

@@ -22,6 +22,7 @@ export class AppInputComponent implements ControlValueAccessor {
   type = input<string>('text');
   placeholder = input<string>('');
   error = input<string | null>(null);
+  required = input<boolean>(false);
 
   value: string = '';
   disabled = false;