added pop ups

adessoSE · Aug 31, 2023 · 25218f8 · 25218f8
1 parent 6c2902b
commit 25218f8
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 24 deletions.
diff --git a/frontend/src/app/confirm-reset-password-popup/confirm-reset-password-popup.component.css b/frontend/src/app/confirm-reset-password-popup/confirm-reset-password-popup.component.css
@@ -8,24 +8,71 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  font-style: Klavika, sans-serif;
 }
 
-.popup {
-  background-color: white;
-  padding: 20px;
-  border-radius: 5px;
+.contentSuccess {
+  text-align: center;
+  border-radius: 4px;
+  background-color: var(--green);
+  border-radius: 4px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  color: white;
+  padding: 15px;
+  padding-left: 50px;
+  padding-right: 50px;
 }
 
-.content {
+.contentError {
   text-align: center;
+  border-radius: 4px;
+  background-color: var(--danger);
+  border-radius: 4px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  color: white;
+  padding: 15px;
+  padding-left: 50px;
+  padding-right: 50px;
 }
 
-button {
-  background-color: #007bff;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 3px;
-  cursor: pointer;
+#returnButtonError {
+  margin-left: 0px;
+  margin-right: 0px;
+  font-style: inherit;
+  font-size: 10pt;
+  font-weight: bold;
+  outline: none;
+  border: 2px solid white;
+  width: 100%;
+  border-radius: 4px;
+  transition: background-color 0.3s ease; /* Smooth transition effect */
+  box-shadow: inherit;
+  /* Initial background color */
+  background-color: var(--danger);
+}
+
+#returnButtonError:hover {
+  /* Darker background color on hover */
+  background-color: rgb(216, 101, 101);
+}
+
+#returnButtonSuccess {
+  margin-left: 0px;
+  margin-right: 0px;
+  font-style: inherit;
+  font-size: 10pt;
+  font-weight: bold;
+  outline: none;
+  border: 2px solid white;
+  width: 100%;
+  border-radius: 4px;
+  transition: background-color 0.3s ease; /* Smooth transition effect */
+  box-shadow: inherit;
+  /* Initial background color */
+  background-color: var(--green);
+}
+
+#returnButtonSuccess:hover {
+  /* Darker background color on hover */
+  background-color: rgb(75, 183, 79);
 }
diff --git a/frontend/src/app/confirm-reset-password-popup/confirm-reset-password-popup.component.html b/frontend/src/app/confirm-reset-password-popup/confirm-reset-password-popup.component.html
@@ -1,8 +1,12 @@
 <div class="overlay">
     <div class="popup">
-        <div [ngStyle]="{ backgroundColor: backgroundColor }" class="content">
+        <div class="contentError" *ngIf="type==='error'">
             <p>{{ message }}</p>
-            <button (click)="navigateToLogin()">OK</button>
+            <button id="returnButtonError" class="normalButton" (click)="navigateToLogin();">Okay</button>
+        </div>
+        <div class="contentSuccess" *ngIf="type==='success'">
+            <p>{{ message }}</p>
+            <button id="returnButtonSuccess" class="normalButton" (click)="navigateToLogin();">Return to login</button>
         </div>
     </div>
 </div>
diff --git a/frontend/src/app/confirm-reset-password-popup/confirm-reset-password-popup.component.ts b/frontend/src/app/confirm-reset-password-popup/confirm-reset-password-popup.component.ts
@@ -7,7 +7,7 @@ import { Router } from "@angular/router";
   styleUrls: ["./confirm-reset-password-popup.component.css"],
 })
 export class ConfirmResetPasswordPopupComponent {
-  @Input() backgroundColor: string = "red"; // Default background color is red
+  @Input() type: string; // Default background color is red
   @Input() message: string = "Reset your password?"; // Default message
 
   constructor(private router: Router) {}

diff --git a/frontend/src/app/confirm-reset-password/confirm-reset-password.component.css b/frontend/src/app/confirm-reset-password/confirm-reset-password.component.css
@@ -126,6 +126,7 @@ input.wrongEmail {
   height: 100%;
   width: 100%;
   justify-content: center;
+  font-family: Klavika, sans-serif;
 }
 
 #resetText {

diff --git a/frontend/src/app/confirm-reset-password/confirm-reset-password.component.html b/frontend/src/app/confirm-reset-password/confirm-reset-password.component.html
@@ -9,14 +9,10 @@
         </svg>
       </div>
       <h4 class="Mediumaccordeon2">Set a secure password</h4>
-      <app-confirm-reset-password-popup *ngIf="error" backgroundColor="red"
+      <app-confirm-reset-password-popup *ngIf="error" type="error"
+        message="{{message}}"></app-confirm-reset-password-popup>
+      <app-confirm-reset-password-popup *ngIf="success" type="success"
         message="{{message}}"></app-confirm-reset-password-popup>
-      <!-- <p class="wrongReset" *ngIf="error" [innerHTML]="error"></p>
-      <div class="wrongReset" *ngIf="tokenError">
-        This link has expired!
-        <br>Please <button class="linkButton" (click)="redirectToReset();">request a new one</button>.
-      </div>
-      <p class="successReset" *ngIf="success" [innerHTML]="success"></p> -->
       <div id="resetText">Your password must consist of at least 8 characters.
       </div>
       <div class="formular">

diff --git a/frontend/src/app/confirm-reset-password/confirm-reset-password.component.ts b/frontend/src/app/confirm-reset-password/confirm-reset-password.component.ts
@@ -32,7 +32,7 @@ export class ConfirmResetPasswordComponent {
    * Successfully sent email
    */
   success: boolean;
-  defaultSuccessMessage = "Password set!";
+  defaultSuccessMessage = "Your Password Has Been Updated!";
 
   /**
    * The message to display
@@ -78,7 +78,7 @@ export class ConfirmResetPasswordComponent {
       error: (error) => {
         this.message = this.defaultErrorMessage;
         if (error.status === 401) {
-          this.message = "This link has expired.";
+          this.message = "This Link Has Expired!";
         }
         this.error = true;
       },