(fix): use old minds-form-register

(fix): reverted lint on tasks/extract.i18n.xlf.ts

src/app/modules/forms/forms.module.ts

@@ -13,6 +13,7 @@ import { OnboardingCategoriesSelector } from './categories-selector/categories-s
 import { Tutorial } from './tutorial/tutorial';
 import { CaptchaModule } from '../captcha/captcha.module';
 import { ExperimentsModule } from '../experiments/experiments.module';
+import { PopoverComponent } from './popover-validation/popover.component';
 
 @NgModule({
   imports: [
@@ -31,6 +32,7 @@ import { ExperimentsModule } from '../experiments/experiments.module';
     OnboardingForm,
     OnboardingCategoriesSelector,
     Tutorial,
+    PopoverComponent,
   ],
   exports: [
     LoginForm,

src/app/modules/forms/register/register.html

@@ -7,6 +7,7 @@
     {{errorMessage}}
   </div>
 </div>
+<h3 *ngIf="showTitle">Join the Minds revolution!</h3>
 
 <!-- START: Register -->
 <form
@@ -40,15 +41,19 @@
       />
     </div>
     <div class="mdl-cell mdl-cell--12-col" style="position: relative">
-      <input
-        type="password"
-        id="password"
-        formControlName="password"
-        placeholder="Password"
-        i18n-placeholder="@@M__COMMON__PASSWORD"
-        readonly
-        onfocus="this.removeAttribute('readonly');"
-      />
+      <m-popover--validation #popover>
+        <input
+          type="password"
+          id="password"
+          formControlName="password"
+          i18n-placeholder="@@M__COMMON__PASSWORD"
+          readonly
+          onfocus="this.removeAttribute('readonly');"
+          (focus)="popover.show()"
+          (focusout)="popover.hide()"
+          (ngModelChange)="popover.checkRules($event)"
+        />
+      </m-popover--validation>
       <m-tooltip
         class="tooltip-wrapper"
         icon="help"
@@ -59,15 +64,6 @@
         special characters (ie. !,#,@), and cannot have spaces.
       </m-tooltip>
     </div>
-    <div
-      class="mdl-cell mdl-cell--12-col password-help"
-      [hidden]="errorMessage || !form.value.password"
-    >
-      <span i18n="@@MINDS__PASSWORD_TOOLTIP"
-        >Password must have more than 8 characters. Including uppercase,
-        numbers, special characters (ie. !,#,@), and cannot have spaces</span
-      >
-    </div>
     <div class="mdl-cell mdl-cell--12-col" [hidden]="!form.value.password">
       <input
         type="password"
@@ -139,13 +135,16 @@
     </div>
 
     <button
+      [ngClass]="{
+      'm-btn m-btn--action': !gradientButton,
+      'mf-button mf-button--alt mf-button--gradient': gradientButton}"
       class="m-btn m-btn--action"
       (click)="register($event)"
       [disabled]="!this.form.valid || inProgress"
     >
-      <ng-container i18n="@@FORMS__REGISTER__SIGNUP_ACTION"
-        >Signup</ng-container
-      >
+      <ng-container i18n="@@FORMS__REGISTER__SIGNUP_ACTION">
+        Join Minds Now
+      </ng-container>
     </button>
   </div>
 </form>

src/app/modules/forms/register/register.ts

@@ -22,6 +22,8 @@ import { RouterHistoryService } from '../../../common/services/router-history.se
 export class RegisterForm {
   @Input() referrer: string;
   @Input() parentId: string = '';
+  @Input() showTitle: boolean = false;
+  @Input() gradientButton: boolean = false;
 
   @Output() done: EventEmitter<any> = new EventEmitter();
 

src/app/modules/homepage/homepage.component.html

@@ -59,10 +59,11 @@
       </div>
 
       <div
-        class="m-grid__column-5 m-grid__column-12--mobile"
+        class="m-grid__column-5 m-grid__column-12--mobile m-homepage__registerForm"
         *mExperiment="'Homepage121119'; bucket: 'form'"
       >
-        <m-homepage__registerForm></m-homepage__registerForm>
+        <minds-form-register [showTitle]="true" [gradientButton]="true">
+        </minds-form-register>
       </div>
     </div>
   </div>
@@ -195,7 +196,7 @@
 
           <div class="m-marketing__actionButtons">
             <button
-              class="mf-button mf-button--alt"
+              class="mf-button mf-button--alt m-homepage__joinButton"
               (click)="goToLoginPage()"
               i18n
             >

src/app/modules/homepage/homepage.component.scss

@@ -5,10 +5,7 @@ m-homepage {
     margin-top: -52px;
     padding-top: 52px;
   }
-  .mf-button--alt {
-    background: #5dbac0 !important;
-    border-color: #5dbac0 !important;
-  }
+
   .m-marketing__main {
     &.m-marketing__section--style-2 {
       .m-marketing__body {
@@ -24,6 +21,8 @@ m-homepage {
 
         .m-homepage__joinButton {
           margin-bottom: 120px;
+          background: #5dbac0 !important;
+          border-color: #5dbac0 !important;
         }
 
         &::after {
@@ -53,17 +52,71 @@ m-homepage {
         }
       }
 
-      @media screen and (max-width: $max-mobile) {
-        m-homepage__registerForm {
-          margin: 30px 10px 50px;
+      .m-homepage__registerForm {
+        display: block;
+        filter: drop-shadow(-1px 0px 8px rgba(50, 50, 0, 0.5));
+
+        minds-form-register {
+          display: block;
+          background-color: #fcfcfc;
+          padding: 50px 37px;
+
+          clip-path: polygon(0 0, 100% 10px, 100% 95%, 0% 100%);
+
+          h3 {
+            font-size: 24px;
+            line-height: 32px;
+            font-weight: bold;
+          }
+
+          form {
+            background: transparent !important;
+
+            .mdl-card__supporting-text {
+              overflow: visible;
+            }
+          }
+
+          span,
+          label {
+            font-size: 14px;
+            line-height: 19px;
+          }
 
+          label.mdl-checkbox {
+            //display: flex;
+            //align-items: center;
+            margin-bottom: 16px;
+          }
+
+          .mdl-card__actions {
+            flex-direction: column;
+            padding: 8px;
+
+            & > * {
+              color: #4a4a4a !important;
+            }
+
+            a {
+              color: #4a90e2;
+            }
+
+            button {
+              align-self: flex-end;
+            }
+          }
+        }
+
+        @media screen and (max-width: $max-mobile) {
+          margin: 30px 10px 50px;
           &::before {
             content: '';
             display: block;
             position: absolute;
             width: 393px;
             height: 193px;
-            top: -66px;
+            //top: -66px;
+            bottom: 190px;
             left: -144px;
             transform: translate(45px, 32px);
             background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
@@ -76,6 +129,7 @@ m-homepage {
 
     .m-marketing__image {
       margin: 0 auto;
+
       span {
         &::before {
           content: initial !important;

src/app/modules/homepage/homepage.module.ts

@@ -14,9 +14,7 @@ import { MindsFormsModule } from '../forms/forms.module';
 import { MarketingModule } from '../marketing/marketing.module';
 import { ExperimentsModule } from '../experiments/experiments.module';
 import { HomepageComponent } from './homepage.component';
-import { HomepageRegisterComponent } from './register/register.component';
 import { CaptchaModule } from '../captcha/captcha.module';
-import { PopoverComponent } from './register/popover-validation/popover.component';
 
 const routes: Routes = [{ path: '', component: HomepageComponent }];
 
@@ -34,11 +32,7 @@ const routes: Routes = [{ path: '', component: HomepageComponent }];
     ExperimentsModule,
     CaptchaModule,
   ],
-  declarations: [
-    HomepageComponent,
-    HomepageRegisterComponent,
-    PopoverComponent,
-  ],
+  declarations: [HomepageComponent],
   entryComponents: [HomepageComponent],
 })
 export class HomepageModule {}

src/app/modules/homepage/register/register.component.html

-<div class="m-homepage__registerForm">
-  <div
-    class="mdl-card mdl-color--red-500 mdl-color-text--blue-grey-50  mdl-shadow--2dp minds-login-box m-error-box"
-    style="min-height:0;"
-    [hidden]="!errorMessage"
-  >
-    <div class="mdl-card__supporting-text mdl-color-text--blue-grey-50">
-      {{ errorMessage }}
-    </div>
-  </div>
-  <h3>Join the Minds revolution!</h3>
-
-  <!-- START: Register -->
-  <form
-    (submit)="$event.preventDefault()"
-    [formGroup]="form"
-    class="mdl-card mdl-color-text--blue-grey-400 m-form m-login-box"
-    [hidden]="hideLogin"
-    *ngIf="!showFbForm"
-  >
-    <div class="mdl-card__supporting-text mdl-grid">
-      <div class="mdl-cell mdl-cell--12-col">
-        <label for="username" i18n>
-          Username
-        </label>
-        <input
-          type="text"
-          id="username"
-          formControlName="username"
-          i18n-placeholder="@@M__COMMON__USERNAME"
-          (keyup)="validationTimeoutHandler()"
-          readonly
-          onfocus="this.removeAttribute('readonly');"
-        />
-      </div>
-
-      <div class="mdl-cell mdl-cell--12-col">
-        <label for="email" i18n>
-          Email
-        </label>
-        <input
-          type="email"
-          id="email"
-          formControlName="email"
-          i18n-placeholder="
-             email placeholder|@@FORMS__REGISTER__EMAIL_PLACEHOLDER
-          "
-        />
-      </div>
-      <div class="mdl-cell mdl-cell--12-col" style="position: relative">
-        <label for="password" i18n>
-          Password
-        </label>
-        <m-popover--validation #popover>
-          <input
-            type="password"
-            id="password"
-            formControlName="password"
-            i18n-placeholder="@@M__COMMON__PASSWORD"
-            readonly
-            onfocus="this.removeAttribute('readonly');"
-            (focus)="popover.show()"
-            (focusout)="popover.hide()"
-            (ngModelChange)="popover.checkRules($event)"
-          />
-        </m-popover--validation>
-      </div>
-      <div class="mdl-cell mdl-cell--12-col">
-        <label for="password2" i18n>
-          Confirm your password
-        </label>
-        <input
-          type="password"
-          id="password2"
-          formControlName="password2"
-          i18n-placeholder="@@FORMS__REGISTER__CONFIRM_PASSWORD_PLACEHOLDER"
-          (keydown.enter)="register($event)"
-          readonly
-          onfocus="this.removeAttribute('readonly');"
-        />
-      </div>
-
-      <div
-        class="mdl-cell mdl-cell--12-col"
-        [hidden]="!form.value.password2"
-        *ngIf="form.value.password"
-      >
-        <re-captcha
-          *ngIf="minds.recaptchaKey"
-          (captchaResponse)="setCaptcha($event)"
-          [site_key]="minds.recaptchaKey"
-          #reCaptcha
-        ></re-captcha>
-      </div>
-    </div>
-
-    <div class="mdl-card__actions">
-      <div>
-        <!--<label
-          class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
-          [mdlSwitch]
-          [toggled]="form.value.exclusive_promotions"
-        >
-          <input
-            type="checkbox"
-            class="mdl-checkbox__input"
-            formControlName="exclusive_promotions"
-          />
-
-          <span
-            class="m-register-tac"
-            i18n="@@FORMS__REGISTER__EXCLUSIVE_PROMOTIONS_ACCEPTANCE_LABEL"
-          >
-            Receive exclusive promotions from Minds (recommended)
-          </span>
-        </label>-->
-
-        <label
-          class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
-          [mdlSwitch]
-          [toggled]="form.value.tos"
-        >
-          <input
-            type="checkbox"
-            class="mdl-checkbox__input"
-            formControlName="tos"
-            data-cy="data-minds-accept-tos-input"
-          />
-
-          <span class="m-register-tac" i18n>
-            I have read and accept the
-            <a routerLink="/p/terms" target="_blank"> terms of use </a>
-          </span>
-        </label>
-      </div>
-
-      <div class="m-homepage__joinButtonContainer">
-        <button
-          class="mf-button mf-button--alt mf-button--gradient"
-          (click)="register($event)"
-          i18n
-        >
-          Join Minds Now
-        </button>
-      </div>
-    </div>
-  </form>
-</div>
-<!-- END: Register -->

src/app/modules/homepage/register/register.component.scss

-m-homepage__registerForm {
-  display: block;
-  filter: drop-shadow(-1px 0px 8px rgba(50, 50, 0, 0.5));
-
-  .m-homepage__registerForm {
-    display: block;
-    background-color: #fcfcfc;
-    padding: 50px 37px;
-
-    clip-path: polygon(0 0, 100% 10px, 100% 95%, 0% 100%);
-
-    h3 {
-      font-size: 24px;
-      line-height: 32px;
-      font-weight: bold;
-    }
-
-    form.mdl-card {
-      background: transparent !important;
-
-      .mdl-card__supporting-text {
-        overflow: visible;
-      }
-    }
-
-    span,
-    label {
-      font-size: 14px;
-      line-height: 19px;
-    }
-
-    label.mdl-checkbox {
-      display: flex;
-      align-items: center;
-    }
-
-    .m-homepage__joinButtonContainer {
-      display: flex;
-      justify-content: flex-end;
-
-      padding-top: 30px;
-    }
-  }
-}

src/app/modules/homepage/register/register.component.ts

-import {
-  Component,
-  EventEmitter,
-  Input,
-  NgZone,
-  OnInit,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { ReCaptchaComponent } from '../../captcha/recaptcha/recaptcha.component';
-import { Session } from '../../../services/session';
-import { Client } from '../../../services/api';
-import { ExperimentsService } from '../../experiments/experiments.service';
-import { RouterHistoryService } from '../../../common/services/router-history.service';
-
-@Component({
-  selector: 'm-homepage__registerForm',
-  templateUrl: 'register.component.html',
-})
-export class HomepageRegisterComponent implements OnInit {
-  @Input() referrer: string;
-  @Input() parentId: string = '';
-
-  @Output() done: EventEmitter<any> = new EventEmitter();
-
-  errorMessage: string = '';
-  twofactorToken: string = '';
-  hideLogin: boolean = false;
-  inProgress: boolean = false;
-  captcha: string;
-  takenUsername: boolean = false;
-  usernameValidationTimeout: any;
-
-  showFbForm: boolean = false;
-
-  form: FormGroup;
-  fbForm: FormGroup;
-  minds = window.Minds;
-
-  @ViewChild('reCaptcha', { static: false }) reCaptcha: ReCaptchaComponent;
-
-  constructor(
-    public session: Session,
-    public client: Client,
-    fb: FormBuilder,
-    public zone: NgZone,
-    private experiments: ExperimentsService,
-    private routerHistoryService: RouterHistoryService
-  ) {
-    this.form = fb.group({
-      username: ['', Validators.required],
-      email: ['', Validators.required],
-      password: ['', Validators.required],
-      password2: ['', Validators.required],
-      tos: [false],
-      exclusive_promotions: [false],
-      captcha: [''],
-      previousUrl: this.routerHistoryService.getPreviousUrl(),
-    });
-  }
-
-  ngOnInit() {
-    if (this.reCaptcha) {
-      this.reCaptcha.reset();
-    }
-  }
-
-  register(e) {
-    e.preventDefault();
-    this.errorMessage = '';
-    if (!this.form.value.tos) {
-      this.errorMessage =
-        'To create an account you need to accept terms and conditions.';
-      return;
-    }
-
-    //re-enable cookies
-    document.cookie =
-      'disabled_cookies=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
-
-    if (this.form.value.password !== this.form.value.password2) {
-      if (this.reCaptcha) {
-        this.reCaptcha.reset();
-      }
-
-      this.errorMessage = 'Passwords must match.';
-      return;
-    }
-
-    this.form.value.referrer = this.referrer;
-    this.form.value.parentId = this.parentId;
-
-    this.inProgress = true;
-
-    let opts = { ...this.form.value };
-
-    this.client
-      .post('api/v1/register', opts)
-      .then((data: any) => {
-        // TODO: [emi/sprint/bison] Find a way to reset controls. Old implementation throws Exception;
-
-        this.inProgress = false;
-        this.session.login(data.user);
-
-        this.done.next(data.user);
-      })
-      .catch(e => {
-        console.log(e);
-        this.inProgress = false;
-        if (this.reCaptcha) {
-          this.reCaptcha.reset();
-        }
-
-        if (e.status === 'failed') {
-          //incorrect login details
-          this.errorMessage = 'RegisterException::AuthenticationFailed';
-          this.session.logout();
-        } else if (e.status === 'error') {
-          //two factor?
-          this.errorMessage = e.message;
-          this.session.logout();
-        } else {
-          this.errorMessage = 'Sorry, there was an error. Please try again.';
-        }
-
-        return;
-      });
-  }
-
-  validateUsername() {
-    if (this.form.value.username) {
-      this.client
-        .get('api/v1/register/validate/' + this.form.value.username)
-        .then((data: any) => {
-          if (data.exists) {
-            this.form.controls.username.setErrors({ exists: true });
-            this.errorMessage = data.message;
-            this.takenUsername = true;
-          } else {
-            this.takenUsername = false;
-            this.errorMessage = '';
-          }
-        })
-        .catch(e => {
-          console.log(e);
-        });
-    }
-  }
-
-  setCaptcha(code) {
-    this.form.patchValue({ captcha: code });
-  }
-
-  validationTimeoutHandler() {
-    clearTimeout(this.usernameValidationTimeout);
-    this.usernameValidationTimeout = setTimeout(
-      this.validateUsername.bind(this),
-      500
-    );
-  }
-}