Skip to content

Minds Frontend
Minds Frontend
Source
...
Target
 
Commits (7)
Hide whitespace changes
Inline Side-by-side
Showing with 854 additions and 32 deletions
src/app/common/components/marketing/styles/general.scss
View file @ 507c3221
......@@ -109,6 +109,13 @@
}
}
a.m-marketing__link {
text-decoration: none;
@include m-theme() {
color: themed($m-blue);
}
}
span.m-marketing__imageUX {
span.m-marketing__imageTick {
border-radius: 50%;
......@@ -125,12 +132,26 @@
box-shadow: 0 0 39px -4px rgba(0, 0, 0, 0.5);
z-index: 3;
@media screen and (max-width: $m-grid-min-vp) {
width: 10vw;
height: 10vw;
font-size: 5vw;
}
}
.m-marketing__imageTick--left {
position: absolute;
bottom: 21px;
bottom: 8px;
left: -45px;
@media screen and (max-width: $m-grid-min-vp) {
//bottom: -116px;
//left: 2px;
bottom: -27%;
left: 2.5%;
}
}
img {
......@@ -143,7 +164,9 @@
flex-direction: column;
align-items: flex-end;
width: 500px;
@media screen and(min-width: $m-grid-min-vp) {
width: 500px;
}
margin: 0 auto;
h4 {
......
src/app/common/components/marketing/styles/style-2.scss
View file @ 507c3221
......@@ -56,7 +56,6 @@
@media screen and (max-width: $m-grid-min-vp) {
margin: 15px 0 15px;
text-align: center;
}
}
......@@ -69,7 +68,6 @@
font-size: 28px;
line-height: 32px;
margin: 0 0 17px;
text-align: center;
}
}
}
......@@ -91,7 +89,6 @@
margin-bottom: 30px;
font-size: 16px;
line-height: 23px;
text-align: center;
}
}
......
src/app/common/components/marketing/styles/style-3.scss
View file @ 507c3221
......@@ -62,7 +62,6 @@
font-size: 28px;
line-height: 32px;
margin: 20px 0 17px;
text-align: center;
}
}
}
......@@ -84,7 +83,6 @@
margin-bottom: 30px;
font-size: 16px;
line-height: 23px;
text-align: center;
}
}
......
src/app/common/components/marketing/styles/style-4.scss
View file @ 507c3221
......@@ -35,15 +35,31 @@
font-size: 28px;
line-height: 32px;
margin: 20px 0 17px;
text-align: center;
}
}
}
p.m-marketing__description {
margin-bottom: 42px;
padding-right: 200px;
margin-bottom: 42px;
@media screen and (max-width: $m-grid-min-vp) {
margin-bottom: 30px;
}
}
ol.m-marketing__description {
padding-right: 100px;
padding-left: 16px;
& > li {
margin-bottom: 16px;
}
}
ol.m-marketing__description > li,
p.m-marketing__description {
@include m-theme() {
color: themed($m-grey-300);
}
......@@ -54,10 +70,8 @@
@media screen and (max-width: $m-grid-min-vp) {
padding-right: 0;
margin-bottom: 30px;
font-size: 16px;
line-height: 23px;
text-align: center;
}
}
......
src/app/common/components/marketing/styles/style-5.scss
View file @ 507c3221
......@@ -36,7 +36,6 @@
font-size: 28px;
line-height: 32px;
margin: 20px 0 17px;
text-align: center;
}
}
}
......@@ -58,7 +57,6 @@
margin-bottom: 30px;
font-size: 16px;
line-height: 23px;
text-align: center;
}
}
......
src/app/common/components/marketing/styles/style-tail.scss
View file @ 507c3221
......@@ -31,6 +31,8 @@
@media screen and (max-width: $m-grid-min-vp) {
margin: 0 0 12px;
font-size: 19px;
line-height: 25px;
}
}
......
src/app/foundation/grid.scss
View file @ 507c3221
......@@ -10,6 +10,9 @@
.m-grid__column-#{$i} {
grid-column: auto / span $i;
}
.m-grid__column__skip-#{$i} {
grid-column-start: $i !important;
}
}
@media screen and (max-width: $m-grid-min-vp) {
......@@ -17,6 +20,9 @@
.m-grid__column-#{$i}--mobile {
grid-column: auto / span $i;
}
.m-grid__column__skip-#{$i}--mobile {
grid-column-start: $i !important;
}
}
}
}
src/app/modules/homepage/homepage.module.ts
View file @ 507c3221
......@@ -11,11 +11,14 @@ import { LegacyModule } from '../legacy/legacy.module';
import { ModalsModule } from '../modals/modals.module';
import { MindsFormsModule } from '../forms/forms.module';
import { HomepageComponent } from './homepage.component';
import { HomepageV1Component } from './v1/homepage-v1.component';
import { MarketingModule } from '../marketing/marketing.module';
import { ExperimentsModule } from '../experiments/experiments.module';
import { HomepageV2Component } from './v2/homepage-v2.component';
import { HomepageRegisterComponent } from './v2/register/register.component';
import { CaptchaModule } from '../captcha/captcha.module';
const routes: Routes = [{ path: '', component: HomepageComponent }];
const routes: Routes = [{ path: '', component: HomepageV2Component }];
@NgModule({
imports: [
......@@ -29,8 +32,13 @@ const routes: Routes = [{ path: '', component: HomepageComponent }];
MindsFormsModule,
MarketingModule,
ExperimentsModule,
CaptchaModule,
],
declarations: [HomepageComponent],
entryComponents: [HomepageComponent],
declarations: [
HomepageV1Component,
HomepageV2Component,
HomepageRegisterComponent,
],
entryComponents: [HomepageV1Component, HomepageV2Component],
})
export class HomepageModule {}
src/app/modules/homepage/homepage.component.html → src/app/modules/homepage/v1/homepage-v1.component.html
View file @ 507c3221
......@@ -61,7 +61,7 @@
<!-- Section 2 -->
<div class="m-marketing__section">
<div class="m-marketing__section m-homepage__quotation">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
......@@ -93,13 +93,12 @@
<div class="m-marketing__actionButtons">
<a
class="mf-button mf-button--smaller mf-button--hollow-mono"
class="m-marketing__link"
[href]="cdnAssetsUrl + 'assets/documents/Whitepaper-v0.5.pdf'"
target="_blank"
i18n
>
<span>Download Whitepaper</span>
<i class="material-icons">cloud_download</i>
Download Whitepaper
</a>
</div>
</div>
......
src/app/modules/homepage/homepage.component.scss → src/app/modules/homepage/v1/homepage-v1.component.scss
View file @ 507c3221
@import 'defaults';
m-homepage {
m-homepage__v1 {
.m-marketing__main {
&.m-marketing__section--style-2 {
.m-marketing__body {
......@@ -37,7 +37,7 @@ m-homepage {
}
.m-homepage__cellphone {
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
//box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
height: auto !important;
object-fit: initial !important;
width: 333px !important;
......@@ -83,6 +83,11 @@ m-homepage {
max-width: 100%;
}
}
.m-homepage__quotation {
margin-top: 116px;
margin-bottom: 161px;
}
}
.m-homepage {
......
src/app/modules/homepage/homepage.component.ts → src/app/modules/homepage/v1/homepage-v1.component.ts
View file @ 507c3221
import { Component } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { Navigation as NavigationService } from '../../services/navigation';
import { Session } from '../../services/session';
import { MindsTitle } from '../../services/ux/title';
import { Client } from '../../services/api';
import { LoginReferrerService } from '../../services/login-referrer.service';
import { Navigation as NavigationService } from '../../../services/navigation';
import { Session } from '../../../services/session';
import { MindsTitle } from '../../../services/ux/title';
import { Client } from '../../../services/api';
import { LoginReferrerService } from '../../../services/login-referrer.service';
@Component({
selector: 'm-homepage',
templateUrl: 'homepage.component.html',
selector: 'm-homepage__v1',
templateUrl: 'homepage-v1.component.html',
})
export class HomepageComponent {
export class HomepageV1Component implements OnDestroy {
readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
topbar: HTMLElement;
......
src/app/modules/homepage/v2/homepage-v2.component.html 0 → 100644
View file @ 507c3221
<div class="mf-jumpAnchor" #topAnchor></div>
<m-marketing class="m-homepage" pageTitle="Minds Social Network" i18n-pageTitle>
<div class="m-marketing__main m-marketing__section--style-2">
<div class="m-grid m-marketing__wrapper">
<div class="m-grid__column-7 m-grid__column-12--mobile m-marketing__body">
<h1 i18n>Minds <span class="m-homepage__yellowLine"></span></h1>
<h2 ngPreserveWhitespaces i18n>
Earn for your ideas
</h2>
<p class="m-marketing__description" i18n>
Free your mind and get paid for creating content, driving traffic and
referring friends. A place to have open conversations and bring people
together.
<br />
Take back control of your social media!
</p>
<div class="m-homepage__appButtons">
<a
href="https://itunes.apple.com/app/minds-com/id961771928"
target="_blank"
>
<img [src]="cdnAssetsUrl + 'assets/app-store.png'" />
</a>
<a
href="https://play.google.com/store/apps/details?id=com.minds.mobile"
target="_blank"
>
<img [src]="cdnAssetsUrl + 'assets/google-play.png'" />
</a>
</div>
</div>
<div class="m-grid__column-5 m-grid__column-12--mobile">
<m-homepage__registerForm></m-homepage__registerForm>
</div>
</div>
</div>
<ng-container slot="2">
<m-marketing__asFeaturedIn></m-marketing__asFeaturedIn>
<!-- Section 2 -->
<div class="m-marketing__section m-homepage__quotation">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-12 m-grid__column-10--mobile m-grid__column__skip-2--mobile m-marketing__body"
>
<div class="m-marketing__quotation">
<h3>“Minds is the anti-Facebook that pays you for your time.”</h3>
<h4>— Wired</h4>
</div>
</div>
</div>
</div>
<div class="m-marketing__section m-marketing__section--style-5">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
>
<h2 i18n>How does it work?</h2>
<p class="m-marketing__description" i18n>
Post videos, blogs, images and statuses. Message and video chat
securely with groups or directly with your friends. Discover great
content through trending feeds and hashtags.
</p>
<p class="m-marketing__description" i18n>
Earn tokens for daily contributions and use them to upgrade your
channel, boost your content for more reach and support other
creators.
</p>
<p class="m-marketing__description" i18n>
You can also receive direct payments in USD, Bitcoin or Ether as
rewards, tips or paid subscriptions from your fans.
</p>
<div class="m-marketing__actionButtons">
<a
class="m-marketing__link"
[href]="cdnAssetsUrl + 'assets/documents/Whitepaper-v0.5.pdf'"
target="_blank"
i18n
>
Download Whitepaper
</a>
</div>
</div>
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
>
<span>
<img
class="m-marketing__image--1"
[src]="cdnAssetsUrl + 'assets/homepage/homepage-2.png'"
/>
</span>
</div>
</div>
</div>
<!-- Section 3 -->
<div class="m-marketing__section m-marketing__section--style-4">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
>
<h2 i18n>Our principles</h2>
<ol class="m-marketing__description">
<li>
Our code is free and open source for maximum transparency and
accountability.
</li>
<li>
Our content policy is based on the First Amendment in order to
minimize bias and censorship.
</li>
<li>
Open discourse is essential to solve global issues and change
minds.
</li>
<li>
You control your privacy and algorithms.
</li>
<li>
You are rewarded for your contributions.
</li>
<li>
Build a resilient, democratized and self-sustainable network.
</li>
</ol>
</div>
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
>
<span>
<img
class="m-marketing__image--1"
[src]="cdnAssetsUrl + 'assets/homepage/homepage-3.png'"
/>
<span class="m-marketing__imageUX">
<span class="m-marketing__imageTick m-marketing__imageTick--left">
<i class="material-icons">done</i>
</span>
<img
class="m-marketing__image--2"
[src]="cdnAssetsUrl + 'assets/homepage/homepage-3-ux.png'"
/>
</span>
</span>
</div>
</div>
</div>
<!-- Section 4 -->
<div class="m-marketing__section m-marketing__section--style-5">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__body"
>
<h2 i18n>Open Discourse</h2>
<p class="m-marketing__description" i18n>
We believe that legal open discourse is the key to reducing violence
and radicalization, not censorship. All speech that is legal in the
United States can be posted to Minds, and we encourage open dialogue
to help bridge the gap in our world today.
</p>
<p class="m-marketing__description" i18n>
We are working closely with thought leaders like Daryl Davis on
deradicalizing through conversation and respect.
</p>
</div>
<div
class="m-grid__column-6 m-grid__column-12--mobile m-marketing__image"
>
<span>
<img
class="m-marketing__image--1"
[src]="cdnAssetsUrl + 'assets/homepage/homepage-4.png'"
/>
</span>
</div>
</div>
</div>
<!-- Final section -->
<div class="m-marketing__section m-marketing__section--tail">
<div class="m-grid m-marketing__wrapper">
<div
class="m-grid__column-12 m-grid__column-12--mobile m-marketing__body"
>
<h3 i18n>Take back control of your social media</h3>
<div class="m-marketing__actionButtons">
<button
class="mf-button mf-button--alt mf-button--gradient"
(click)="goToLoginPage()"
i18n
>
Join Minds Now
</button>
</div>
</div>
</div>
</div>
</ng-container>
</m-marketing>
src/app/modules/homepage/v2/homepage-v2.component.scss 0 → 100644
View file @ 507c3221
@import 'defaults';
m-homepage__v2 {
.m-marketing__main {
&.m-marketing__section--style-2 {
.m-marketing__body {
&::before {
transform: translate(311px, -80px);
clip-path: polygon(57% 0, 100% 0, 100% 15%, 18% 87%);
bottom: -80px;
@include m-theme() {
background: themed($m-amber-medium);
}
}
&::after {
content: '';
clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 100%);
background: #f5f6ff;
position: absolute;
bottom: -10px;
left: -100px;
height: 202px;
right: -500px;
z-index: -2;
}
@media screen and (max-width: $max-mobile) {
&::before {
transform: translate(161px, 205px);
}
&::after {
left: 0;
right: 0;
bottom: -750px;
}
}
}
@media screen and (max-width: $max-mobile) {
m-homepage__registerForm {
margin: 30px 10px 50px;
&::before {
content: '';
display: block;
position: absolute;
width: 393px;
height: 193px;
top: -66px;
left: -144px;
transform: translate(45px, 32px);
background: url('<%= APP_CDN %>/assets/marketing/deco_2-straight.svg')
no-repeat;
z-index: -1;
}
}
}
}
.m-marketing__image {
span {
&::before {
content: initial !important;
}
.m-homepage__cellphone {
//box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
height: auto !important;
object-fit: initial !important;
width: 333px !important;
transform: translateY(-25px);
}
}
}
}
.m-homepage__appButtons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 50%;
margin-top: 50px;
@media screen and(max-width: $m-grid-min-vp) {
width: 100%;
& > a:not(:first-child) {
margin-left: 18px;
justify-content: initial;
}
}
& > a {
width: 120px;
height: 37px;
img {
width: 100%;
}
}
}
.m-homepage__yellowLine {
display: inline-block;
width: 55px;
height: 5px;
margin-bottom: 3px;
@include m-theme() {
background-color: themed($m-amber-medium);
}
}
.m-homepage__joinMindsNow {
max-width: 90%;
@media screen and (max-width: $m-grid-min-vp) {
max-width: 100%;
}
}
.m-homepage__quotation {
margin-top: 116px;
margin-bottom: 161px;
}
}
.m-homepage {
margin-top: -52px;
}
src/app/modules/homepage/v2/homepage-v2.component.ts 0 → 100644
View file @ 507c3221
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Client } from '../../../services/api/client';
import { MindsTitle } from '../../../services/ux/title';
import { Router } from '@angular/router';
import { Navigation as NavigationService } from '../../../services/navigation';
import { LoginReferrerService } from '../../../services/login-referrer.service';
import { Session } from '../../../services/session';
@Component({
selector: 'm-homepage__v2',
templateUrl: 'homepage-v2.component.html',
})
export class HomepageV2Component implements OnDestroy {
readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
topbar: HTMLElement;
minds = window.Minds;
flags = {
canPlayInlineVideos: true,
};
constructor(
public client: Client,
public title: MindsTitle,
public router: Router,
public navigation: NavigationService,
private loginReferrer: LoginReferrerService,
public session: Session
) {
this.topbar = document.querySelector('.m-v2-topbar__Top');
this.title.setTitle('Minds Social Network', false);
if (this.session.isLoggedIn()) {
this.router.navigate(['/newsfeed']);
return;
}
if (/iP(hone|od)/.test(window.navigator.userAgent)) {
this.flags.canPlayInlineVideos = false;
}
this.topbar.classList.add('m-v2-topbar__noBackground');
}
ngOnDestroy() {
this.topbar.classList.remove('m-v2-topbar__noBackground');
}
goToLoginPage() {
this.router.navigate(['/login']);
}
registered() {
this.loginReferrer.navigate({
defaultUrl:
'/' + this.session.getLoggedInUser().username + ';onboarding=1',
});
}
}
src/app/modules/homepage/v2/register/register.component.html 0 → 100644
View file @ 507c3221
<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>
<input
type="password"
id="password"
formControlName="password"
i18n-placeholder="@@M__COMMON__PASSWORD"
readonly
onfocus="this.removeAttribute('readonly');"
/>
</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">
<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/v2/register/register.component.scss 0 → 100644
View file @ 507c3221
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;
}
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/v2/register/register.component.ts 0 → 100644
View file @ 507c3221
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/client';
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
);
}
}