user avatar in navbar for better navigation

src/components.d.ts

@@ -138,6 +138,7 @@ export namespace Components {
  "selected": string[];
  }
  interface NavBar {
+ "stringifieduser": string;
  }
  interface NavigatorsComponent {
  "navigators": string;
@@ -748,6 +749,7 @@ declare namespace LocalJSX {
  "selected"?: string[];
  }
  interface NavBar {
+ "stringifieduser"?: string;
  }
  interface NavigatorsComponent {
  "navigators"?: string;

src/components/common/backdrop-filter/backdrop-filter.tsx

@@ -1,20 +1,26 @@
-import { Component, h, Host, Prop  } from '@stencil/core';
+import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
  tag: 'backdrop-filter',
  styleUrl: 'backdrop-filter.css',
  scoped: true,
 })
 export class BackdropFilter {
- @Prop() showBackDrop :boolean ;
- @Prop() backDropHandler :any; 
-
+ @Prop() showBackDrop: boolean;
+ @Prop() backDropHandler: any;
 
  render() {
  return (
  <Host>
  {this.showBackDrop && (
- <div style={{ width: '100vw', height: '100vh' }} onClick={(e) => {e.stopPropagation(); this.backDropHandler()}} class="fixed top-0 left-0 z-10 backdrop-blur-sm bg-white/30"></div>
+ <div
+ style={{ width: '100vw', height: '100vh' }}
+ onClick={e => {
+ e.stopPropagation();
+ this.backDropHandler();
+ }}
+ class="fixed top-0 left-0 z-10 "
+ ></div>
  )}
  </Host>
  );

src/components/common/nav-bar/nav-bar.tsx

@@ -1,21 +1,37 @@
-import { Component, h } from '@stencil/core';
+import { Component, h, State, Prop } from '@stencil/core';
 
 @Component({
  tag: 'nav-bar',
  scoped: true,
 })
 export class NavBar {
+ @Prop() stringifieduser: string;
+ @State() isAvatarDropDownOpen: boolean = false;
+ @State() userDetails: Object;
+
+ avatarOpenClass = {
+ true: ``,
+ false: `hidden`,
+ };
+
+ avatarDropDownHandler() {
+ this.isAvatarDropDownOpen = !this.isAvatarDropDownOpen;
+ }
+ componentWillLoad() {
+ this.userDetails = JSON.parse(this.stringifieduser);
+ }
+
  render() {
  return (
  <div class="container mx-auto">
- <nav class="sticky top-0 pt-6 pb-8 bg-white border-b z-9">
+ <nav class="sticky top-0 pt-6 pb-8 bg-white border-b">
  <div>
  <div class="flex flex-wrap justify-between items-center mx-auto bg-white">
  <a href="/" class="text-lg text-gray-800">
  Neptune Connect
  </a>
 
- <div class="block w-80">
+ <div class="block w-64">
  <ul class="flex items-center justify-between flex-grow">
  <li>
  <a
@@ -42,6 +58,83 @@ export class NavBar {
  </li>
 
  <li>
+ <div>
+ <button
+ id="dropdownAvatarNameButton"
+ data-dropdown-toggle="dropdownAvatarName"
+ class="flex items-center text-sm font-medium text-gray-900 rounded-full hover:text-blue-600 dark:hover:text-blue-500 md:mr-0 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:text-white"
+ type="button"
+ onClick={() => this.avatarDropDownHandler()}
+ >
+ <span class="sr-only">Open user menu</span>
+ <div class="w-8 h-8 mr-2 rounded-full bg-gray-500 flex items-center justify-center text-lg font-semibold text-white">
+ <span class="w-4 truncate">{this.userDetails['name'].charAt(0)}</span>
+ </div>
+ <div class="w-24 truncate">{this.userDetails['name'].split(' ')[0]}</div>
+ <svg class="w-4 h-4 mx-1.5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+ <path
+ fill-rule="evenodd"
+ d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+ clip-rule="evenodd"
+ ></path>
+ </svg>
+ </button>
+
+ {/* <!-- Dropdown menu --> */}
+ <div
+ id="dropdownAvatarName"
+ class={`absolute my-2 z-30 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 dark:divide-gray-600 ${
+ this.avatarOpenClass[`${this.isAvatarDropDownOpen}`]
+ }`}
+ >
+ <a href="/settings/myprofile" class="hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+ <div class="px-4 py-3 text-sm text-gray-900 dark:text-white">
+ <div class="font-medium truncate">{this.userDetails['name']}</div>
+ <div class="truncate">{this.userDetails['email']}</div>
+ </div>
+ </a>
+ <ul class="text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownInformdropdownAvatarNameButtonationButton">
+ <li>
+ <a href="/settings" class="flex justify-between px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
+ <div>Settings</div>
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+ />
+ <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+ </svg>
+ </div>
+ </a>
+ </li>
+ </ul>
+ <div class="px-4 py-2">
+ <form action="/logout" name="logout-form" method="post">
+ <button
+ title="log out"
+ type="submit"
+ class="w-full flex justify-between py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0"
+ >
+ <div>Sign Out</div>
+ <div>
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
+ />
+ </svg>
+ </div>
+ </button>
+ </form>
+ </div>
+ </div>
+ </div>
+ </li>
+
+ {/* <li>
  <a
  title="setting"
  class="block py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0"
@@ -56,9 +149,9 @@ export class NavBar {
  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
  </svg>
  </a>
- </li>
+ </li> */}
 
- <li>
+ {/* <li>
  <form action="/logout" name="logout-form" method="post">
  <button
  title="log out"
@@ -70,7 +163,7 @@ export class NavBar {
  </svg>
  </button>
  </form>
- </li>
+ </li> */}
  </ul>
  </div>
  </div>

src/components/common/nav-bar/readme.md

@@ -5,6 +5,13 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ----------------- | ----------- | -------- | ----------- |
+| `stringifieduser` | `stringifieduser` | | `string` | `undefined` |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

src/components/editorPage/menu-drop-down/menu-drop-down.tsx

@@ -6,7 +6,6 @@ import state from '../store';
  scoped: true,
 })
 export class MenuDropDown {
-
  @Prop() listTitle: string;
  @Prop() list: string[];
  @Prop() fetchData: any;
@@ -48,7 +47,7 @@ export class MenuDropDown {
  style={{ right: '0px' }}
  class={this.showDropdown ? 'absolute bg-white z-10 w-44 text-sm list-none mt-2 rounded divide-y right-0 divide-gray-100 shadow ' : 'hidden'}
  >
- <ul id="dropdown" class="py-1">
+ <ul id="dropdown" class="py-1 bg-white">
  {this.list?.map(item => (
  <li>
  <a href="#" onClick={() => this.buttonHandler(this.listTitle)} class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100">

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

@@ -9,52 +9,47 @@ import Swal from 'sweetalert2';
 })
 export class ProfileComponent {
  @Prop() stringifieduser: string;
- @Prop() url : string;
+ @Prop() url: string;
  @State() user: any;
- @State() password : string= "";
- @State() repassword : string= "";
- @State() name : string = "";
- @State() error:any = null;
+ @State() password: string = '';
+ @State() repassword: string = '';
+ @State() name: string = '';
+ @State() error: any = null;
 
- componentWillLoad(){
+ componentWillLoad() {
  this.user = JSON.parse(this.stringifieduser);
  this.name = this.user.name;
  }
 
- async handleSubmit(e){
- this.error=null;
+ async handleSubmit(e) {
+ this.error = null;
  e.preventDefault();
- if(this.name === ""){
- this.error = "User name is empty"
- }
- 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 if(this.password !== this.repassword){
- this.error = "Password does not match with re-entered password"
- }
- else{
+ if (this.name === '') {
+ this.error = 'User name is empty';
+ } 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 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`, {
- name:this.name,
- email:this.user.email,
- password:this.password
- });
- this.password="";
- this.name="";
- this.error="";
+ await axios.put(`${this.url}api/users/password`, {
+ name: this.name,
+ email: this.user.email,
+ password: this.password,
+ });
+ this.password = '';
+ this.name = '';
+ this.error = '';
  Swal.fire({
  position: 'center',
  icon: 'success',
  text: 'User credentials updated successfully!',
  showConfirmButton: false,
  timer: 1500,
  });
- await axios.post(`${this.url}logout`)
+ await axios.post(`${this.url}logout`);
  window.location.reload();
  } catch (error) {
  Swal.fire({
@@ -65,21 +60,21 @@ export class ProfileComponent {
  }
  }
  }
- passwordHandler(e){
+ passwordHandler(e) {
  this.password = e.target.value;
  }
- repasswordHandler(e){
+ repasswordHandler(e) {
  this.repassword = e.target.value;
  }
- nameChangeHandler(e){
+ nameChangeHandler(e) {
  this.name = e.target.value;
  }
 
  render() {
  return (
  <Host class="rounded-lg w-auto bg-gray-100 shadow-gray-600 py-2 px-3 space-y-2 gap-4">
- <form onSubmit={e => this.handleSubmit(e)} class="w-full max-w-lg">
- <div class="flex flex-wrap -mx-3 mb-6">
+ <form onSubmit={e => this.handleSubmit(e)} class="w-full">
+  <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">Name</label>
  <input
@@ -110,7 +105,7 @@ export class ProfileComponent {
  <div class="w-full px-3">
  <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">Password</label>
  <input
- onInput={e=>this.passwordHandler(e)}
+ onInput={e => this.passwordHandler(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"
@@ -124,7 +119,7 @@ export class ProfileComponent {
  <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)}
+ 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"
@@ -135,12 +130,11 @@ export class ProfileComponent {
  </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}
+ <button class="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}
  </div>
  </form>
  </Host>
  );
  }
 }
-

src/components/settingsPage/side-bar/side-bar.tsx

@@ -5,7 +5,7 @@ import { hasAccess } from '../../../utils/utils';
 
 @Component({
  tag: 'side-bar',
- styleUrl:'side-bar.css',
+ styleUrl: 'side-bar.css',
  scoped: true,
 })
 export class SideBar {
@@ -100,7 +100,7 @@ export class SideBar {
  return (
  <Host>
  {this.apiExist ? (
- <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+ <div class="overflow-x-auto shadow-md sm:rounded-lg">
  <table class="w-full text-sm text-left text-gray-500 ">
  <thead class="text-xs text-gray-700 uppercase bg-gray-50 ">
  <tr>