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 b55befbc7088dd112f3f68c5e8916e7bde8c325d..c05549ab10bef560460b30b6c2a237bf8efb8bad 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.css b/src/app/modules/profile/sign/sign.component.css
index 9528daa3e02a56b191062d3b7f158ef8c7ac88b6..4b55ee194264a6b6bd89b9b03701e3bfdf5c7421 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,63 @@
.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%;
+}
+
+.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 9db6a8ae4b95ff8acce1630a32f36252c965d99b..b75216c7af982ecbf3273b05fa9af50f97381e26 100644
--- a/src/app/modules/profile/sign/sign.component.html
+++ b/src/app/modules/profile/sign/sign.component.html
@@ -1,38 +1,34 @@
-<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]="{ wrongButton: !formGroup.valid,
+ blueButton: formGroup.valid }">
+ @if (login) { LOGIN } @else { SIGNUP }
+ </button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 233819662b74d01f2a646d03a2f0a99346d45709..cc3b399d17b2d1ba7a372bb4219d548f60b27583 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -71,6 +71,7 @@ h1 {
border-style: solid;
height: 10vmin;
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;
+}
+
.title {
font-size: 7vmin;
font-weight: bold;