(feat): ability to either signup or login in pro

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

@@ -10,8 +10,8 @@ m-pro--channel-signup {
  }
 }
 
-.m-ProChannelSignup--hero{
- position:relative;
+.m-ProChannelSignup--hero {
+ position: relative;
 
  .m-ProChannelSignup--hero--inner {
  display: flex;
@@ -21,7 +21,7 @@ m-pro--channel-signup {
  margin: auto;
  max-width: 1280px;
 
- @media screen and (max-width: 1000px){
+ @media screen and (max-width: 1000px) {
  padding: 120px 16px;
  flex-wrap: wrap;
  }
@@ -135,7 +135,19 @@ m-pro--channel-signup {
  margin-left: 0;
  }
 
- minds-form-register {
+ .m-proChannelSignup--subtext {
+ margin: 8px;
+ color: var(--m-pro--text-color) !important;
+
+ & > a {
+ font-size: 20px;
+ color: var(--m-pro--text-color) !important;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+ }
+
+ minds-form-register, minds-form-login {
  .mdl-card {
  background: transparent;
  padding: 0;
@@ -169,7 +181,7 @@ m-pro--channel-signup {
  }
 
  .m-login-box .mdl-checkbox__box-outline {
-  border-color: var(--m-pro--text-color);
+ border-color: var(--m-pro--text-color);
  }
 
  .m-btn--action {
@@ -186,9 +198,10 @@ m-pro--channel-signup {
  padding-right: 16px;
  font-family: 'Roboto', Helvetica, sans-serif;
  color: var(--m-pro--text-color) !important;
- a {
- color: var(--m-pro--text-color) !important;
- }
+ }
+
+ a {
+ color: var(--m-pro--text-color) !important;
  }
  }
 

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

@@ -16,7 +16,14 @@ import { ProChannelService } from "../channel.service";
  </div>
 
  <div class="m-ProChannelSignup--signup">
- <minds-form-register (done)="registered()"></minds-form-register>
+ <ng-container *ngIf="currentSection === 'login'">
+ <span class="m-proChannelSignup--subtext">Not on Minds? <a (click)="currentSection = 'register'">Start a Channel</a></span>
+ <minds-form-login (done)="registered()"></minds-form-login>
+ </ng-container>
+ <ng-container *ngIf="currentSection === 'register'">
+ <span class="m-proChannelSignup--subtext"><a (click)="currentSection = 'login'">I already have an account</a></span>
+ <minds-form-register (done)="registered()"></minds-form-register>
+ </ng-container>
  </div>
 
  </div>
@@ -27,6 +34,7 @@ import { ProChannelService } from "../channel.service";
 
 export class ProChannelSignupComponent {
  username: string;
+ currentSection: 'login' | 'register' = 'login';
 
  paramsSubscription: Subscription;