Skip to content

Minds Frontend
Minds Frontend
Commit 2d72a854 authored by Marcelo Rivera's avatar Marcelo Rivera
Browse files
Options
  • Download

(fix): use old minds-form-register 

(fix): reverted lint on tasks/extract.i18n.xlf.ts
parent 3f3f6fb9
feat/homepage-redesign
1 merge request!623Homepage redesign
Pipeline #98197798 passed with stages
in 45 minutes and 59 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 394 deletions
src/app/modules/forms/forms.module.ts
View file @ 2d72a854
......@@ -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
View file @ 2d72a854
......@@ -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
View file @ 2d72a854
......@@ -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
View file @ 2d72a854
......@@ -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
View file @ 2d72a854
......@@ -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
View file @ 2d72a854
......@@ -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 deleted 100644 → 0
View file @ 3f3f6fb9
<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 deleted 100644 → 0
View file @ 3f3f6fb9
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 deleted 100644 → 0
View file @ 3f3f6fb9
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
);
}
}
Please register or to comment