(F) Add toastrs

Clinics.Frontend/src/app/app.module.ts

@@ -26,7 +26,9 @@ import { NotFoundComponent } from './components/errors/not-found/not-found.compo
     BrowserAnimationsModule,
     AppRoutingModule,
     NgbModule,
-    ToastrModule.forRoot(),
+    ToastrModule.forRoot({
+      timeOut: 2500,
+    }),
     FormsModule,
     HttpClientModule,
   ],

Clinics.Frontend/src/app/components/Authentication/login-form/login-form.component.ts

@@ -3,6 +3,7 @@ import { NgForm } from '@angular/forms';
 import { LoginCommand } from '../../../classes/Authentication/Login/login-command';
 import { AuthenticationService } from '../../../services/authentication/authentication.service';
 import { UserData } from '../../../classes/Authentication/user-data';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-login-form',
@@ -12,7 +13,9 @@ import { UserData } from '../../../classes/Authentication/user-data';
 export class LoginFormComponent {
 
   //#region CTOR DI
-  constructor(private authenticationService: AuthenticationService) {}
+  constructor(private authenticationService: AuthenticationService,
+    private toastrService: ToastrService
+  ) {}
   //#endregion
 
   //#region Inputs
@@ -46,6 +49,7 @@ export class LoginFormComponent {
             this.errorMessage = result.errorMessage!;
           }
           else{
+            this.toastrService.success("تم تسجيل الدخول بنجاح ✔");
             this.loggedIn.emit(this.authenticationService.getUserData()!);
           }
         }

Clinics.Frontend/src/app/components/template/header/header.component.ts

@@ -4,6 +4,7 @@ import { AuthenticationService } from '../../../services/authentication/authenti
 import { Router } from '@angular/router';
 import { Roles } from '../../../classes/Authentication/roles';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-header',
@@ -15,7 +16,8 @@ export class HeaderComponent {
   //#region CTOR DI
   constructor(private authenticationService: AuthenticationService,
     private router: Router,
-    private modalService: NgbModal) { }
+    private modalService: NgbModal,
+    private toastrService: ToastrService) { }
   //#endregion
 
   //#region Inputs
@@ -57,6 +59,7 @@ export class HeaderComponent {
   //#region On logout
   onLogout(): void {
     this.authenticationService.logout();
+    this.toastrService.success("تم تسجيل الخروج بنجاح ✔");
     this.userData = null;
     this.showDropdown = false;
     this.router.navigate(['']);

Clinics.Frontend/src/styles.scss

@@ -2,7 +2,7 @@
 @import 'bootstrap/scss/bootstrap';
 
 // Toasts style
-@import "../node_modules/ngx-toastr/toastr-bs5-alert.scss";
+@import "./styles/toastr-style.scss";
 
 // Template constants
-@import "./templateConstants.css"
+@import "./styles/templateConstants.css"
\ No newline at end of file

Clinics.Frontend/src/templateConstants.css → Clinics.Frontend/src/styles/templateConstants.css

@@ -55,4 +55,4 @@
 /* Smooth scroll */
 :root {
     scroll-behavior: smooth;
-}
+}
\ No newline at end of file

Clinics.Frontend/src/styles/toastr-style.scss

+$theme-color-interval: 8% !default;
+
+// Position
+.toast-center-center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.toast-top-center {
+    top: 0;
+    right: 0;
+    width: 100%;
+}
+
+.toast-bottom-center {
+    bottom: 0;
+    right: 0;
+    width: 100%;
+}
+
+.toast-top-full-width {
+    top: 0;
+    right: 0;
+    width: 100%;
+}
+
+.toast-bottom-full-width {
+    bottom: 0;
+    right: 0;
+    width: 100%;
+}
+
+.toast-top-left {
+    top: 12px;
+    left: 12px;
+}
+
+.toast-top-right {
+    top: 12px;
+    right: 12px;
+}
+
+.toast-bottom-right {
+    right: 12px;
+    bottom: 12px;
+}
+
+.toast-bottom-left {
+    bottom: 12px;
+    left: 12px;
+}
+
+.toast-container.toast-top-center .ngx-toastr,
+.toast-container.toast-bottom-center .ngx-toastr {
+    width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.toast-container.toast-top-full-width .ngx-toastr,
+.toast-container.toast-bottom-full-width .ngx-toastr {
+    width: 96%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+// Toast
+.toast-container {
+    font-family: Cairo;
+
+    pointer-events: none;
+    position: fixed;
+    z-index: 999999;
+
+    .ngx-toastr {
+        @include border-radius($alert-border-radius);
+        position: relative;
+        overflow: hidden;
+        margin: 0 0 6px;
+        padding: 0.75rem 1.25rem 0.75rem 50px;
+        width: 250px;
+        background-position: 15px center;
+        background-repeat: no-repeat;
+        background-size: 24px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.03);
+        pointer-events: auto;
+
+        .toast-title {
+            font-weight: bold;
+        }
+
+        .toast-message {
+            word-wrap: break-word;
+
+        }
+
+        .toast-close-button {
+            position: relative;
+            right: -0.3em;
+            top: -0.3em;
+            float: right;
+            font-size: 20px;
+            font-weight: bold;
+            color: inherit;
+            text-shadow: 0 1px 0 #fff;
+            opacity: 0.5;
+            background: transparent;
+            border: 0;
+            padding: 0;
+        }
+
+        .toast-progress {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            height: 4px;
+            background-color: #000000;
+            opacity: 0.3;
+        }
+
+        .toast-close-button:hover,
+        .toast-close-button:focus {
+            color: #000000;
+            text-decoration: none;
+            cursor: pointer;
+            opacity: 0.75;
+        }
+    }
+
+    .ngx-toastr:hover {
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+        opacity: 1;
+        cursor: pointer;
+    }
+}
+
+@function str-split($string, $separator) {
+    $split-arr: (
+    );
+// first index of separator in string
+$index: str-index($string, $separator);
+
+// loop through string
+@while $index !=null {
+    // get the substring from the first character to the separator
+    $item: str-slice($string, 1, $index - 1);
+    // push item to array
+    $split-arr: append($split-arr, $item);
+    // remove item and separator from string
+    $string: str-slice($string, $index + 1);
+    // find new index of separator
+    $index: str-index($string, $separator);
+}
+
+// add the remaining string to list (the last item)
+$split-arr: append($split-arr, $string);
+
+@return $split-arr;
+}
+
+@function svg-factory($fill-color, $viewbox, $path) {
+    $split: str-split($viewbox, ' ');
+    $width: nth($split, 3);
+    $height: nth($split, 4);
+
+    // opacity is 0.9999 otherwise it uses a hex equivelent
+    // firefox requires fill rgb
+    @return "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='"+$viewbox +"' width='"+$width +"' height='"+$height +"'%3E%3Cpath fill='"+rgba($fill-color, 0.999999)+"' d='"+$path +"'/%3E%3C/svg%3E";
+}
+
+@function svg-encode($svg) {
+    @return 'data:image/svg+xml;charset=utf8,'+$svg;
+}
+
+.toast-success {
+    // color: shift-color($success, 6 * $theme-color-interval) !important;
+    color: white;
+    // background-color: shift-color($success, -10 * $theme-color-interval);
+    background-color: var(--accent-color);
+    border: 1px solid shift-color($success, -9 * $theme-color-interval);
+
+    // these are likely !important because we're overriding bootstrap 5's toast styles
+    a {
+        text-decoration: underline !important;
+        color: shift-color($success, 10 * $theme-color-interval) !important;
+
+        &:hover {
+            color: shift-color($success, 12 * $theme-color-interval) !important;
+        }
+    }
+}
+
+.toast-error {
+    /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/times-circle.svg */
+    background-image: url(svg-encode(
+ svg-factory(shift-color($danger, 6 * $theme-color-interval),
+            '0 0 512 512',
+            'M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'
+        )));
+    color: shift-color($danger, 6 * $theme-color-interval) !important;
+    background-color: shift-color($danger, -10 * $theme-color-interval);
+    border: 1px solid shift-color($danger, -9 * $theme-color-interval);
+
+    a {
+        text-decoration: underline !important;
+        color: shift-color($danger, 10 * $theme-color-interval) !important;
+
+        &:hover {
+            color: shift-color($danger, 12 * $theme-color-interval) !important;
+        }
+    }
+}
+
+.toast-info {
+    /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/info-circle.svg */
+    background-image: url(svg-encode(
+ svg-factory(shift-color($info, 6 * $theme-color-interval),
+            '0 0 512 512',
+            'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'
+        )));
+    // color: shift-color($info, 6 * $theme-color-interval) !important;
+    background-color: shift-color($info, -10 * $theme-color-interval);
+    border: 1px solid shift-color($info, -9 * $theme-color-interval);
+
+    a {
+        text-decoration: underline !important;
+        color: shift-color($info, 10 * $theme-color-interval) !important;
+
+        &:hover {
+            color: shift-color($info, 12 * $theme-color-interval) !important;
+        }
+    }
+}
+
+.toast-warning {
+    /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/solid/exclamation-triangle.svg */
+    background-image: url(svg-encode(
+ svg-factory(shift-color($warning, 6 * $theme-color-interval),
+            '0 0 576 512',
+            'M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'
+        )));
+    color: shift-color($warning, 6 * $theme-color-interval) !important;
+    background-color: shift-color($warning, -10 * $theme-color-interval);
+    border: 1px solid shift-color($warning, -9 * $theme-color-interval);
+
+    a {
+        text-decoration: underline !important;
+        color: shift-color($warning, 10 * $theme-color-interval) !important;
+
+        &:hover {
+            color: shift-color($warning, 12 * $theme-color-interval) !important;
+        }
+    }
+}
+
+// Responsive Design
+@media all and (max-width: 240px) {
+    .toast-container .ngx-toastr.div {
+        padding: 8px 8px 8px 50px;
+        width: 11em;
+    }
+
+    .toast-container .toast-close-button {
+        right: -0.2em;
+        top: -0.2em;
+    }
+}
+
+@media all and (min-width: 241px) and (max-width: 480px) {
+    .toast-container .ngx-toastr.div {
+        padding: 8px 8px 8px 50px;
+        width: 18em;
+    }
+
+    .toast-container .toast-close-button {
+        right: -0.2em;
+        top: -0.2em;
+    }
+}
+
+@media all and (min-width: 481px) and (max-width: 768px) {
+    .toast-container .ngx-toastr.div {
+        padding: 15px 15px 15px 50px;
+        width: 25em;
+    }
+}
\ No newline at end of file