feat: newsletter improvment

src/components/navbar/navbar.component.ts

@@ -43,7 +43,9 @@ export const NavbarComponent: ng.IComponentOptions = {
     const vm = this;
 
     vm.refreshUser = (user) => {
-      vm.profileConfirmed = (user && !user.firstLogin) || $window.localStorage.getItem('profileConfirmed');
+      vm.newsletterProposed = (user && !user.firstLogin)
+        || !!$window.localStorage.getItem('newsletterProposed')
+        || !Constants.org.settings.newsletter.enabled;
     };
 
     vm.$state = $state;

src/components/navbar/navbar.html

@@ -27,9 +27,9 @@
              ng-if="$ctrl.displayContextualDocumentationButton">
     <ng-md-icon icon="live_help" gv-theme-element="portal.navbar.help"></ng-md-icon>
   </md-button>
-  <portal-notifications user="$ctrl.graviteeUser" ng-if="$ctrl.graviteeUser.id && $ctrl.profileConfirmed"></portal-notifications>
+  <portal-notifications user="$ctrl.graviteeUser" ng-if="$ctrl.graviteeUser.id && $ctrl.newsletterProposed"></portal-notifications>
 
-  <md-menu ng-if="$ctrl.graviteeUser.id && $ctrl.profileConfirmed" md-offset="0 54">
+  <md-menu ng-if="$ctrl.graviteeUser.id && $ctrl.newsletterProposed" md-offset="0 54">
     <md-button class="gv-navbar-user-link" ng-click="$mdMenu.open($event)" aria-label="Open user menu">
       <gravitee-identity-picture ng-if="$ctrl.hasAlert()"
         image-id="'navbar'"

src/components/newsletter-subcription/_newsletter-subscription.scss → src/components/newsletter-subcription/_newsletter-reminder.scss

@@ -1,10 +1,10 @@
-gv-newsletter-subscription.newsletter-open {
+gv-newsletter-reminder.newsletter-open {
   opacity: 1;
   visibility: visible;
   transition: all 350ms ease-in-out 1s;
 }
 
-gv-newsletter-subscription {
+gv-newsletter-reminder {
   position: fixed;
   padding: 1rem;
   border: 1px solid #BFBFBF;

src/components/newsletter-subcription/newsletter-subscription.component.ts → src/components/newsletter-subcription/newsletter-reminder.component.ts

@@ -17,8 +17,8 @@ import { IScope } from 'angular';
 import UserService from '../../services/user.service';
 import NotificationService from '../../services/notification.service';
 
-const NewsletterSubscriptionComponent: ng.IComponentOptions = {
-  template: require('./newsletter-subscription.html'),
+const NewsletterReminderComponent: ng.IComponentOptions = {
+  template: require('./newsletter-reminder.html'),
   bindings: {},
   controller: function(
     $element,
@@ -94,4 +94,4 @@ const NewsletterSubscriptionComponent: ng.IComponentOptions = {
   }
 };
 
-export default NewsletterSubscriptionComponent;
+export default NewsletterReminderComponent;

src/index.html

@@ -117,7 +117,7 @@
 
 <gravitee-navbar></gravitee-navbar>
 <div flex ui-view></div>
-<gv-newsletter-subscription></gv-newsletter-subscription>
+<gv-newsletter-reminder></gv-newsletter-reminder>
 <script src="webcomponents/webcomponents-loader.js"></script>
 </body>
 </html>

src/index.route.ts

@@ -154,10 +154,10 @@ function routerConfig($stateProvider: StateProvider, $urlServiceProvider: UrlSer
         );
       }
     })
-    .state('confirmProfile', {
-      url: '/confirmProfile',
-      template: require('./user/confirmProfile/confirmProfile.html'),
-      controller: 'ConfirmProfileController',
+    .state('newsletter', {
+      url: '/newsletter',
+      template: require('./user/newsletter/newsletter-subscription.html'),
+      controller: 'NewsletterSubscriptionController',
       controllerAs: '$ctrl'
     });
 

src/index.scss

@@ -30,7 +30,7 @@ $backgroundColor: #fdfdfd;
 @import 'components/error/error';
 @import 'components/import/import-api';
 @import 'components/navbar/navbar';
-@import 'components/newsletter-subcription/newsletter-subscription';
+@import 'src/components/newsletter-subcription/newsletter-reminder';
 @import 'components/notifications/notifications';
 @import 'components/sidenav/sidenav';
 @import 'components/user-autocomplete/user-autocomplete';
@@ -57,6 +57,7 @@ $backgroundColor: #fdfdfd;
 @import 'management/tasks/tasks';
 
 @import 'user/user';
+@import 'src/user/newsletter/newsletter-subscription';
 @import 'user/login/login';
 
 html {

src/management/management.module.ts

@@ -471,7 +471,7 @@ import AnalyticsDashboardComponent from './configuration/analytics/dashboard/das
 import TokenService from '../services/token.service';
 import DialogGenerateTokenController from '../user/token/generateTokenDialog.controller';
 // Newsletter
-import NewsletterSubscriptionComponent from '../components/newsletter-subcription/newsletter-subscription.component';
+import NewsletterReminderComponent from '../components/newsletter-subcription/newsletter-reminder.component';
 
 
 // User-Autocomplete
@@ -501,7 +501,7 @@ import ThemeComponent from './configuration/theme/theme.component';
 import ThemeService from '../services/theme.service';
 
 import authenticationConfig from '../authentication/authentication.config';
-import ConfirmProfileController from '../user/confirmProfile/confirmProfile.controller';
+import NewsletterSubscriptionController from '../user/newsletter/newsletter-subscription.controller';
 import CustomUserFieldsComponent from './configuration/custom-user-fields/custom-user-fields.component';
 import CustomUserFieldsController from './configuration/custom-user-fields/custom-user-fields.controller';
 import CustomUserFieldsService from '../services/custom-user-fields.service';
@@ -736,7 +736,7 @@ const graviteeManagementModule = angular.module('gravitee-management', [uiRouter
   graviteeManagementModule.controller('RegistrationController', RegistrationController);
   graviteeManagementModule.controller('ConfirmController', ConfirmController);
   graviteeManagementModule.controller('ResetPasswordController', ResetPasswordController);
-  graviteeManagementModule.controller('ConfirmProfileController', ConfirmProfileController);
+  graviteeManagementModule.controller('NewsletterSubscriptionController', NewsletterSubscriptionController);
   graviteeManagementModule.controller('DialogSubscriptionRejectController', DialogSubscriptionRejectController);
   graviteeManagementModule.controller('DialogSubscriptionAcceptController', DialogSubscriptionAcceptController);
   graviteeManagementModule.controller('DialogSubscriptionCreateController', DialogSubscriptionCreateController);
@@ -971,7 +971,7 @@ const graviteeManagementModule = angular.module('gravitee-management', [uiRouter
   graviteeManagementModule.controller('DialogConfigureLoggingEditorController', DialogConfigureLoggingEditorController);
 
   graviteeManagementModule.component('gvAudit', AuditComponent);
-  graviteeManagementModule.component('gvNewsletterSubscription', NewsletterSubscriptionComponent);
+  graviteeManagementModule.component('gvNewsletterReminder', NewsletterReminderComponent);
   graviteeManagementModule.component('gvContextualDoc', ContextualDocComponent);
   graviteeManagementModule.controller('ContextualDocController', ContextualDocController);
 

src/management/management.run.ts

@@ -24,13 +24,20 @@ function runBlock($rootScope, $window, $http, $mdSidenav, $transitions, $state,
 
   $transitions.onStart({
     to: (state) => state.name !== 'login' && state.name !== 'registration'
-      && state.name !== 'confirm' && state.name !== 'confirmProfile' && state.name !== 'resetPassword'
+      && state.name !== 'confirm' && state.name !== 'newsletter' && state.name !== 'resetPassword'
   }, (trans) => {
     if (!UserService.isAuthenticated()) {
       return trans.router.stateService.target('login');
     }
-    if (UserService.isAuthenticated() && UserService.currentUser.firstLogin && !$window.localStorage.getItem('profileConfirmed')) {
-      return trans.router.stateService.target('confirmProfile');
+    if (UserService.isAuthenticated()
+      && UserService.currentUser.firstLogin
+      && Constants.org.settings.newsletter.enabled
+      && !$window.localStorage.getItem('newsletterProposed')) {
+      return trans.router.stateService.target('newsletter');
+    } else {
+      if (!Constants.org.settings.newsletter.enabled) {
+        $rootScope.$broadcast('graviteeUserRefresh', { user: UserService.currentUser, refresh: true });
+      }
     }
   });
 

src/services/user.service.ts

@@ -234,7 +234,7 @@ class UserService {
     this.isLogout = true;
     this.$window.localStorage.removeItem('satellizer_token');
     this.$cookies.remove('Auth-Graviteeio-APIM');
-    this.$window.localStorage.removeItem('profileConfirmed');
+    this.$window.localStorage.removeItem('newsletterProposed');
   }
 
   currentUserPicture(): string {

src/user/login/login.controller.ts

@@ -92,7 +92,7 @@ class LoginController {
   loginSuccess(user: User) {
     this.$rootScope.$broadcast('graviteeUserRefresh', { 'user': user });
     const redirectUri = this.getRedirectUri();
-    if (redirectUri) {
+    if (redirectUri && !redirectUri.includes('/newsletter')) {
       this.$window.location.href = redirectUri;
     } else {
       let route = this.RouterService.getLastRoute();

src/user/newsletter/_newsletter-subscription.scss

@@ -0,0 +1,12 @@
+.newsletter-subscription-page {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

src/user/newsletter/newsletter-subscription.controller.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import UserService from '../../services/user.service';
+import '@gravitee/ui-components/wc/gv-newsletter-subscription';
+
+class NewsletterSubscriptionController {
+
+  newsletterPage;
+
+  constructor(private $state,
+              private $scope,
+              public UserService: UserService,
+              private NotificationService,
+              Constants,
+              private $window,
+              private $rootScope) {
+    'ngInject';
+
+    $scope.user = UserService.currentUser;
+
+    this.newsletterPage = document.querySelector('gv-newsletter-subscription');
+    this.newsletterPage.addEventListener('gv-newsletter-subscription:subscribe', this.onSubscribe.bind(this));
+    this.newsletterPage.addEventListener('gv-newsletter-subscription:skip', this.onSkip.bind(this));
+    this.newsletterPage.emailDisabled = !!$scope.user.email;
+  }
+
+  onSubscribe({ detail } ) {
+    if (detail && detail.trim() !== '') {
+      this.UserService.subscribeNewsletter(detail).then((user) => {
+        this.NotificationService.show('Your newsletter preference has been saved.');
+        this._updateState();
+      });
+    }
+  }
+
+  onSkip() {
+    this._updateState();
+  }
+
+  _updateState() {
+    this.$window.localStorage.setItem('newsletterProposed', true);
+    this.$rootScope.$broadcast('graviteeUserRefresh', { user: this.$scope.user, refresh: true });
+    this.$state.go('management');
+  }
+}
+
+export default NewsletterSubscriptionController;

src/user/newsletter/newsletter-subscription.html

@@ -0,0 +1,22 @@
+<!--
+
+    Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+<md-content class="gravitee-no-sidenav-container" flex>
+  <gv-newsletter-subscription class="newsletter-subscription-page"
+    ng-attr-email="{{user.email}}"
+  ></gv-newsletter-subscription>
+</md-content>