From 31f1041164cffc7c68697a539b27bc5ed064b374 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Sun, 20 Apr 2025 15:28:30 +0200
Subject: [PATCH] ui: add icons to email and password input fields

---
 .../forgot-password.component.html            | 45 ++++++++++---------
 .../auth/login/login.component.html           | 38 +++++++++-------
 .../auth/register/register.component.html     | 41 +++++++++--------
 .../upload-movie/upload-movie.component.scss  |  1 -
 frontend/src/assets/img/mail.svg              |  8 ++++
 frontend/src/assets/img/password.svg          |  8 ++++
 frontend/src/assets/style/form.scss           | 23 +++++++++-
 7 files changed, 106 insertions(+), 58 deletions(-)
 create mode 100644 frontend/src/assets/img/mail.svg
 create mode 100644 frontend/src/assets/img/password.svg

diff --git a/frontend/src/app/components/auth/forgot-password/forgot-password.component.html b/frontend/src/app/components/auth/forgot-password/forgot-password.component.html
index f9bf168..a7a7ace 100644
--- a/frontend/src/app/components/auth/forgot-password/forgot-password.component.html
+++ b/frontend/src/app/components/auth/forgot-password/forgot-password.component.html
@@ -10,24 +10,27 @@
       (ngSubmit)="onSubmit(taskForm, mail)"
       onsubmit="return false"
     >
-      <input
-        type="mail"
-        id="mail"
-        name="mail"
-        #mail="ngModel"
-        placeholder="Email Address"
-        class="custom-input"
-        autocomplete="email"
-        [(ngModel)]="authData.mail"
-        [class.error-border]="
-          (!mail.valid && mail.touched) ||
-          (mail.touched &&
-            !isUserEmailValid(authData.mail.toLowerCase()) &&
-            authData.mail.length > 0)
-        "
-        (click)="this.errorService.clearError()"
-        required
-      />
+      <div class="mail-field">
+        <input
+          type="mail"
+          id="mail"
+          name="mail"
+          #mail="ngModel"
+          placeholder="Email Address"
+          class="custom-input"
+          autocomplete="email"
+          [(ngModel)]="authData.mail"
+          [class.error-border]="
+            (!mail.valid && mail.touched) ||
+            (mail.touched &&
+              !isUserEmailValid(authData.mail.toLowerCase()) &&
+              authData.mail.length > 0)
+          "
+          (click)="this.errorService.clearError()"
+          required
+        />
+        <img class="mail-icon" src="./assets/img/mail.svg" />
+      </div>
       <div class="error-msg">
         @if (!mail.valid && mail.touched) {
         <p>Please enter your email</p>
@@ -82,8 +85,9 @@
           "
           required
         />
+        <img class="password-icon" src="./assets/img/password.svg" />
         <img
-          class="passwordEye"
+          class="password-eye"
           (click)="authService.togglePasswordVisibility()"
           [src]="authService.passwordIcon"
         />
@@ -114,8 +118,9 @@
           "
           required
         />
+        <img class="password-icon" src="./assets/img/password.svg" />
         <img
-          class="passwordEye"
+          class="password-eye"
           (click)="authService.togglePasswordVisibility()"
           [src]="authService.passwordIcon"
         />
diff --git a/frontend/src/app/components/auth/login/login.component.html b/frontend/src/app/components/auth/login/login.component.html
index 0a7523c..5bb44ee 100644
--- a/frontend/src/app/components/auth/login/login.component.html
+++ b/frontend/src/app/components/auth/login/login.component.html
@@ -7,22 +7,25 @@
       onsubmit="return false"
       (input)="this.errorService.clearError()"
     >
-      <input
-        type="mail"
-        id="mail"
-        name="mail"
-        #mail="ngModel"
-        placeholder="Email Address"
-        autocomplete="email"
-        [(ngModel)]="authData.mail"
-        [class.error-border]="
-          (!mail.valid && mail.touched) ||
-          (mail.touched &&
-            !isUserEmailValid(authData.mail.toLowerCase()) &&
-            authData.mail.length > 0)
-        "
-        required
-      />
+      <div class="mail-field">
+        <input
+          type="mail"
+          id="mail"
+          name="mail"
+          #mail="ngModel"
+          placeholder="Email Address"
+          autocomplete="email"
+          [(ngModel)]="authData.mail"
+          [class.error-border]="
+            (!mail.valid && mail.touched) ||
+            (mail.touched &&
+              !isUserEmailValid(authData.mail.toLowerCase()) &&
+              authData.mail.length > 0)
+          "
+          required
+        />
+        <img class="mail-icon" src="./assets/img/mail.svg" />
+      </div>
       <div class="error-msg">
         @if (!mail.valid && mail.touched) {
         <p>Please enter your email</p>
@@ -48,8 +51,9 @@
           "
           required
         />
+        <img class="password-icon" src="./assets/img/password.svg" />
         <img
-          class="passwordEye"
+          class="password-eye"
           (click)="authService.togglePasswordVisibility()"
           [src]="authService.passwordIcon"
         />
diff --git a/frontend/src/app/components/auth/register/register.component.html b/frontend/src/app/components/auth/register/register.component.html
index 6da5173..376d645 100644
--- a/frontend/src/app/components/auth/register/register.component.html
+++ b/frontend/src/app/components/auth/register/register.component.html
@@ -16,22 +16,25 @@
       onsubmit="return false"
       (input)="this.errorService.clearError()"
     >
-      <input
-        type="mail"
-        id="mail"
-        name="mail"
-        #mail="ngModel"
-        placeholder="Email Address"
-        autocomplete="email"
-        [(ngModel)]="authData.mail"
-        [class.error-border]="
-          (!mail.valid && mail.touched) ||
-          (mail.touched &&
-            !isUserEmailValid(authData.mail.toLowerCase()) &&
-            authData.mail.length > 0)
-        "
-        required
-      />
+      <div class="mail-field">
+        <input
+          type="mail"
+          id="mail"
+          name="mail"
+          #mail="ngModel"
+          placeholder="Email Address"
+          autocomplete="email"
+          [(ngModel)]="authData.mail"
+          [class.error-border]="
+            (!mail.valid && mail.touched) ||
+            (mail.touched &&
+              !isUserEmailValid(authData.mail.toLowerCase()) &&
+              authData.mail.length > 0)
+          "
+          required
+        />
+        <img class="mail-icon" src="./assets/img/mail.svg" />
+      </div>
       <div class="error-msg">
         @if (!mail.valid && mail.touched) {
         <p>Please enter your email</p>
@@ -56,8 +59,9 @@
           "
           required
         />
+        <img class="password-icon" src="./assets/img/password.svg" />
         <img
-          class="passwordEye"
+          class="password-eye"
           (click)="authService.togglePasswordVisibility()"
           [src]="authService.passwordIcon"
         />
@@ -88,8 +92,9 @@
           "
           required
         />
+        <img class="password-icon" src="./assets/img/password.svg" />
         <img
-          class="passwordEye"
+          class="password-eye"
           (click)="authService.togglePasswordVisibility()"
           [src]="authService.passwordIcon"
         />
diff --git a/frontend/src/app/components/home/browse/upload-movie/upload-movie.component.scss b/frontend/src/app/components/home/browse/upload-movie/upload-movie.component.scss
index 58b2b58..1b340e1 100644
--- a/frontend/src/app/components/home/browse/upload-movie/upload-movie.component.scss
+++ b/frontend/src/app/components/home/browse/upload-movie/upload-movie.component.scss
@@ -31,7 +31,6 @@
   width: 100vw;
   height: 100vh;
   backdrop-filter: blur(2px);
-  background-color: rgba($black, 0.3);
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/frontend/src/assets/img/mail.svg b/frontend/src/assets/img/mail.svg
new file mode 100644
index 0000000..e31528c
--- /dev/null
+++ b/frontend/src/assets/img/mail.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_10053_12" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
+<rect y="0.5" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_10053_12)">
+<path d="M4 20.5C3.45 20.5 2.97917 20.3042 2.5875 19.9125C2.19583 19.5208 2 19.05 2 18.5V6.5C2 5.95 2.19583 5.47917 2.5875 5.0875C2.97917 4.69583 3.45 4.5 4 4.5H20C20.55 4.5 21.0208 4.69583 21.4125 5.0875C21.8042 5.47917 22 5.95 22 6.5V18.5C22 19.05 21.8042 19.5208 21.4125 19.9125C21.0208 20.3042 20.55 20.5 20 20.5H4ZM20 8.5L12.525 13.175C12.4417 13.225 12.3542 13.2625 12.2625 13.2875C12.1708 13.3125 12.0833 13.325 12 13.325C11.9167 13.325 11.8292 13.3125 11.7375 13.2875C11.6458 13.2625 11.5583 13.225 11.475 13.175L4 8.5V18.5H20V8.5ZM12 11.5L20 6.5H4L12 11.5ZM4 8.75V7.275V7.3V7.2875V8.75Z" fill="#2E3EDF"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/img/password.svg b/frontend/src/assets/img/password.svg
new file mode 100644
index 0000000..c7cd2f6
--- /dev/null
+++ b/frontend/src/assets/img/password.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_10053_13" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
+<rect y="0.5" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_10053_13)">
+<path d="M3 17.5H21C21.2833 17.5 21.5208 17.5958 21.7125 17.7875C21.9042 17.9792 22 18.2167 22 18.5C22 18.7833 21.9042 19.0208 21.7125 19.2125C21.5208 19.4042 21.2833 19.5 21 19.5H3C2.71667 19.5 2.47917 19.4042 2.2875 19.2125C2.09583 19.0208 2 18.7833 2 18.5C2 18.2167 2.09583 17.9792 2.2875 17.7875C2.47917 17.5958 2.71667 17.5 3 17.5ZM4 11.95L3.525 12.8C3.425 12.9833 3.275 13.1 3.075 13.15C2.875 13.2 2.68333 13.175 2.5 13.075C2.31667 12.975 2.2 12.825 2.15 12.625C2.1 12.425 2.125 12.2333 2.225 12.05L2.7 11.2H1.75C1.53333 11.2 1.35417 11.1292 1.2125 10.9875C1.07083 10.8458 1 10.6667 1 10.45C1 10.2333 1.07083 10.0542 1.2125 9.91249C1.35417 9.77083 1.53333 9.69999 1.75 9.69999H2.7L2.225 8.89999C2.125 8.71666 2.1 8.52499 2.15 8.32499C2.2 8.12499 2.31667 7.97499 2.5 7.87499C2.68333 7.77499 2.875 7.74999 3.075 7.79999C3.275 7.84999 3.425 7.96666 3.525 8.14999L4 8.94999L4.475 8.14999C4.575 7.96666 4.725 7.84999 4.925 7.79999C5.125 7.74999 5.31667 7.77499 5.5 7.87499C5.68333 7.97499 5.8 8.12499 5.85 8.32499C5.9 8.52499 5.875 8.71666 5.775 8.89999L5.3 9.69999H6.25C6.46667 9.69999 6.64583 9.77083 6.7875 9.91249C6.92917 10.0542 7 10.2333 7 10.45C7 10.6667 6.92917 10.8458 6.7875 10.9875C6.64583 11.1292 6.46667 11.2 6.25 11.2H5.3L5.775 12.05C5.875 12.2333 5.9 12.425 5.85 12.625C5.8 12.825 5.68333 12.975 5.5 13.075C5.31667 13.175 5.125 13.2 4.925 13.15C4.725 13.1 4.575 12.9833 4.475 12.8L4 11.95ZM12 11.95L11.525 12.8C11.425 12.9833 11.275 13.1 11.075 13.15C10.875 13.2 10.6833 13.175 10.5 13.075C10.3167 12.975 10.2 12.825 10.15 12.625C10.1 12.425 10.125 12.2333 10.225 12.05L10.7 11.2H9.75C9.53333 11.2 9.35417 11.1292 9.2125 10.9875C9.07083 10.8458 9 10.6667 9 10.45C9 10.2333 9.07083 10.0542 9.2125 9.91249C9.35417 9.77083 9.53333 9.69999 9.75 9.69999H10.7L10.225 8.89999C10.125 8.71666 10.1 8.52499 10.15 8.32499C10.2 8.12499 10.3167 7.97499 10.5 7.87499C10.6833 7.77499 10.875 7.74999 11.075 7.79999C11.275 7.84999 11.425 7.96666 11.525 8.14999L12 8.94999L12.475 8.14999C12.575 7.96666 12.725 7.84999 12.925 7.79999C13.125 7.74999 13.3167 7.77499 13.5 7.87499C13.6833 7.97499 13.8 8.12499 13.85 8.32499C13.9 8.52499 13.875 8.71666 13.775 8.89999L13.3 9.69999H14.25C14.4667 9.69999 14.6458 9.77083 14.7875 9.91249C14.9292 10.0542 15 10.2333 15 10.45C15 10.6667 14.9292 10.8458 14.7875 10.9875C14.6458 11.1292 14.4667 11.2 14.25 11.2H13.3L13.775 12.05C13.875 12.2333 13.9 12.425 13.85 12.625C13.8 12.825 13.6833 12.975 13.5 13.075C13.3167 13.175 13.125 13.2 12.925 13.15C12.725 13.1 12.575 12.9833 12.475 12.8L12 11.95ZM20 11.95L19.525 12.8C19.425 12.9833 19.275 13.1 19.075 13.15C18.875 13.2 18.6833 13.175 18.5 13.075C18.3167 12.975 18.2 12.825 18.15 12.625C18.1 12.425 18.125 12.2333 18.225 12.05L18.7 11.2H17.75C17.5333 11.2 17.3542 11.1292 17.2125 10.9875C17.0708 10.8458 17 10.6667 17 10.45C17 10.2333 17.0708 10.0542 17.2125 9.91249C17.3542 9.77083 17.5333 9.69999 17.75 9.69999H18.7L18.225 8.89999C18.125 8.71666 18.1 8.52499 18.15 8.32499C18.2 8.12499 18.3167 7.97499 18.5 7.87499C18.6833 7.77499 18.875 7.74999 19.075 7.79999C19.275 7.84999 19.425 7.96666 19.525 8.14999L20 8.94999L20.475 8.14999C20.575 7.96666 20.725 7.84999 20.925 7.79999C21.125 7.74999 21.3167 7.77499 21.5 7.87499C21.6833 7.97499 21.8 8.12499 21.85 8.32499C21.9 8.52499 21.875 8.71666 21.775 8.89999L21.3 9.69999H22.25C22.4667 9.69999 22.6458 9.77083 22.7875 9.91249C22.9292 10.0542 23 10.2333 23 10.45C23 10.6667 22.9292 10.8458 22.7875 10.9875C22.6458 11.1292 22.4667 11.2 22.25 11.2H21.3L21.775 12.05C21.875 12.2333 21.9 12.425 21.85 12.625C21.8 12.825 21.6833 12.975 21.5 13.075C21.3167 13.175 21.125 13.2 20.925 13.15C20.725 13.1 20.575 12.9833 20.475 12.8L20 11.95Z" fill="#2E3EDF"/>
+</g>
+</svg>
diff --git a/frontend/src/assets/style/form.scss b/frontend/src/assets/style/form.scss
index 763ac0b..19dcf62 100644
--- a/frontend/src/assets/style/form.scss
+++ b/frontend/src/assets/style/form.scss
@@ -62,12 +62,19 @@ form {
 
 // Show / Hide Password
 
-.password-field {
+.password-field,
+.mail-field {
   position: relative;
   width: 100%;
+
+  input,
+  textarea,
+  select {
+    padding-left: 60px;
+  }
 }
 
-.passwordEye {
+.password-eye {
   position: absolute;
   right: 48px;
   top: 50%;
@@ -77,6 +84,18 @@ form {
     hue-rotate(241deg) brightness(93%) contrast(88%);
 }
 
+// Icons
+
+.mail-icon,
+.password-icon {
+  position: absolute;
+  left: 44px;
+  top: 50%;
+  width: 28px;
+  height: auto;
+  transform: translateY(-50%);
+}
+
 /*------------- RESPONSIVE -------------*/
 
 @media screen and (max-width: 600px) {