feature(settings-dialog): input validations and error handling

feature(settings-dialog): input validations and error handling

Author: esthersoftwaredev

angular-primeng-app/src/app/components/posts/posts.component.scss

@@ -1,5 +1,5 @@
 .posts-view {
-  width: 70vw;
+  width: 80vw;
   min-height: 67.2vh;
   padding: 0.5rem 0;
 
@@ -12,6 +12,10 @@
     .post-card {
       display: flex;
     }
+
+    .card-title {
+      min-height: 3.5rem;
+    }
   }
 
   .load-more-posts {

angular-primeng-app/src/app/components/series/series.component.scss

@@ -1,5 +1,5 @@
 .series-view {
-  width: 70vw;
+  width: 80vw;
   min-height: 67.2vh;
   padding: 0.5rem 0;
 

angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.html

@@ -4,10 +4,10 @@
 <p-dialog [(visible)]="visible" [style]="{width: '27vw'}">
   @if (blogURLChanged) {
     <div class="dialog-content">
-      <p>Blog URL changed and set in local storage</p>
-      <p>Reload the page to see your content loading</p>
-      <p>When resetting you may need to click on</p>
-      <p>the logo image to load the content again</p>
+      <p>Blog URL was changed</p>
+      <p>You are seeing blog posts</p>
+      <p>from the following blog:</p>
+      <h3>{{blogURL}}</h3>
       <div class="dialog-actions">
         <p-button label="Reset" (click)="resetBlogURL()" class="p-button-secondary"></p-button>
       </div>
@@ -18,15 +18,26 @@ <h3>Try with your Blog</h3>
       <p>try AnguHashBlog</p>
       <small>with another Hashnode blog </small>
       <span class="p-input-icon-right">
-        @if (newBlogURL) {
-          <i class="pi pi-times" (click)="newBlogURL=''"></i>
+        @if (newBlogInput) {
+          <i class="pi pi-times" (click)="newBlogInput=''"></i>
         }
-        <input type="text" pInputText placeholder="Type a Blog URL" [(ngModel)]="newBlogURL" />
+        <input type="text" pInputText placeholder="Type a Blog URL" [(ngModel)]="newBlogInput" />
+        <div class="error">
+          @if (emptyInput) {
+          <small>Please provide a valid Hashnode Blog URL.</small>
+          }
+          @if (noBlogFound) {
+          <small>No Hashnode Blog found.</small>
+          }
+          @if (invalidInput) {
+          <small>Invalid input, please try again.</small>
+          }
+        </div>
      </span>
     </div>
     <div class="dialog-actions">
       <div class="dialog-actions">
-        <p-button label="Change" (click)="changeBlogURL(); newBlogURL=''" class="p-button-secondary"></p-button>
+        <p-button label="Change" (click)="changeBlogURL(); newBlogInput=''" class="p-button-secondary"></p-button>
       </div>
     </div>
     }

angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.scss

@@ -15,7 +15,7 @@ p-dialog {
     }
 
     p-button {
-      margin: 0.5rem 0;
+      margin: 1.5rem 0;
     }
 
     p {
@@ -31,7 +31,16 @@ p-dialog {
     input {
       margin : 1rem 0;
     }
-  }
 
+
+    .error {
+      color: red;
+      position: absolute;
+      top: 4rem;
+      font-size: 0.9rem;
+      text-align: center;
+      font-weight: 300;
+    }
+  }
 }
 

angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.ts

@@ -22,8 +22,12 @@ import { ButtonModule } from "primeng/button";
 export class SettingsDialogComponent implements OnInit {
 	visible = false;
 	blogURL: string = "hashnode.anguhashblog.com";
+  newBlogInput: string = "";
 	newBlogURL: string = "";
 	blogURLChanged: boolean = false;
+	noBlogFound: boolean = false;
+	emptyInput: boolean = false;
+	invalidInput: boolean = false;
 	blogService: BlogService = inject(BlogService);
 
 	ngOnInit() {
@@ -35,21 +39,55 @@ export class SettingsDialogComponent implements OnInit {
 		}
 	}
 
-  changeBlogURL(): void {
-    this.blogService.setBlogURL(this.newBlogURL);
-    this.blogURL = this.blogService.getBlogURL();
-    if (this.blogURL === "hashnode.anguhashblog.com") {
+	changeBlogURL(): void {
+		this.noBlogFound = false;
+		if (this.newBlogInput === "") {
+			this.emptyInput = true;
+			return;
+		} else if ( this.newBlogInput !== "") {
+      this.emptyInput = false;
+
+      if (this.newBlogInput.includes("https://") || this.newBlogInput.endsWith("/")) {
+        const cleanedBlogURL = this.newBlogInput.split("https://")[1];
+        this.newBlogURL = cleanedBlogURL.split("/")[0];
+
+      } else {
+        this.newBlogURL = this.newBlogInput;
+      }
+
+			this.blogService.getBlogInfo(this.newBlogURL).subscribe((blogInfo) => {
+				if (blogInfo === null) {
+					this.noBlogFound = true;
+					this.blogURLChanged = false;
+					this.newBlogInput = "";
+				} else {
+					this.blogService.setBlogURL(this.newBlogURL);
+					this.blogURL = this.blogService.getBlogURL();
+          this.blogURLChanged = true;
+          this.visible = false;
+		      window.location.reload();
+				}
+			});
+		} else if (this.blogURL === "hashnode.anguhashblog.com") {
       this.blogURLChanged = false;
     } else {
-      this.blogURLChanged = true;
-    }
-  }
-
-  resetBlogURL(): void {
-    this.blogService.resetBlogURL();
-    this.blogURL = this.blogService.getBlogURL();
-    this.blogURLChanged = false;
-  }
+			this.noBlogFound = true;
+			this.emptyInput = false;
+			this.blogURLChanged = false;
+      this.invalidInput = true;
+			this.newBlogInput = "";
+		}
+	}
+
+
+	resetBlogURL(): void {
+		this.blogService.resetBlogURL();
+		this.blogURL = this.blogService.getBlogURL();
+		this.emptyInput = false;
+		this.blogURLChanged = false;
+		this.visible = false;
+		window.location.reload();
+	}
 
 	showDialog() {
 		this.visible = true;

angular-primeng-app/src/styles.scss

@@ -7,7 +7,7 @@ a {
 }
 
 .post-card {
-  width: 20vw;
+  width: 23vw;
   margin: 1rem;
   cursor: pointer;
 
@@ -18,12 +18,14 @@ a {
 
   .p-card {
     height: 100%;
+    width: 100%;
   }
 
   .p-card-title {
-    font-size: 1.1rem;
+    font-size: 1rem;
     line-height: 1.7rem;
     font-weight: 500;
+    min-height: 3.5rem;
   }
 
   .p-card-content {
@@ -33,7 +35,7 @@ a {
 
 .card-image {
   width: 100%;
-  height: 10rem;
+  height: 12rem;
   overflow: hidden;
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
@@ -92,6 +94,10 @@ article {
     }
   }
 
+  .p-card-title {
+    min-width: 75vw;
+  }
+
   // !important statement shall only be used if there are no alternatives, like in this case for overwriting very persistent styles set by PrimeNG
 
   app-follow-dialog {