src/app/common/components/button/button.component.scss

@@ -43,15 +43,6 @@ minds-button {
  }
 }
 
-a.m-link-btn {
- display: inline-block;
- padding: 8px !important;
- line-height: 1.2;
- height: auto;
- text-decoration: none;
- font-weight: inherit;
-}
-
 .m-btn--slim {
  height: 32px;
 }

src/app/interfaces/entities.ts

@@ -69,7 +69,7 @@ export interface MindsUser {
  tags?: Array<string>;
  toaster_notifications?: boolean;
  pro?: boolean;
- pro_settings?: { styles?: { [key: string]: string }, [key: string]: string | { [key: string]: string } };
+ pro_settings?: { [key: string]: string };
 }
 
 export interface MindsGroup {

src/app/modules/channels/sidebar/sidebar.html

@@ -135,18 +135,6 @@
  <span [hidden]="!editing" i18n="@@M__ACTION__SAVE">Save</span>
  </button>
  </div>
- <ng-container *ngIf="session.getLoggedInUser()?.guid == user.guid">
- <a *ngIf="!user.pro" class="m-btn m-link-btn m-btn--with-icon m-btn--slim m-btn--action" routerLink="/pro">
- <i class="material-icons">business_center</i>
- <span i18n>Become Pro</span>
- </a>
-
- <a *ngIf="user.pro" class="m-btn m-link-btn m-btn--with-icon m-btn--slim" routerLink="/pro/settings">
- <i class="material-icons">business_center</i>
- <span i18n>Pro Settings</span>
- </a>
- </ng-container>
-
  <minds-button-boost *ngIf="session.getLoggedInUser().guid == user.guid" [object]="user"></minds-button-boost>
  <m-channel--badges [user]="user"></m-channel--badges>
  </div>

src/app/modules/newsfeed/newsfeed.module.ts

@@ -92,7 +92,6 @@ const routes: Routes = [
  NewsfeedBoostRotatorComponent,
  NewsfeedEntityComponent,
  NewsfeedTilesComponent,
- NewsfeedComponent,
  ],
  entryComponents: [
  NewsfeedComponent,

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

@@ -14,7 +14,7 @@
  <a [routerLink]="['/pro', channel.username, 'images']" routerLinkActive="active" i18n>Images</a>
  <a [routerLink]="['/pro', channel.username, 'articles']" routerLinkActive="active" i18n>Articles</a>
  <a [routerLink]="['/pro', channel.username, 'groups']" routerLinkActive="active" i18n>Groups</a>
-<!-- <a [routerLink]="['/pro', channel.username, 'feed']" routerLinkActive="active" i18n>Feed</a>-->
+ <a [routerLink]="['/pro', channel.username, 'feed']" routerLinkActive="active" i18n>Feed</a>
  <a [routerLink]="['/pro', channel.username, 'donate']" routerLinkActive="active">Donate</a>
 
  <ng-container *ngIf="currentUser; else authLink">
@@ -23,6 +23,8 @@
  <ng-template #authLink>
  <a [routerLink]="['/pro', channel.username, 'signup']" routerLinkActive="active">Signup / Login</a>
  </ng-template>
+
+ <m-pro-user-menu></m-pro-user-menu>
  </div>
 
  <div class="m-proChannel__body">

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

@@ -2,10 +2,6 @@ m-pro--channel {
  display: block;
  background: none no-repeat center fixed;
  background-size: cover;
-
- --primary-color: #4690D6;
- --plain-background-color: rgba(0, 0, 0, 0.7);
- --text-color: #fff;
 }
 
 .m-pro--channel {
@@ -15,7 +11,6 @@ m-pro--channel {
  grid-template-rows: repeat(2, 100px) 1fr;
  grid-template-columns: repeat(12, 1fr);
  min-height: 100%;
- background-color: var(--plain-background-color);
 
  .m-proChannel__topbar {
  grid-row: 1 / span 1;
@@ -64,10 +59,10 @@ m-pro--channel {
 
  // colors
  a.active, a:hover {
- color: var(--primary-color) !important;
+ color: #4690D6 !important;
  }
 
  a, h1, h2, h3, h4, h5, p, i {
- color: var(--text-color) !important;
+ color: white !important;
  }
 }

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

-import {
- ChangeDetectionStrategy,
- ChangeDetectorRef,
- Component,
- ElementRef,
- HostBinding,
- OnDestroy,
- OnInit
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from "@angular/router";
 import { Session } from "../../../services/session";
 import { Subscription } from "rxjs";
 import { MindsUser } from "../../../interfaces/entities";
 import { Client } from "../../../services/api/client";
 import { Title } from "@angular/platform-browser";
-import { ProChannelService } from './channel.service';
+import { ProService } from "../pro.service";
 
 @Component({
  providers: [
- ProChannelService,
+ ProService,
  ],
  selector: 'm-pro--channel',
  templateUrl: 'channel.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ProChannelComponent implements OnInit, OnDestroy {
-
  username: string;
 
  channel: MindsUser;
@@ -36,9 +27,8 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  params$: Subscription;
 
  constructor(
- protected element: ElementRef,
  protected session: Session,
- protected channelService: ProChannelService,
+ protected proService: ProService,
  protected client: Client,
  protected title: Title,
  protected router: Router,
@@ -72,11 +62,9 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  this.detectChanges();
 
  try {
- this.channel = await this.channelService.load(this.username);
-
- let title = this.channel.pro_settings.title as string || this.channel.name;
+ this.channel = await this.proService.load(this.username);
 
- this.bindCssVariables();
+ let title = this.channel.pro_settings.title || this.channel.name;
 
  if (this.channel.pro_settings.headline) {
  title += ` - ${this.channel.pro_settings.headline}`;
@@ -90,26 +78,6 @@ export class ProChannelComponent implements OnInit, OnDestroy {
  this.detectChanges();
  }
 
- bindCssVariables() {
- const styles = this.channel.pro_settings.styles;
-
- for (const style in styles) {
- if (!styles.hasOwnProperty(style)) {
- continue;
- }
-
- let value = styles[style].trim();
-
- if (!value) {
- continue;
- }
-
- const styleAttr = style.replace(/_/g, "-");
- this.element.nativeElement
- .style.setProperty(`--${styleAttr}`, styles[style]);
- }
- }
-
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();

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

-import { Injectable } from '@angular/core';
-import { MindsChannelResponse } from '../../../interfaces/responses';
-import { MindsUser } from '../../../interfaces/entities';
-import { Client } from '../../../services/api/client';
-
-@Injectable()
-export class ProChannelService {
- currentChannel: MindsUser;
-
- constructor(
- protected client: Client,
- ) { }
-
- async load(id: string) {
- try {
- this.currentChannel = void 0;
-
- const response: MindsChannelResponse = await this.client.get(`api/v1/channel/${id}`) as MindsChannelResponse;
-
- this.currentChannel = response.channel;
-
- return this.currentChannel;
- } catch (e) {
- if (e.status === 0) {
- throw new Error('Sorry, there was a timeout error.');
- } else {
- console.log('couldn\'t load channel', e);
- throw new Error('Sorry, the channel couldn\'t be found');
- }
- }
- }
-}

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

@@ -26,6 +26,9 @@
  See more
  </li>
  </ul>
+ <ng-container *ngIf="(feedsService.feed | async) && (feedsService.feed | async).length">
+ <div class="noFeeds">No Feeds!</div>
+ </ng-container>
  <ng-container *ngIf="type === 'activities'">
  <pre *ngFor="let entity of (feedsService.feed | async)">{{entity | async | json}}</pre>
  <!-- talk to Emi about this -->

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

@@ -17,6 +17,16 @@ m-pro--channel-list {
  margin-top: 100px;
  height: fit-content;
  }
+
+ .noFeeds {
+ max-width: 200px;
+ border-radius: 4px;
+ font-size: 14px;
+ font-weight: 600;
+ padding: 8px;
+ color: #90a4ae!important;
+ background-color: #eceff1!important;
+ }
  }
 
  ul.m-proChannelListContent__list {
@@ -38,29 +48,9 @@ m-pro--channel-list {
  justify-content: center;
  align-items: center;
 
- m-newsfeed__entity {
- width: 100%;
-
- .m-groups--tile {
- width: 100%;
-
- h3, i {
- color: #444 !important;
- }
-
- .m-groups--tile-block {
- margin-top: 0;
- }
-
- .m-groups--tile-buttons {
- padding: 0 $minds-padding * 2;
- }
- }
- }
-
  &.m-proChannelListContentList__seeMore {
- color: var(--text-color);
- background-color: var(--plain-background-color);
+ color: white;
+ background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid #777;
 
  font-size: 30px;
@@ -86,10 +76,7 @@ m-pro--channel-list {
  &:nth-child(2) {
  grid-column: 3 / span 2;
  margin-bottom: $minds-padding * 4;
-
- &:not(.m-proChannelListContentList__seeMore) {
- justify-content: flex-end;
- }
+ justify-content: flex-end;
  }
 
  & > video {

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

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@
 import { ActivatedRoute } from "@angular/router";
 import { Subscription } from "rxjs";
 import { FeedsService } from "../../../../common/services/feeds.service";
-import { ProChannelService } from '../channel.service';
+import { ProService } from "../../pro.service";
 
 @Component({
  selector: 'm-pro--channel-list',
@@ -17,8 +17,8 @@ export class ProChannelListComponent implements OnInit {
 
  constructor(
  public feedsService: FeedsService,
- protected channelService: ProChannelService,
- protected route: ActivatedRoute,
+ private proService: ProService,
+ private route: ActivatedRoute,
  protected cd: ChangeDetectorRef,
  ) {
  }
@@ -62,8 +62,8 @@ export class ProChannelListComponent implements OnInit {
 
  try {
  this.feedsService
- .setEndpoint(`api/v2/feeds/channel/${this.channelService.currentChannel.guid}/${this.type}`)
- .setLimit(9)
+ .setEndpoint(`api/v2/feeds/channel/${this.proService.currentChannel.guid}/${this.type}`)
+ .setLimit(8)
  .fetch();
 
  } catch (e) {
@@ -77,12 +77,26 @@ export class ProChannelListComponent implements OnInit {
  this.feedsService.loadMore();
  }
 
+ seeMore() {
+ let url = `${window.Minds.site_url}${this.proService.currentChannel.username}`;
+
+ let type = this.type;
+
+ if (this.type === 'feed') {
+ type = null;
+ }
+ else if (this.type === 'articles') {
+ type = 'blogs';
+ }
+
+ if (type) {
+ url += `/${type}`;
+ }
+ window.location.href = url;
+ }
+
  detectChanges() {
  this.cd.markForCheck();
  this.cd.detectChanges();
  }
-
- get seeMoreRoute() {
- return ['/', this.channelService.currentChannel.username];
- }
 }

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.html

+<div class="m-pro-user-menu m-dropdown">
+ <a class="m-pro-user-menu__Anchor" (click)="toggleMenu()"><i class="material-icons">menu</i></a>
+
+ <ul class="m-dropdown__list m-pro-user-menu__Dropdown mdl-shadow--3dp" [hidden]="!isOpen">
+ <li
+ class="m-dropdownList__item m-pro-user-menuDropdown__Item"
+ (click)="closeMenu()"
+ >
+ <a [routerLink]="['/', getCurrentUser()?.username]">
+ <i class="material-icons">remove_red_eye</i>
+ <span i18n>View on Minds</span>
+ </a>
+ </li>
+ <li
+ class="m-dropdownList__item m-user-menuDropdown__Item"
+ *ngIf="getCurrentUser()"
+ (click)="closeMenu()"
+ >
+ <a routerLink="/logout">
+ <i class="material-icons">exit_to_app</i>
+ <span i18n>Logout</span>
+ </a>
+ </li>
+ </ul>
+</div>
+
+<div class="minds-bg-overlay" (click)="closeMenu()" [hidden]="!isOpen"></div>
\ No newline at end of file

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.scss

+m-pro-user-menu {
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+}
+
+.m-pro-user-menu__Dropdown {
+ list-style: none;
+ margin: 34px 0 0;
+ @include m-theme(){
+ background-color: themed('m-white');
+ color: themed('m-grey-700');
+ }
+
+ li:hover {
+ @include m-theme(){
+ background-color: rgba(themed('m-grey-50'), 0.5);
+ }
+ }
+
+ a {
+ font-size: 14px!important;
+ padding: 0px!important;
+ color: #555!important;
+ 
+ }
+
+ i {
+ color: #555!important;
+ }
+
+}

src/app/modules/pro/channel/pro-user-menu/pro-user-menu.component.ts

+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from "@angular/core";
+import { Session } from "../../../../services/session";
+import { ThemeService } from "../../../../common/services/theme.service";
+
+@Component({
+ selector: 'm-pro-user-menu',
+ templateUrl: 'pro-user-menu.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProUserMenuComponent implements OnInit {
+ isOpen: boolean = false;
+ 
+ constructor(protected session: Session, protected cd: ChangeDetectorRef, private themeService: ThemeService) {
+ }
+
+ getCurrentUser() {
+ return this.session.getLoggedInUser();
+ }
+
+ ngOnInit() {
+ this.session.isLoggedIn(() => this.detectChanges());
+ }
+
+ toggleMenu() {
+ this.isOpen = !this.isOpen;
+ }
+
+ closeMenu() {
+ this.isOpen = false;
+ }
+
+ detectChanges() {
+ this.cd.markForCheck();
+ this.cd.detectChanges();
+ this.themeService.applyThemePreference();
+ }
+
+}

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

+@import "defaults";
 m-pro--channel-signup {
  display: flex;
  align-items: center;
- justify-content: center;
+ justify-content: flex-end;
 }
+
+.m-ProChannelSignup--hero{
+ position:relative;
+
+ //background-image: url(/assets/photos/circles.png);
+ background-image: url("<%= APP_CDN %>/assets/videos/what-1/what-1.jpg");
+ background-size: cover;
+ background-position: center center;
+
+ .m-ProChannelSignup--hero--inner {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 100px 52px;
+ margin: auto;
+ max-width: 1280px;
+
+ @media screen and (max-width: 1000px){
+ padding: 120px 16px;
+ flex-wrap: wrap;
+ }
+ @media screen and (max-width: $max-mobile) {
+ padding: 62px 0px;
+ }
+
+ .m-ProChannelSignup--app-buttons {
+ display: flex;
+ justify-content: flex-start;
+ * {
+ margin-left: 2px;
+ }
+ .m-ProChannelSignup--app-buttons__iosBanner {
+ > a > img {
+ height: 48px;
+
+ @media screen and (max-width: 480px) {
+ height: 32px;
+ }
+ }
+ }
+
+ @media screen and (max-width: 480px) {
+ .m-androidApp__download {
+ zoom: 0.65;
+ }
+ }
+ }
+ }
+
+ .m-ProChannelSignup--hero--video {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+
+ video {
+ position: absolute;
+ bottom: 0;
+ min-width: 100%;
+ min-height: 100%;
+ }
+ }
+
+ .m-ProChannelSignup--hero--overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ @include m-theme(){
+ background-color: rgba(themed($m-black),0.4);
+ }
+ }
+
+ .m-ProChannelSignup--hero--slogans{
+ flex: 2;
+ h1, h3, h4 {
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ margin: 0;
+ @include m-theme(){
+ color: themed($m-white);
+ }
+ }
+
+ h1 {
+ font-size: 80px;
+ font-weight: 600;
+ letter-spacing: 1.25px;
+ line-height: 1;
+ //color: rgba(255,255,255,0.85);
+ //color: rgba(0,0,0,0.85);
+
+ @media screen and (max-width: 720px){
+ font-size: 42px;
+ }
+ }
+
+ h3 {
+ font-size: 26px;
+ //color: rgba(255, 255, 255, 0.8);
+ font-weight: 400;
+ letter-spacing: 0.25px;
+ line-height: 1.25;
+ margin-top: 16px;
+ padding-right: 70px;
+
+ @media screen and (max-width: 720px){
+ padding-right: 8px;
+ font-size: 16px;
+ }
+ }
+ z-index: 2;
+ }
+
+ .m-ProChannelSignup--signup{
+ flex: 1;
+ margin-left: 16px;
+
+ @media screen and (max-width: 1000px){
+ flex-basis: 100%;
+ margin-left: 0;
+ }
+ minds-form-register{
+ .mdl-card{
+ background:transparent;
+ padding:0;
+ }
+ .mdl-card__title{
+ //color: #FFF !important;
+ display:none;
+ }
+ .m-login-box input{
+ border:0;
+ border-radius:3px;
+ font-weight: 600;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+ font-family: 'Roboto', Helvetica, sans-serif;
+ letter-spacing: 1px;
+ //box-shadow: 0 0 6px rgba(255,255,255,0.22);
+ @include m-theme(){
+ background:rgba(themed($m-white),0.9);
+ color:themed($m-grey-800);
+ border:1px solid rgba(themed($m-white),0.25);
+ }
+ &::placeholder{
+ @include m-theme(){
+ color: themed($m-grey-800);
+ }
+ }
+ }
+ .m-login-box .mdl-checkbox__box-outline {
+ @include m-theme(){
+ border-color: themed($m-white);
+ }
+ }
+ .m-btn--action {
+ margin-right: 16px;
+ @include m-theme(){
+ color: themed($m-white) !important;
+ border: 1px solid themed($m-white);
+ }
+ }
+ .mdl-card__actions{
+ flex-direction:row-reverse;
+ padding-left: 8px;
+
+ .m-register-tac{
+ padding-right:16px;
+ font-family: 'Roboto', Helvetica, sans-serif;
+ @include m-theme(){
+ color: rgba(themed($m-white),0.8);
+ }
+ a {
+ @include m-theme(){
+ color: themed($m-white);
+ }
+ }
+ }
+ }
+ .password-help {
+ padding: 12px;
+ border-radius: 4px;
+ font-weight: 300;
+ @include m-theme(){
+ color: themed($m-white);
+ background-color: themed($m-black);
+ }
+ }
+ .m-register-btn {
+ font-family: 'Roboto', Helvetica, sans-serif;
+ letter-spacing: 1.25px;
+ background: transparent;
+ font-size: 12px;
+ box-shadow: none !important;
+ @include m-theme(){
+ border: 1px solid themed($m-grey-50);
+ }
+ }
+ }
+ z-index: 2;
+ }
+
+ @media (max-width: $max-mobile){
+ .m-ProChannelSignup--grid{
+ .m-ProChannelSignup--titles{
+ h1{
+ font-size: 32px;
+ line-height:32px;
+ //font-weight: 200;
+ //margin:16px;
+ padding:0;
+ padding:0 $minds-padding*2;
+ }
+ h3{
+ font-size:16px;
+ //font-weight: 200;
+ line-height:16px;
+ padding:16px 16px 0;
+ }
+ }
+ }
+ .m-ProChannelSignup--titles {
+ //display:none;
+ }
+ .m-app-links {
+ //max-width:60%;
+ margin:$minds-margin;
+ a{
+ flex:auto;
+ }
+ }
+ }
+
+}
\ No newline at end of file

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

@@ -6,15 +6,24 @@ import { Session } from "../../../../services/session";
 @Component({
  selector: 'm-pro--channel-signup',
  template: `
- <div class="m-ProChannelSignup__Text">
- <!-- TODO: this text should be dynamic -->
- <h2>Independent.</h2>
- <h2>Community-owned.</h2>
- <h2>Decentralized News</h2>
- </div>
- <div class="m-ProChannelSignup__SignupForm">
- <minds-form-register (done)="registered()"></minds-form-register>
- </div>
+ <section class="m-ProChannelSignup--hero">
+
+ <div class="m-ProChannelSignup--hero--inner">
+
+ <div class="m-ProChannelSignup--hero--slogans">
+ <!-- TODO: this text should be dynamic -->
+ <h1>Independent.</h1>
+ <h1>Community-owned.</h1>
+ <h1>Decentralized News</h1>
+ </div>
+
+ <div class="m-ProChannelSignup--signup">
+ <minds-form-register (done)="registered()"></minds-form-register>
+ </div>
+
+ </div>
+ 
+ </section>
  `
 })
 

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

+@import "defaults";
+
 m-pro--channel-tile {
  cursor: pointer;
  position: relative;
- width: 100%;
- height: 320px;
 
  img {
- height: 320px;
+ max-height: 320px;
  width: 100%;
  object-fit: cover;
  }
@@ -16,10 +16,9 @@ m-pro--channel-tile {
  bottom: 0;
  background-color: white;
  color: black;
- padding: 16px 16px 0;
+ min-width: stretch;
+ padding: $minds-padding*2 $minds-padding*2 0;
  font-size: 20px;
- width: 100%;
- box-sizing: border-box;
 
  h2 {
  font-size: 20px;

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

@@ -16,9 +16,7 @@
  </div>
 
  <div class="m-marketing--hero--actions m-marketing--action-button">
- <m-pro--subscription
- (onEnable)="goToSettings()"
- ></m-pro--subscription>
+ <m-pro--subscription></m-pro--subscription>
  </div>
  </div>
  </div>

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

 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { Router } from '@angular/router';
 
 @Component({
  selector: 'm-pro--marketing',
@@ -8,13 +7,4 @@ import { Router } from '@angular/router';
 })
 export class ProMarketingComponent {
  minds = window.Minds;
-
- constructor(
- protected router: Router,
- ) {
- }
-
- goToSettings() {
- this.router.navigate(['/pro/settings']);
- }
 }

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

@@ -12,6 +12,7 @@ import { MindsFormsModule } from "../forms/forms.module";
 import { ProChannelListComponent } from "./channel/list/list.component";
 import { ProChannelDonateComponent } from './channel/donate/donate.component';
 import { ProTileComponent } from "./channel/tile/tile.component";
+import { ProUserMenuComponent } from "./channel/pro-user-menu/pro-user-menu.component";
 import { NewsfeedModule } from "../newsfeed/newsfeed.module";
 import { ProSettingsComponent } from './settings/settings.component';
 
@@ -76,6 +77,7 @@ const routes: Routes = [
  ProChannelSignupComponent,
  ProChannelListComponent,
  ProChannelDonateComponent,
+ ProUserMenuComponent
  ],
  exports: [],
  entryComponents: [

src/app/modules/pro/pro.service.ts

 import { Injectable } from '@angular/core';
 import { Client } from '../../services/api/client';
+import { MindsUser } from "../../interfaces/entities";
+import { MindsChannelResponse } from "../../interfaces/responses";
 
 @Injectable()
 export class ProService {
+ currentChannel: MindsUser;
+
  constructor(
  protected client: Client,
  ) { }
@@ -28,12 +32,22 @@ export class ProService {
  return true;
  }
 
- async get(): Promise<{ isActive, settings }> {
- return await this.client.get('api/v2/pro/settings', {}, {cache: false}) as any;
- }
+ async load(id: string) {
+ try {
+  this.currentChannel = void 0;
 
- async set(settings): Promise<boolean> {
- await this.client.post('api/v2/pro/settings', settings);
- return true;
+ const response: MindsChannelResponse = await this.client.get(`api/v1/channel/${id}`) as MindsChannelResponse;
+
+ this.currentChannel = response.channel;
+
+ return this.currentChannel;
+ } catch (e) {
+ if (e.status === 0) {
+ throw new Error('Sorry, there was a timeout error.');
+ } else {
+ console.log('couldn\'t load channel', e);
+ throw new Error('Sorry, the channel couldn\'t be found');
+ }
+ }
  }
 }

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

-<div class="m-pro--settings">
- <div class="m-page">
- <div class="m-page--main m-pro--settings--page m-border">
- <h4 i18n>Pro Settings</h4>
-
- <div *ngIf="inProgress && !settings">
- <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
- </div>
-
- <ng-container *ngIf="settings">
- <form (ngSubmit)="save()">
- <div class="m-pro--settings--field">
- <label for="domain" i18n>Domain</label>
- <input type="text" id="domain" name="domain" [(ngModel)]="settings.domain">
- </div>
-
- <div class="m-pro--settings--field">
- <label for="title" i18n>Title</label>
- <input type="text" id="title" name="title" [(ngModel)]="settings.title">
- </div>
-
- <div class="m-pro--settings--field">
- <label for="headline" i18n>Headline</label>
- <input type="text" id="headline" name="headline" [(ngModel)]="settings.headline">
- </div>
-
- <div class="m-pro--settings--field">
- <label for="text_color" i18n>Text Color</label>
- <input type="color" id="text_color" name="text_color" [(ngModel)]="settings.text_color">
- </div>
-
- <div class="m-pro--settings--field">
- <label for="primary_color" i18n>Primary Color</label>
- <input type="color" id="primary_color" name="primary_color" [(ngModel)]="settings.primary_color">
- </div>
-
- <div class="m-pro--settings--field">
- <label for="plain_background_color" i18n>Plain Background Color</label>
- <input type="color" id="plain_background_color" name="plain_background_color" [(ngModel)]="settings.plain_background_color">
- </div>
-
- <div class="m-pro--settings--field">
- <button
- class="m-btn m-btn--slim m-btn--action"
- type="submit"
- [disabled]="inProgress"
- i18n
- >Save</button>
-
- <span *ngIf="inProgress">
- <div class="mdl-spinner mdl-js-spinner is-active" [mdl]></div>
- </span>
-
- <a
- *ngIf="saved"
- class="m-btn m-link-btn m-btn--slim m-pro--settings--preview-btn"
- [routerLink]="previewRoute"
- i18n
- >Preview your Pro site</a>
- </div>
-
- <div class="m-pro--settings--field">
- <a
- class="m-btn m-link-btn m-btn--slim m-btn--destructive"
- routerLink="/pro"
- >Cancel Pro</a>
- </div>
- </form>
- </ng-container>
- </div>
- </div>
-</div>

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

-.m-pro--settings {
- max-width: 1280px;
- margin: auto;
-}
-
-.m-pro--settings--page {
- margin-top: 16px;
- padding-bottom: 24px;
-
- @include m-theme() {
- background-color: themed($m-white);
- }
-
- h4 {
- margin: 0 0 8px;
- }
-
- form {
- margin: 0;
- padding: 0;
- }
-
- .m-pro--settings--field {
- margin: 0 0 24px;
-
- &:last-child {
- margin: 0;
- }
-
- label {
- display: block;
- font-weight: 300;
- margin-bottom: 4px;
-
- @include m-theme() {
- color: themed($m-grey-800);
- }
- }
-
- input[type=text],
- input[type=password],
- input[type=search],
- input[type=date] {
- appearance: none;
- border: 1px solid;
- border-radius: 6px;
- width: 100%;
- padding: 8px;
- font-size: 16px;
- max-width: 40em;
-
- @include m-theme() {
- border-color: themed($m-grey-50);
- }
- }
- }
-
- .m-pro--settings--preview-btn {
- margin-left: 0.35em;
-
- @include m-theme() {
- color: themed($m-grey-300);
- border-color: themed($m-grey-300);
- }
- }
-}

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

-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { ProService } from '../pro.service';
-import { Session } from '../../../services/session';
-import { Router } from '@angular/router';
-
-@Component({
- selector: 'm-pro--settings',
- changeDetection: ChangeDetectionStrategy.OnPush,
- templateUrl: 'settings.component.html'
-})
-export class ProSettingsComponent implements OnInit {
-
- settings: any;
-
- inProgress: boolean;
-
- saved: boolean = false;
-
- constructor(
- protected service: ProService,
- protected session: Session,
- protected router: Router,
- protected cd: ChangeDetectorRef,
- ) {
- }
-
- ngOnInit() {
- this.load();
- }
-
- async load() {
- this.inProgress = true;
- this.detectChanges();
-
- const { isActive, settings } = await this.service.get();
-
- if (!isActive) {
- this.router.navigate(['/pro'], { replaceUrl: true });
- return;
- }
-
- this.settings = settings;
-
- this.inProgress = false;
- this.detectChanges();
- }
-
- async save() {
- this.inProgress = true;
- this.detectChanges();
-
- await this.service.set(this.settings);
-
- this.saved = true;
- this.inProgress = false;
- this.detectChanges();
- }
-
- detectChanges() {
- this.cd.markForCheck();
- this.cd.detectChanges();
- }
-
- get previewRoute() {
- return ['/pro', this.session.getLoggedInUser().username];
- }
-}

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

-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { Session } from '../../services/session';
 import { ProService } from './pro.service';
 
@@ -9,10 +9,6 @@ import { ProService } from './pro.service';
 })
 export class ProSubscriptionComponent implements OnInit {
 
- @Output() onEnable: EventEmitter<any> = new EventEmitter();
-
- @Output() onDisable: EventEmitter<any> = new EventEmitter();
-
  isLoggedIn: boolean = false;
 
  inProgress: boolean = false;
@@ -65,7 +61,6 @@ export class ProSubscriptionComponent implements OnInit {
  await this.service.enable();
  this.active = true;
  this.minds.user.pro = true;
- this.onEnable.emit(Date.now());
  } catch (e) {
  this.active = false;
  this.minds.user.pro = false;
@@ -85,7 +80,6 @@ export class ProSubscriptionComponent implements OnInit {
  await this.service.disable();
  this.active = false;
  this.minds.user.pro = false;
- this.onDisable.emit(Date.now());
  } catch (e) {
  this.active = true;
  this.minds.user.pro = true;