showing message for role already present

src/components/permissionPage/add-role/add-role.tsx

@@ -26,22 +26,20 @@ export class AddRole {
         roleName: this.value,
       });
       await this.refresh();
-
       Swal.fire({
         position: 'center',
         icon: 'success',
         text: 'Added new role!',
         showConfirmButton: false,
         timer: 1500,
       });
-
       this.value = '';
       this.toggleModalState();
     } catch (error) {
       Swal.fire({
         icon: 'error',
         title: 'Oops...',
-        text: 'Something went wrong!',
+        text: error?.response?.data || "Failed to create a new role",
       });
     }
   }

src/components/profilePage/profile-component/profile-component.tsx

@@ -12,6 +12,7 @@ export class ProfileComponent {
   @Prop() url : string;
   @State() user: any;
   @State() password : string= "";
+  @State() repassword : string= "";
   @State() name : string = "";
   @State() error:any = null;
 
@@ -26,12 +27,16 @@ export class ProfileComponent {
     if(this.name === ""){
       this.error = "User name is empty"
     }
-    if(this.password.length < 7){
+    else if(this.password.length < 7){
       this.error = "Password length is less than 7 characters"
     }
     else if(!this.password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)){
       this.error = "Password does not contain any special character"
-    }else{
+    }
+    else if(this.password !== this.repassword){
+      this.error = "Password does not match with re-entered password"
+    }
+    else{
       try {
         await axios
           .put(`${this.url}api/users/password`, {
@@ -63,6 +68,9 @@ export class ProfileComponent {
   passwordHandler(e){
     this.password = e.target.value;
   }
+  repasswordHandler(e){
+    this.repassword = e.target.value;
+  }
   nameChangeHandler(e){
     this.name = e.target.value;
   }
@@ -112,6 +120,20 @@ export class ProfileComponent {
               <p class="text-gray-600 text-xs italic">Enter updated password</p>
             </div>
           </div>
+          <div class="flex flex-wrap -mx-3 mb-6">
+            <div class="w-full px-3">
+              <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">Re-enter Password</label>
+              <input
+                onInput={e=>this.repasswordHandler(e)}
+                class="appearance-none block w-full bg-white text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                id="grid-password"
+                type="password"
+                placeholder="******************"
+                value={this.repassword}
+              />
+              <p class="text-gray-600 text-xs italic">Re-enter the password</p>
+            </div>
+          </div>
           <div class="flex flex-row-reverse -mx-3 mb-6 ">
               <button class="border-2 border-gray-800 w-32 py-4 px-6 mx-4 font-medium text-lg text-white bg-gray-500 rounded-lg hover:bg-gray-400">Update</button>
               {this.error?<p class="rounded-lg mx-4 my-2 px-3 py-2 bg-red-200 text-red-800 border-l-4 border-red-600 w-full">{this.error}</p>:null}