From 943498776e8aae27d2df88d4cdb540400e2dfb24 Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Fri, 6 Dec 2024 00:11:29 +0100
Subject: [PATCH 1/3] style: css for login

---
 .../modules/profile/sign/sign.component.css   | 61 ++++++++++++++++---
 src/styles.css                                | 17 ++++++
 2 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/src/app/modules/profile/sign/sign.component.css b/src/app/modules/profile/sign/sign.component.css
index 9528daa..c3dd038 100644
--- a/src/app/modules/profile/sign/sign.component.css
+++ b/src/app/modules/profile/sign/sign.component.css
@@ -1,19 +1,20 @@
 .button-header {
     background-color: #ffffff;
     border-radius: 10px;
-    width: 80%;
+    width: 100%;
     height: 10%;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
-    padding: 1rem;
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
 }
 
-.button-header > button {
+.button-header>button {
     background: none;
     border: none;
     height: 80%;
-    width: 100%;
+    width: 70%;
+    margin-left: 15%;
     padding: 10px 20px;
     font-size: 16px;
     cursor: pointer;
@@ -21,7 +22,12 @@
     color: #b9b9b9;
 }
 
-.button-header > button:hover {
+.button-header>button.active {
+    border-bottom-color: #2b73fe;
+    color: #2b73fe;
+}
+
+.button-header>button:hover {
     border-bottom-color: #2b73fe;
     color: #2b73fe;
 }
@@ -33,6 +39,47 @@
 
 .wrong {
     color: red;
-    font-size: 12px;
-    margin-top: 5px;
+    font-size: 2vmin;
 }
+
+.grid {
+    height: 100%;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+    flex-grow: 0;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    /* height: 100%; */
+    width: 100%;
+}
+
+.error {
+    color: red;
+    font-size: 2vmin;
+    margin: 0;
+    text-align: center;
+}
+
+.blueButton {
+    height: 10%;
+
+}
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 34bf365..c927c5a 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -71,6 +71,7 @@ h1 {
     border-style: solid;
     height: 100px;
     width: 100%;
+    cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }
 
@@ -136,6 +137,22 @@ h1 {
     -webkit-box-sizing: border-box;
 }
 
+.inputText {
+    width: 100%;
+    height: 5%;
+    border-color: #1FA9FF;
+    border-width: 4px;
+    border-radius: 10px;
+    border-style: solid;
+
+    padding: 20px;
+    font-size: 2vmin;
+
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
 /* scrollable lists */
 .scrollable-list::-webkit-scrollbar {
     width: 10px;
-- 
GitLab


From a798292348bd2d1a840966d650b19bde76dc2626 Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Fri, 6 Dec 2024 00:11:56 +0100
Subject: [PATCH 2/3] feat: add feedback

---
 .../profile-info/profile-info.component.html  | 19 +++---
 .../modules/profile/sign/sign.component.html  | 67 +++++++++----------
 2 files changed, 40 insertions(+), 46 deletions(-)

diff --git a/src/app/modules/profile/profile-info/profile-info.component.html b/src/app/modules/profile/profile-info/profile-info.component.html
index b55befb..c05549a 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.html
+++ b/src/app/modules/profile/profile-info/profile-info.component.html
@@ -5,22 +5,21 @@
         <div class="container">
             <div class="grid-profile">
                 <div class="profile_info">
-                    <img
-                        src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"
-                        alt="profile picture"
-                    />
+                    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png"
+                        alt="profile picture" />
                     <h3>User Name</h3>
                 </div>
                 <hr />
                 <div class="profile_stats">
-                    <img
-                        src="https://img.uxcel.com/tags/key-performance-indicator-kpi-1698250709411-2x.jpg"
-                        alt="stats"
-                    />
+                    <img src="https://img.uxcel.com/tags/key-performance-indicator-kpi-1698250709411-2x.jpg"
+                        alt="stats" />
                 </div>
             </div>
         </div>
-        <app-sign *ngIf="!isLogged"></app-sign>
+        <h3>Not logged in</h3>
+        <div class="grid">
+            <app-sign *ngIf="!isLogged"></app-sign>
+        </div>
         <div *ngIf="isLogged">
             <h3>Your quizzes</h3>
             <div class="grid">
@@ -42,4 +41,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/profile/sign/sign.component.html b/src/app/modules/profile/sign/sign.component.html
index 9db6a8a..8a24df4 100644
--- a/src/app/modules/profile/sign/sign.component.html
+++ b/src/app/modules/profile/sign/sign.component.html
@@ -1,38 +1,33 @@
-<p>sign works!</p>
-<div class="button-header">
-    <button (click)="showLogin()">LOGIN</button>
-    <button (click)="showSignup()">SIGNUP</button>
-</div>
-<div class="content">
-    <form [formGroup]="formGroup">
-        <input
-            formControlName="email"
-            placeholder="EMAIL"
-            (blur)="checkValidity('email')"
-            [ngClass]="{ wrong: !formGroup.get('email')?.valid && formGroup.get('email')?.touched }"
-        />
-        <input
-            formControlName="password"
-            placeholder="PASSWORD"
-            (blur)="checkValidity('password')"
-            [ngClass]="{ wrong: !formGroup.get('password')?.valid && formGroup.get('password')?.touched }"
-        />
-        <input
-            formControlName="confirm_password"
-            placeholder="CONFIRM PASSWORD"
-            *ngIf="signup"
-            (blur)="checkValidity('confirm_password')"
-            [ngClass]="{
+<div class="container">
+    <div class="button-header">
+        <button [ngClass]="{active: login}" (click)="showLogin()">LOGIN</button>
+        <button [ngClass]="{active: signup}" (click)="showSignup()">SIGNUP</button>
+    </div>
+    <div class="content">
+        <form [formGroup]="formGroup">
+            <input formControlName="email" placeholder="EMAIL" (blur)="checkValidity('email')" [ngClass]="{ 
+                    'wrong': !formGroup.get('email')?.valid && formGroup.get('email')?.touched 
+                }" class="inputText" />
+            <input formControlName="password" placeholder="PASSWORD" (blur)="checkValidity('password')"
+                [ngClass]="{ wrong: !formGroup.get('password')?.valid && formGroup.get('password')?.touched }"
+                class="inputText" />
+            <input formControlName="confirm_password" placeholder="CONFIRM PASSWORD" *ngIf="signup"
+                (blur)="checkValidity('confirm_password')" [ngClass]="{
                 wrong:
                     formGroup.get('confirm_password')?.errors?.['missMatch'] && formGroup.get('confirm_password')?.touched
-            }"
-        />
-    </form>
-    <button
-        [disabled]="!formGroup.valid || (signup && formGroup.get('confirm_password')?.errors?.['missMatch'])"
-        (click)="submit()"
-        [ngClass]="{ valid: formGroup.valid }"
-    >
-        @if (login) { LOGIN } @else { SIGNUP }
-    </button>
-</div>
+                }" class="inputText" />
+            <div class="error">
+                <p *ngIf="!formGroup.get('email')?.valid && formGroup.get('email')?.touched" class="error">
+                    Email is required</p>
+                <p *ngIf="!formGroup.get('password')?.valid && formGroup.get('password')?.touched" class="error">8
+                    character minimum</p>
+                <p *ngIf="formGroup.get('confirm_password')?.errors?.['missMatch'] && formGroup.get('confirm_password')?.touched"
+                    class="error">Passwords do not match</p>
+            </div>
+        </form>
+        <button [disabled]="!formGroup.valid || (signup && formGroup.get('confirm_password')?.errors?.['missMatch'])"
+            (click)="submit()" [ngClass]="{ valid: formGroup.valid }" class="blueButton">
+            @if (login) { LOGIN } @else { SIGNUP }
+        </button>
+    </div>
+</div>
\ No newline at end of file
-- 
GitLab


From caa6c136f98fa7a88baa97107a943005e2a09097 Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Fri, 6 Dec 2024 00:51:25 +0100
Subject: [PATCH 3/3] style: change css for button

---
 src/app/modules/profile/sign/sign.component.css  | 16 ++++++++++++++++
 src/app/modules/profile/sign/sign.component.html |  3 ++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/profile/sign/sign.component.css b/src/app/modules/profile/sign/sign.component.css
index c3dd038..4b55ee1 100644
--- a/src/app/modules/profile/sign/sign.component.css
+++ b/src/app/modules/profile/sign/sign.component.css
@@ -81,5 +81,21 @@ form {
 
 .blueButton {
     height: 10%;
+}
 
+.wrongButton {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #b9b9b9;
+    color: #FFFFFF;
+    font-weight: bold;
+    font-size: 5vmin;
+    border-radius: 10px;
+    border-color: #FFFFFF;
+    border-width: 4px;
+    border-style: solid;
+    height: 10%;
+    width: 100%;
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }
\ No newline at end of file
diff --git a/src/app/modules/profile/sign/sign.component.html b/src/app/modules/profile/sign/sign.component.html
index 8a24df4..b75216c 100644
--- a/src/app/modules/profile/sign/sign.component.html
+++ b/src/app/modules/profile/sign/sign.component.html
@@ -26,7 +26,8 @@
             </div>
         </form>
         <button [disabled]="!formGroup.valid || (signup && formGroup.get('confirm_password')?.errors?.['missMatch'])"
-            (click)="submit()" [ngClass]="{ valid: formGroup.valid }" class="blueButton">
+            (click)="submit()" [ngClass]="{ wrongButton: !formGroup.valid,
+                blueButton: formGroup.valid }">
             @if (login) { LOGIN } @else { SIGNUP }
         </button>
     </div>
-- 
GitLab