[Connect|Trunk]: Merge from Login: Login Experience functionality has been added.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56918 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/app-routing.module.ts

@@ -20,6 +20,8 @@ const routes: Routes = [
   { path: 'organizations', loadChildren: './htmlPages/organizations/organizationsPage.module#OrganizationsPageModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
   { path: 'curators', loadChildren: './curators/curators.module#CuratorsModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
 
+  { path: 'myCommunities', loadChildren: './my-communities/my-communities.module#MyCommunitiesModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
+
   // Testing Page for help contents
   { path: 'helper-test', loadChildren: './helper-test/helper-test.module#HelperTestModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
 

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ActivatedRoute, ActivationEnd, NavigationStart, Router, RoutesRecognized} from '@angular/router';
+import {ActivatedRoute, NavigationStart, Router} from '@angular/router';
 
 import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
 import {MenuItem, RootMenuItem} from './openaireLibrary/sharedComponents/menu';
@@ -18,10 +18,13 @@ import {HelperFunctions} from "./openaireLibrary/utils/HelperFunctions.class";
   `],
   template: `
     <div [class]="(community)?(community.id +'App'):'connectApp'">
-        <navbar *ngIf= "properties && showMenu && !community"   portal="connect" [onlyTop]=false    [userMenuItems]=userMenuItems [menuItems]=menuItems
+      <navbar *ngIf="properties && showMenu && !community" portal="connect" [onlyTop]=false
+              [userMenuItems]=userMenuItems [menuItems]=menuItems
               [showMenu]=showMenu [properties]="properties" [showHomeMenuItem]="true"></navbar>
-        <navbar *ngIf= "properties && showMenu  && community"    portal="connect" [onlyTop]=false [communityId]="community.id"  [userMenuItems]=userMenuItems [menuItems]=menuItems
+      <navbar *ngIf="properties && showMenu  && community" portal="connect" [onlyTop]=false [communityId]="community.id"
-        [community]=community [showMenu]=showMenu [properties]="properties" [enableSearch]="true" [showHomeMenuItem]="true"></navbar>
+              [userMenuItems]=userMenuItems [menuItems]=menuItems
+              [community]=community [showMenu]=showMenu [properties]="properties" [enableSearch]="true"
+              [showHomeMenuItem]="true"></navbar>
       <customization *ngIf="properties  && community"></customization>
       <div class="custom-main-content">
         <main>
@@ -31,13 +34,20 @@ import {HelperFunctions} from "./openaireLibrary/utils/HelperFunctions.class";
       <!--feedback *ngIf= "isClient && properties" portalName="Connect" [feedbackQuestionaire]=properties.feedbackQuestionaire></feedback-->
       <cookie-law *ngIf="isClient" position="bottom">
         OpenAIRE uses cookies in order to function properly.<br>
-            Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing experience possible.
+        Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing
-            By using the OpenAIRE portal you accept our use of cookies. <a href="//ec.europa.eu/ipg/basics/legal/cookies/index_en.htm" target="_blank"> Read more <span class="uk-icon">
+        experience possible.
-            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
+        By using the OpenAIRE portal you accept our use of cookies. <a
+        href="//ec.europa.eu/ipg/basics/legal/cookies/index_en.htm" target="_blank"> Read more <span class="uk-icon">
+            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right"
+                 ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03"
+                                     points="7 4 13 10 7 16"></polyline></svg>
             </span></a>
       </cookie-law>
-         <bottom *ngIf= "properties && isClient && showMenu && !community"   [grantAdvance]="false"  [properties]="properties" ></bottom>
+      <bottom *ngIf="properties && isClient && showMenu && !community" [grantAdvance]="false"
-         <bottom *ngIf= "properties && isClient  && showMenu && community" class="communityPanelBackground"  [showSocialButtons] = "true" [showMenuItems]="true"  [grantAdvance]="false" [showOpenaire]="true" [communityId]="community.id"  [menuItems]=bottomMenuItems [properties]="properties"    ></bottom>
+              [properties]="properties"></bottom>
+      <bottom *ngIf="properties && isClient  && showMenu && community" class="communityPanelBackground"
+              [showSocialButtons]="true" [showMenuItems]="true" [grantAdvance]="false" [showOpenaire]="true"
+              [communityId]="community.id" [menuItems]=bottomMenuItems [properties]="properties"></bottom>
     </div>
   `
 
@@ -56,6 +66,7 @@ export class AppComponent {
   communities = null;
   subscriberOfCommunities = false;
   managerOfCommunities = false;
+
   //  community: {id:string, name:string, logoUrl:string};
   constructor(private  route: ActivatedRoute, private propertiesService: EnvironmentSpecificService,
               private _communitiesService: CommunitiesService, private _subscribeService: SubscribeService,
@@ -84,7 +95,6 @@ export class AppComponent {
           communityId = ConnectHelper.getCommunityFromDomain(this.properties.domain);
           this.buildMenu(communityId);
         }
-
        if (typeof document !== 'undefined') {
           try {
             this.isClient = true;
@@ -124,7 +134,6 @@ export class AppComponent {
           }
 
 
-
           if (communityId && communityId != "" && com.communityId == communityId) {
             community = com;
             let isCommunityManager: boolean = false;
@@ -133,18 +142,24 @@ export class AppComponent {
             } else if (com.managers.indexOf(Session.getUserEmail()) != -1) {
               isCommunityManager = true;
             }
-                  this.community = {id: community.communityId, name: (community.shortTitle)?community.shortTitle:community.title, logoUrl:community.logoUrl};
+            this.community = {
+              id: community.communityId,
+              name: (community.shortTitle) ? community.shortTitle : community.title,
+              logoUrl: community.logoUrl
+            };
             this.menuItems = [];
 
             this.menuItems.push(
-                    {rootItem: new MenuItem("search","Search","","/search/find",false,[],["/search/find", "/search/find/publications", "/search/find/datasets", "/search/find/software", "/search/find/other", "/search/find/projects", "/search/find/dataproviders"],this.properties.environment!="development"?{}:{communityId:community.communityId}),
+              {
+                rootItem: new MenuItem("search", "Search", "", "/search/find", false, [], ["/search/find", "/search/find/publications", "/search/find/datasets", "/search/find/software", "/search/find/other", "/search/find/projects", "/search/find/dataproviders"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
                 items: [new MenuItem("", "Publications", "", "/search/find/publications", false, ["publication"], ["/search/find/publications"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
                   new MenuItem("", "Research Data", "", "/search/find/datasets", false, ["dataset"], ["/search/find/datasets"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
                   new MenuItem("", "Software", "", "/search/find/software", false, ["software"], ["/search/find/software"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
                   new MenuItem("", "Other Research Products", "", "/search/find/other", false, ["orp"], ["/search/find/other"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
                   new MenuItem("", "Projects", "", "/search/find/projects/", false, ["project"], ["/search/find/projects"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
                   new MenuItem("", "Content Providers", "", "/search/find/dataproviders", false, ["datasource"], ["/search/find/dataproviders"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
-                    ]});
+                ]
+              });
 
             this.menuItems.push({
               rootItem: new MenuItem("deposit", "Deposit", "", "/participate/deposit/learn-how", false, [], ["/participate/deposit/learn-how"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
@@ -177,7 +192,10 @@ export class AppComponent {
         }
         if (community == null) {
           this.menuItems = [];
-                this.menuItems.push({rootItem: new MenuItem("about","About","","/about/learn-how",false,[],null,{}), items: []});
+          this.menuItems.push({
+            rootItem: new MenuItem("about", "About", "", "/about/learn-how", false, [], null, {}),
+            items: []
+          });
           var myCommunities = [];
           /*if(this.managerOfCommunities){
             myCommunities.push( new MenuItem("","Managing communities","","/search/find/communities",false,[],[],{role:"%22manager%22"}))
@@ -193,8 +211,14 @@ export class AppComponent {
                 console.error("Error fetching your subscribed communities")
               });
           }*/
-                this.menuItems.push({rootItem: new MenuItem("communities","Communities","","/search/find/communities",false,[],null,{}), items: []});
+          this.menuItems.push({
-                this.menuItems.push({rootItem: new MenuItem("join","Join","","/contact-us",false,[],null,{}), items: []});
+            rootItem: new MenuItem("communities", "Communities", "", "/search/find/communities", false, [], null, {}),
+            items: []
+          });
+          this.menuItems.push({
+            rootItem: new MenuItem("join", "Join", "", "/contact-us", false, [], null, {}),
+            items: []
+          });
           /*if(this.managerOfCommunities || this.subscriberOfCommunities){
             let myCommunitiesMenu =   new MenuItem("myCommunities","My Communities","","",false,[],[],{});
             myCommunitiesMenu.setMarkAsActive(false);
@@ -202,8 +226,6 @@ export class AppComponent {
           }*/
 
 
-
-
           this.bottomMenuItems = [
             new MenuItem("", "About", "https://beta.openaire.eu/project-factsheets", "", false, [], [], {}),
             new MenuItem("", "News - Events", "https://beta.openaire.eu/news-events", "", false, [], [], {}),
@@ -222,7 +244,7 @@ export class AppComponent {
               ((this.properties.environment == "production") ? "https://admin.explore.openaire.eu" : "https://beta.admin.connect.openaire.eu") + "/dashboard?communityId=connect",
               "", false, [], [], {}))
           }
-                if(this.managerOfCommunities){
+          /*if(this.managerOfCommunities){
             this.userMenuItems.push( new MenuItem("","Managing communities","","/search/find/communities",false,[],[],{role:"%22manager%22"}))
           }
           if(Session.isLoggedIn()){
@@ -235,6 +257,10 @@ export class AppComponent {
               error => {
                 console.error("Error fetching your subscribed communities")
               });
+          }*/
+          if (Session.isLoggedIn()) {
+            this.userMenuItems.push(new MenuItem("my-communities", "My Communities", "",
+              "/myCommunities", false, [], [], {}));
           }
         } else {
           this.bottomMenuItems = [
@@ -244,7 +270,7 @@ export class AppComponent {
           if (this.properties.showContent) {
             this.bottomMenuItems.push(new MenuItem("", "Content Policy", "", "/content", false, [], [], {}));
           }
-              this.userMenuItems =[ new MenuItem("","My profile","","",false,[],[],{}),
+          this.userMenuItems = [ /*new MenuItem("","My profile","","",false,[],[],{}),*/
             new MenuItem("", "My links", "", "/myclaims", false, [], ["/myclaims"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
             new MenuItem("", "Invite users", "", "/invite", false, [], [], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
           ];

src/app/communities/communities.component.html

@@ -2,82 +2,7 @@
                [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-connect.png'" type="home"
                name="OpenAIRE Connect">
 </schema2jsonld>
-<div *ngIf="(managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0)"
-     class="banner-background image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color"
-     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
-     tm-header-transparent="light" tm-header-transparent-placeholder="">
-  <div class=" uk-section uk-padding-remove-bottom">
-    <div class="uk-position-cover"></div>
-    <div class="uk-position-relative uk-panel">
-      <div *ngIf="loading" class="uk-container uk-container-large uk-height-large">
-        <div class="uk-animation-fade uk-margin-top  uk-width-1-2" role="alert"><span
-          class="loading-gif  uk-align-center"></span></div>
-      </div>
-      <div *ngIf="!loading" class="uk-container uk-container-large">
-        <div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0"
-             class="uk-child-width-1-1@s uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid uk-height-match="target: .community; row: false">
-          <div>
-            <div *ngIf="managerOfCommunities.length > 0" class="uk-grid">
-              <h5 class="uk-width-1-1 uk-text-bold">You are managing</h5>
-              <div class="uk-width-1-1 uk-margin-small-top">
 <div
-                  class="uk-grid-match uk-grid-small  uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"
-                  uk-grid >
-                  <div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
-                    <div class="uk-padding-small uk-card uk-card-default uk-card-small communityCard"
-                         title="{{community.description}}">
-                      <browse-community [community]=community [showDescription]=false></browse-community>
-                    </div>
-                  </div>
-                </div>
-                <div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
-                  <a [queryParams]="{role: quote('manager')}" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
-                     routerLinkActive="router-link-active" routerLink="/search/find/communities">
-                    <div>View all ({{managerOfCommunities.length | number}}) ></div>
-                  </a>
-                </div>
-              </div>
-            </div>
-
-            <div class="uk-container uk-container-large uk-width-4-5">
-              <div *ngIf="subscriberErrorMessage" class="uk-animation-fade uk-alert uk-alert-warning" role="alert">
-                {{subscriberErrorMessage}}
-              </div>
-            </div>
-
-            <div *ngIf="subscriberOfCommunities.length > 0" class="uk-grid">
-              <h5 class="uk-width-1-1 uk-text-bold">You are subscribed to</h5>
-              <div class="uk-width-1-1 uk-margin-small-top">
-                <div
-                  class="uk-grid-match uk-grid-small uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"
-                  uk-grid>
-                  <div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
-                    <div class="uk-padding-small  uk-card uk-card-small uk-card-default communityCard"
-                         [attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
-                      <browse-community [community]=community [showDescription]=false></browse-community>
-                    </div>
-                  </div>
-                </div>
-                <div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
-                  <a [queryParams]="{status: quote('subscribed')}" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
-                     routerLinkActive="router-link-active" routerLink="/search/find/communities">
-                    <div>View all ({{subscriberOfCommunities.length | number}}) ></div>
-                  </a>
-                </div>
-              </div>
-
-            </div>
-
-          </div>
-          <div class="uk-text-center">
-            <img width="296" height="285" src="../../assets/connect-assets/banner/login.png">
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-<div *ngIf="(managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0)"
      class="image-front-topbar"
      uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
      tm-header-transparent="light" tm-header-transparent-placeholder="">

src/app/communities/communities.component.ts

@@ -7,7 +7,6 @@ import {SubscribeService} from '../openaireLibrary/utils/subscribe/subscribe.ser
 import {CommunityInfo} from '../openaireLibrary/connect/community/communityInfo';
 
 import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
-import {Session} from '../openaireLibrary/login/utils/helper.class';
 import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
 
 import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
@@ -24,11 +23,7 @@ export class CommunitiesComponent {
   public piwiksub: any;
 
   public pageTitle = "OpenAIRE"
-  // TODO remove initiatives
   public researchCommunities = [];
-  public researchInitiatives = [];
-  public subscriberOfCommunities = [];
-  public managerOfCommunities = [];
   public gifs: { "gif": string, "header": string, "text" }[] = [];
   public pageContents = null;
   public divContents = null;
@@ -102,9 +97,6 @@ export class CommunitiesComponent {
     this.subscriberErrorMessage = "";
 
     this.researchCommunities = [];
-    this.researchInitiatives = [];
-    this.subscriberOfCommunities = [];
-    this.managerOfCommunities = [];
 
     this._communitiesService.getCommunitiesState().subscribe(
       communitiesResults => {
@@ -115,83 +107,18 @@ export class CommunitiesComponent {
           this.status = this.errorCodes.DONE;
           return;
         }
-        //this.communitiesResults = communitiesResults;
-        //this.communitiesToShow = this.communitiesResults.slice();
-        //console.log(communitiesResults);
         this.sort(communitiesResults);
-
-        var subscribedLoading = communitiesResults.length;
-        var mail = Session.getUserEmail();
         communitiesResults.forEach((community, index) => {
           let showCommunity: boolean = true;
-          let isManager: boolean = false;
+          if (community['status'] == "hidden" || community['status'] == "manager") {
-          let isSubscriber: boolean = false;
-
-          if (community['status'] == "hidden") {
-            showCommunity = false;
-          } else {
-            if (mail == null && community['status'] == "manager") { // no user
-              showCommunity = false;
-            } else if (Session.isCommunityCurator() || Session.isPortalAdministrator()) {
-              isManager = true;
-            } else if (community.managers.indexOf(mail) != -1) {
-              isManager = true;
-            } else if (community['status'] == "manager") {
             showCommunity = false;
           }
-          }
-
           if (showCommunity) {
-            // TODO remove
-            /*if(community.type == "community"){
             this.researchCommunities.push(community);
-            } else if(community.type == "ri") {
-              this.researchInitiatives.push(community);
-            }*/
-            this.researchCommunities.push(community);
-            if (isManager) {
-              community.isManager = true;
-              this.managerOfCommunities.push(community);
           }
-          }
-
           this.status = this.errorCodes.DONE;
-
-          if (mail != null && showCommunity) {
-            this._subscribeService.isSubscribedToCommunity(this.properties, community.communityId, mail).subscribe(
-              res => {
-                isSubscriber = res;
-                if (isSubscriber) {
-                  community.isSubscribed = true;
-                  if (isManager) {
-                    this.subscriberOfCommunities.push(community);
-                  } else {
-                    this.subscriberOfCommunities.unshift(community);
-                  }
-                }
-
-                subscribedLoading--;
-                if (subscribedLoading == 0) {
-                  this.loading = false;
-                }
-              },
-              error => {
-                // if(this.properties.environment == "development") {
-                //   this.subscriberErrorMessage = "Error fetching communities you are subscribed to";
-                // }
-                this.handleError("Error getting response if email: " + mail + " is subscribed to community with id: " + community.communityId, error);
-                subscribedLoading--;
-                if (subscribedLoading == 0) {
-                  this.loading = false;
-                }
         });
-          } else {
-            subscribedLoading--;
-            if (subscribedLoading == 0) {
         this.loading = false;
-            }
-          }
-        });
       },
       error => {
         this.status = this.handleError("Error getting communities", error);

src/app/communities/communities.module.ts

@@ -19,6 +19,7 @@ import {GifSliderModule} from "../openaireLibrary/utils/gif-slider/gif-slider.mo
 import {OtherPortalsModule} from "../openaireLibrary/sharedComponents/other-portals/other-portals.module";
 import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
 import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+
 @NgModule({
   imports: [
     CommonModule, FormsModule, RouterModule,

src/app/my-communities/my-communities-routing.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+import {MyCommunitiesComponent} from "./my-communities.component";
+import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
+import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {path: '', component: MyCommunitiesComponent, canActivate: [LoginGuard, IsRouteEnabled], canDeactivate: [PreviousRouteRecorder]}
+
+    ])
+  ]
+})
+export class MyCommunitiesRoutingModule {
+}

src/app/my-communities/my-communities.component.html

@@ -0,0 +1,114 @@
+<schema2jsonld [URL]="properties.baseLink"
+               [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-connect.png'" type="home"
+               name="OpenAIRE Connect">
+</schema2jsonld>
+<div
+     class="banner-background image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color"
+     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+     tm-header-transparent="light" tm-header-transparent-placeholder="">
+  <div class=" uk-section uk-padding-remove-bottom">
+    <div class="uk-position-cover"></div>
+    <div class="uk-position-relative uk-panel">
+      <div *ngIf="loading" class="uk-container uk-container-large uk-height-large">
+        <div class="uk-animation-fade uk-margin-top  uk-width-1-2" role="alert"><span
+          class="loading-gif  uk-align-center"></span></div>
+      </div>
+      <div *ngIf="!loading" class="uk-container uk-container-large">
+        <div class="uk-text-center uk-text-bold uk-h2 uk-margin-bottom">My Communities</div>
+        <div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0"
+             class="uk-child-width-1-1@s uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid uk-height-match="target: .community; row: false">
+          <div>
+            <div *ngIf="managerOfCommunities.length > 0" class="uk-grid">
+              <h5 class="uk-width-1-1 uk-text-bold">You are managing</h5>
+              <div class="uk-width-1-1 uk-margin-small-top">
+                <div
+                  class="uk-grid-match uk-grid-small  uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"
+                  uk-grid >
+                  <div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
+                    <div class="uk-padding-small uk-card uk-card-default uk-card-small communityCard"
+                         title="{{community.description}}">
+                      <browse-community [community]=community [showDescription]=false></browse-community>
+                    </div>
+                  </div>
+                </div>
+                <div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
+                  <a [queryParams]="{role: quote('manager')}" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
+                     routerLinkActive="router-link-active" routerLink="/search/find/communities">
+                    <div>View all ({{managerOfCommunities.length | number}}) ></div>
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <div class="uk-container uk-container-large uk-width-4-5">
+              <div *ngIf="subscriberErrorMessage" class="uk-animation-fade uk-alert uk-alert-warning" role="alert">
+                {{subscriberErrorMessage}}
+              </div>
+            </div>
+            <div *ngIf="subscriberOfCommunities.length > 0" class="uk-grid">
+              <h5 class="uk-width-1-1 uk-text-bold">You are subscribed to</h5>
+              <div class="uk-width-1-1 uk-margin-small-top">
+                <div
+                  class="uk-grid-match uk-grid-small uk-child-width-1-3@s uk-child-width-1-2 uk-text-center"
+                  uk-grid>
+                  <div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
+                    <div class="uk-padding-small  uk-card uk-card-small uk-card-default communityCard"
+                         [attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
+                      <browse-community [community]=community [showDescription]=false></browse-community>
+                    </div>
+                  </div>
+                </div>
+                <div *ngIf="subscriberOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
+                  <a [queryParams]="{status: quote('subscribed')}" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
+                     routerLinkActive="router-link-active" routerLink="/search/find/communities">
+                    <div>View all ({{subscriberOfCommunities.length | number}}) ></div>
+                  </a>
+                </div>
+              </div>
+
+            </div>
+
+          </div>
+          <div class="uk-text-center">
+            <img width="200" height="185" src="../../assets/connect-assets/banner/login.png">
+          </div>
+        </div>
+        <div *ngIf="managerOfCommunities.length === 0 && subscriberOfCommunities.length === 0"
+             class="uk-child-width-1-1" uk-grid>
+          <div class="uk-flex uk-flex-center uk-margin-bottom">
+            <div class="uk-card uk-card-default uk-box-shadow-medium uk-width-1-2@m">
+              <div class="uk-card-body uk-text-bold uk-text-center ">
+                You are not yet subscribed in any Communities.<br>
+                Start by browsing and subscribing in those that you are interested in.
+              </div>
+            </div>
+          </div>
+          <div>
+            <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
+          </div>
+          <div *ngIf="!loading && researchCommunities.length > 0">
+            <div class="uk-text-bold uk-h5">Community Gateways in Action</div>
+            <div [class]="(researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
+              <div
+                class="uk-grid-match uk-grid-medium  uk-child-width-1-5@m uk-child-width-1-2 uk-text-center"
+                uk-grid uk-height-match=".community">
+                <div *ngFor="let community of researchCommunities.slice(0, 5); let i = index">
+                  <div class="uk-padding-small uk-card uk-card-default communityCard">
+                    <browse-community [community]=community></browse-community>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+            <div class="uk-text-right uk-margin-top">
+              <a *ngIf="researchCommunities.length > 5" class="portal-link uk-text-uppercase uk-text-bold uk-text-small"
+                 routerLinkActive="router-link-active" routerLink="/search/find/communities">
+                Browse All >
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/my-communities/my-communities.component.ts

@@ -0,0 +1,226 @@
+import {Component} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Meta, Title} from '@angular/platform-browser';
+import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
+import {CommunitiesService} from '../openaireLibrary/connect/communities/communities.service';
+import {SubscribeService} from '../openaireLibrary/utils/subscribe/subscribe.service';
+import {CommunityInfo} from '../openaireLibrary/connect/community/communityInfo';
+
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {Session} from '../openaireLibrary/login/utils/helper.class';
+import {StringUtils} from '../openaireLibrary/utils/string-utils.class';
+
+import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
+import {ErrorMessagesComponent} from '../openaireLibrary/utils/errorMessages.component';
+import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+
+@Component({
+  selector: 'my-communities',
+  templateUrl: 'my-communities.component.html',
+})
+
+export class MyCommunitiesComponent {
+  public piwiksub: any;
+
+  public pageTitle = "OpenAIRE"
+  public subscriberOfCommunities = [];
+  public managerOfCommunities = [];
+  public researchCommunities = [];
+  public pageContents = null;
+  public divContents = null;
+  // Message variables
+  public status: number;
+  public loading: boolean = true;
+  public subscriberErrorMessage: string = "";
+  public errorCodes: ErrorCodes;
+  private errorMessages: ErrorMessagesComponent;
+
+  properties: EnvProperties;
+
+  constructor(
+    private route: ActivatedRoute,
+    private _router: Router,
+    private _meta: Meta,
+    private _title: Title,
+    private _piwikService: PiwikService,
+    private _communitiesService: CommunitiesService,
+    private _subscribeService: SubscribeService,
+    private helper: HelperService,
+    private seoService: SEOService) {
+
+    var description = "OpenAIRE - Connect, Community Dashboard, research community " +
+      "| My managing and subscribed to Communities";
+    var title = "OpenAIRE - Connect | My Communities";
+
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+    this._meta.updateTag({content: title}, "property='og:title'");
+    this._title.setTitle(title);
+
+    this.errorCodes = new ErrorCodes();
+    this.errorMessages = new ErrorMessagesComponent();
+    this.status = this.errorCodes.LOADING;
+  }
+
+  public ngOnInit() {
+    this.route.data
+      .subscribe((data: { envSpecific: EnvProperties }) => {
+        this.properties = data.envSpecific;
+        var url = data.envSpecific.baseLink + this._router.url;
+        this.seoService.createLinkForCanonicalURL(url, false);
+        this._meta.updateTag({content: url}, "property='og:url'");
+        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+          this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect", this.properties.piwikSiteId).subscribe();
+        }
+        this.getCommunities();
+        //this.getDivContents();
+        //this.getPageContents();
+      });
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this._router.url, this.properties, 'connect').subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+
+  public getCommunities() {
+    this.loading = true;
+    this.status = this.errorCodes.LOADING;
+    this.subscriberErrorMessage = "";
+
+    this.subscriberOfCommunities = [];
+    this.managerOfCommunities = [];
+    this.researchCommunities = [];
+
+    this._communitiesService.getCommunitiesState().subscribe(
+      communitiesResults => {
+        if(!communitiesResults){
+          return;
+        }
+        if(communitiesResults.length == 0) {
+          this.status = this.errorCodes.DONE;
+          return;
+        };
+        this.sort(communitiesResults);
+
+        var subscribedLoading = communitiesResults.length;
+        var mail = Session.getUserEmail();
+        communitiesResults.forEach((community, index) => {
+          let showCommunity: boolean = true;
+          let isManager: boolean = false;
+          let isSubscriber: boolean = false;
+
+          if (community['status'] == "hidden") {
+            showCommunity = false;
+          } else {
+            if (mail == null && community['status'] == "manager") { // no user
+              showCommunity = false;
+            } else if (Session.isCommunityCurator() || Session.isPortalAdministrator()) {
+              isManager = true;
+            } else if (community.managers.indexOf(mail) != -1) {
+              isManager = true;
+            } else if (community['status'] == "manager") {
+              showCommunity = false;
+            }
+          }
+
+          if (showCommunity) {
+            this.researchCommunities.push(community);
+            if (isManager) {
+              community.isManager = true;
+              this.managerOfCommunities.push(community);
+            }
+          }
+
+          this.status = this.errorCodes.DONE;
+
+          if (mail != null && showCommunity) {
+            this._subscribeService.isSubscribedToCommunity(this.properties, community.communityId, mail).subscribe(
+              res => {
+                isSubscriber = res;
+                if (isSubscriber) {
+                  community.isSubscribed = true;
+                  if (isManager) {
+                    this.subscriberOfCommunities.push(community);
+                  } else {
+                    this.subscriberOfCommunities.unshift(community);
+                  }
+                }
+
+                subscribedLoading--;
+                if (subscribedLoading == 0) {
+                  this.loading = false;
+                }
+              },
+              error => {
+                this.handleError("Error getting response if email: " + mail + " is subscribed to community with id: " + community.communityId, error);
+                subscribedLoading--;
+                if (subscribedLoading == 0) {
+                  this.loading = false;
+                }
+              });
+          } else {
+            subscribedLoading--;
+            if (subscribedLoading == 0) {
+              this.loading = false;
+            }
+          }
+        });
+      },
+      error => {
+        this.status = this.handleError("Error getting communities", error);
+        this.loading = false;
+      }
+    );
+  }
+
+  private sort(results: CommunityInfo[]) {
+    results.sort((left, right): number => {
+      if (!right.date || left.date > right.date) {
+        return -1;
+      } else if (!left.date || left.date < right.date) {
+        return 1;
+      } else {
+        if (left.title > right.title) {
+          return 1;
+        } else if (left.title < right.title) {
+          return -1;
+        } else {
+          return 0;
+        }
+      }
+    })
+  }
+
+  public quote(param: string): string {
+    return StringUtils.quote(param);
+  }
+
+  public ngOnDestroy() {
+    if (this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private handleError(message: string, error): number {
+    var code = "";
+    if (!error.status) {
+      var error = error.json();
+      code = error.code;
+    } else {
+      code = error.status;
+    }
+
+    console.error("Communities (component): " + message, error);
+
+    return this.errorMessages.getErrorCode(code);
+  }
+}

src/app/my-communities/my-communities.module.ts

@@ -0,0 +1,38 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {ManageModule} from '../openaireLibrary/utils/manage/manage.module';
+
+import {MyCommunitiesComponent} from './my-communities.component';
+import {PreviousRouteRecorder} from '../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
+
+import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
+import {ErrorMessagesModule} from '../openaireLibrary/utils/errorMessages.module';
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
+import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
+import {BrowseCommunityModule} from "../communities/browseCommunity/browse-community.module";
+import {MyCommunitiesRoutingModule} from "./my-communities-routing.module";
+import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule, HelperModule,
+    ManageModule, ErrorMessagesModule, BrowseCommunityModule, Schema2jsonldModule, SEOServiceModule,
+    MyCommunitiesRoutingModule
+  ],
+  declarations: [
+    MyCommunitiesComponent
+  ],
+  providers: [
+    LoginGuard, PreviousRouteRecorder,
+    PiwikService, IsRouteEnabled
+  ],
+  exports: [
+    MyCommunitiesComponent
+  ]
+})
+export class MyCommunitiesModule {
+}