(fix): signup modal issues closes #2071

closes #2090

src/app/modules/modals/signup/signup-on-scroll.ts

-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 
 import { Session } from '../../../services/session';
 import { ScrollService } from '../../../services/ux/scroll';
+import { SignupModal } from './signup';
+import { Storage } from '../../../services/storage';
 
 @Component({
  selector: 'm-modal-signup-on-scroll',
  template: `
- <m-modal-signup open="true" *ngIf="open"></m-modal-signup>
+ <m-modal-signup (onClose)="onModalClosed()" #modal></m-modal-signup>
  `,
 })
-export class SignupOnScrollModal {
+export class SignupOnScrollModal implements OnInit, OnDestroy {
  open: boolean = false;
  route: string = '';
  scroll_listener;
@@ -21,10 +23,13 @@ export class SignupOnScrollModal {
 
  routerSubscription: Subscription;
 
+ @ViewChild('modal', { static: true }) modal: SignupModal;
+
  constructor(
  public session: Session,
  public router: Router,
- public scroll: ScrollService
+ public scroll: ScrollService,
+ private storage: Storage
  ) {}
 
  ngOnInit() {
@@ -66,9 +71,13 @@ export class SignupOnScrollModal {
  default:
  this.scroll_listener = this.scroll.listen(e => {
  if (this.scroll.view.scrollTop > 20) {
- if (window.localStorage.getItem('hideSignupModal'))
+ if (window.localStorage.getItem('hideSignupModal')) {
  this.open = false;
- else this.open = true;
+ this.modal.open = false;
+ } else {
+ this.open = true;
+ this.modal.open = true;
+ }
  }
  }, 100);
  }
@@ -90,4 +99,11 @@ export class SignupOnScrollModal {
  this.scroll.unListen(this.scroll_listener);
  }
  }
+
+ onModalClosed() {
+ if (this.open) {
+ this.storage.set('hideSignupModal', '1');
+ this.open = false;
+ }
+ }
 }

src/app/modules/modals/signup/signup.html

@@ -7,10 +7,7 @@
  class="mdl-card__title"
  [hidden]="display == 'onboarding' || display == 'categories'"
  >
- <img
- src="{{ minds.cdn_assets_url }}assets/logos/logo.svg"
- (click)="close()"
- />
+ <img [src]="logo" (click)="close()" />
  </div>
 
  <!-- Initial Display -->

src/app/modules/modals/signup/signup.ts

@@ -3,6 +3,8 @@ import {
  ChangeDetectorRef,
  NgZone,
  ApplicationRef,
+ Output,
+ EventEmitter,
 } from '@angular/core';
 import { Location } from '@angular/common';
 import { Router } from '@angular/router';
@@ -11,6 +13,7 @@ import { SignupModalService } from './service';
 import { Session } from '../../../services/session';
 import { AnalyticsService } from '../../../services/analytics';
 import { LoginReferrerService } from '../../../services/login-referrer.service';
+import { SiteService } from '../../../common/services/site.service';
 
 @Component({
  selector: 'm-modal-signup',
@@ -18,6 +21,7 @@ import { LoginReferrerService } from '../../../services/login-referrer.service';
  templateUrl: 'signup.html',
 })
 export class SignupModal {
+ @Output('onClose') onClosed: EventEmitter<any> = new EventEmitter<any>();
  open: boolean = false;
  route: string = '';
  minds = window.Minds;
@@ -27,6 +31,12 @@ export class SignupModal {
  display: string = 'initial';
  overrideOnboarding: boolean = false;
 
+ get logo() {
+ return this.site.isProDomain
+ ? `${this.minds.cdn_url}fs/v1/thumbnail/${this.site.pro.logo_guid}/master`
+ : `${this.minds.cdn_assets_url}assets/logos/logo.svg`;
+ }
+
  constructor(
  public session: Session,
  private router: Router,
@@ -36,13 +46,14 @@ export class SignupModal {
  private zone: NgZone,
  private applicationRef: ApplicationRef,
  private loginReferrer: LoginReferrerService,
- private analyticsService: AnalyticsService
+ private analyticsService: AnalyticsService,
+ private site: SiteService
  ) {
  this.listen();
  this.service.isOpen.subscribe({
  next: open => {
  this.open = open;
- //hack: nasty ios work around
+ // hack: nasty ios work around
  this.applicationRef.tick();
  this.listen();
  },
@@ -66,6 +77,7 @@ export class SignupModal {
  break;
  default:
  this.service.close();
+ this.onClosed.emit();
  }
  }
 
@@ -166,6 +178,7 @@ export class SignupModal {
 
  onClose(e: boolean) {
  this.service.close();
+ this.onClosed.emit();
  if (
  this.display === 'login' ||
  this.display === 'register' ||

src/app/modules/pro/channel/channel.component.html

@@ -122,3 +122,4 @@
 </div>
 
 <m-overlay-modal #overlayModal></m-overlay-modal>
+<m-modal-signup-on-scroll></m-modal-signup-on-scroll>

src/app/modules/pro/channel/channel.component.scss

@@ -60,6 +60,21 @@ m-pro--channel {
  minds-button-boost {
  display: none !important;
  }
+
+ m-modal-signup {
+ m-modal {
+ z-index: 9999999;
+
+ .m-modal-container .mdl-card {
+ background-color: var(--m-pro--transparent-background-color);
+ color: var(--m-pro--text-color);
+
+ .m-modal-signup-apps {
+ display: none;
+ }
+ }
+ }
+ }
 }
 
 @media screen and (max-width: $max-mobile) {

src/app/modules/pro/channel/channel.component.ts

@@ -25,7 +25,7 @@ import { SessionsStorageService } from '../../../services/session-storage.servic
 import { SiteService } from '../../../common/services/site.service';
 
 @Component({
- providers: [ProChannelService, OverlayModalService],
+ providers: [ProChannelService, OverlayModalService, SignupModalService],
  selector: 'm-pro--channel',
  templateUrl: 'channel.component.html',
  changeDetection: ChangeDetectionStrategy.Default,

src/app/modules/pro/pro.module.ts

@@ -34,6 +34,7 @@ import { MediaEditComponent } from '../media/edit/edit.component';
 import { BlogViewInfinite } from '../blogs/view/infinite';
 import { BlogEdit } from '../blogs/edit/edit';
 import { CanDeactivateGuardService } from '../../services/can-deactivate-guard';
+import { ModalsModule } from '../modals/modals.module';
 
 const routes: Routes = [
  {
@@ -140,6 +141,7 @@ export const PRO_DOMAIN_ROUTES = [
  WireModule,
  VideoModule,
  AuthModule,
+ ModalsModule,
  ],
  providers: [ProService],
  declarations: [