Skip to content
Commits on Source (23)
Hide whitespace changes
Inline Side-by-side
src/app/common/components/date-dropdowns/date-dropdowns.component.scss
View file @ 0b853f91
......@@ -3,7 +3,6 @@ m-date__dropdowns {
select {
display: inline-block;
color: #4a4a4a;
background-color: #fff;
box-sizing: border-box;
margin: 0 10px 0 0;
......@@ -17,7 +16,12 @@ m-date__dropdowns {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
font-size: 16px;
line-height: 21px;
border: 1px solid #e8e8e8;
border-radius: 0;
border-radius: 2px;
@include m-theme() {
color: themed($m-grey-800);
background-color: themed($m-white);
border: 1px solid #e2e2e2;
}
}
}
src/app/common/components/marketing/marketing.component.ts
View file @ 0b853f91
......@@ -2,23 +2,40 @@ import {
ChangeDetectionStrategy,
Component,
Input,
OnDestroy,
OnInit,
} from '@angular/core';
import { MindsTitle } from '../../../services/ux/title';
import { V2TopbarService } from '../../layout/v2-topbar/v2-topbar.service';
@Component({
selector: 'm-marketing',
changeDetection: ChangeDetectionStrategy.OnPush,
templateUrl: 'marketing.component.html',
})
export class MarketingComponent implements OnInit {
export class MarketingComponent implements OnInit, OnDestroy {
@Input() pageTitle: string = '';
@Input() showBottombar: boolean = true;
@Input() forceBackground: boolean = true;
constructor(protected title: MindsTitle) {}
constructor(
protected title: MindsTitle,
private topbarService: V2TopbarService
) {}
ngOnInit() {
if (this.pageTitle) {
this.title.setTitle(this.pageTitle);
}
this.topbarService.toggleMarketingPages(
true,
this.showBottombar,
this.forceBackground
);
}
ngOnDestroy() {
this.topbarService.toggleMarketingPages(false);
}
}
src/app/common/layout/v2-topbar/v2-topbar.component.html
View file @ 0b853f91
......@@ -82,33 +82,37 @@
<ng-container
*mIfFeature="'register_pages-december-2019'; else singleButton"
>
<div class="m-v2-topbar__Container__LoginWrapper">
<a
class="m-v2-topbarLoginWrapper__login"
routerLink="/login"
title="Login"
i18n-title
>
Login
</a>
<ng-container *ngIf="!onAuthPages">
<div class="m-v2-topbar__Container__LoginWrapper">
<a
class="m-v2-topbarLoginWrapper__login"
routerLink="/login"
title="Login"
i18n-title
>
Login
</a>
<a
class="m-v2-topbarLoginWrapper__joinMindsNow"
routerLink="/register"
title="Join Minds Now"
i18n-title
>
Join Minds Now
</a>
</div>
<a
class="m-v2-topbarLoginWrapper__joinMindsNow"
routerLink="/register"
title="Join Minds Now"
i18n-title
>
Join Minds Now
</a>
</div>
</ng-container>
</ng-container>
<ng-template #singleButton>
<div class="m-v2-topbar__Container__LoginWrapper">
<a routerLink="/login" title="Login" i18n-title>
Login / Signup
</a>
</div>
<ng-container *ngIf="!onAuthPages">
<div class="m-v2-topbar__Container__LoginWrapper">
<a routerLink="/login" title="Login" i18n-title>
Login / Signup
</a>
</div>
</ng-container>
</ng-template>
</ng-template>
......
src/app/common/layout/v2-topbar/v2-topbar.component.scss
View file @ 0b853f91
......@@ -43,10 +43,10 @@
.m-v2-topbar {
padding: 15px 0 0;
max-width: 1084px;
margin: 0 auto 8px auto;
margin: 0 auto 5px auto;
@media screen and (max-width: 1168px) {
margin: 0 25px 8px 25px;
margin: 0 25px 5px;
}
.m-v2-topbarNavItem__Logo {
......@@ -55,17 +55,12 @@
}
}
.m-v2-topbar__Container__LoginWrapper {
& > a {
background: transparent !important;
}
& > a.m-v2-topbarLoginWrapper__login,
& > a.m-v2-topbarLoginWrapper__joinMindsNow {
margin-right: 40px;
@include m-theme() {
border: 1px solid themed($m-black-always);
color: themed($m-black-always);
}
.m-v2-topbar__Container__LoginWrapper > a {
margin-right: 40px;
@include m-theme() {
background: transparent;
border: 1px solid themed($m-black-always);
color: themed($m-black-always);
}
}
}
......
src/app/common/layout/v2-topbar/v2-topbar.component.ts
View file @ 0b853f91
......@@ -13,6 +13,8 @@ import { DynamicHostDirective } from '../../directives/dynamic-host.directive';
import { NotificationsToasterComponent } from '../../../modules/notifications/toaster.component';
import { ThemeService } from '../../../common/services/theme.service';
import { V2TopbarService } from './v2-topbar.service';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { Location } from '@angular/common';
@Component({
selector: 'm-v2-topbar',
......@@ -23,7 +25,9 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
minds = window.Minds;
timeout;
isTouchScreen = false;
forceBackground: boolean = true;
showBackground: boolean = true;
showSeparateLoginBtns: boolean = false;
marketingPages: boolean = false;
showBottombar: boolean = true;
......@@ -33,17 +37,25 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
componentRef;
componentInstance: NotificationsToasterComponent;
onAuthPages: boolean = false; // sets to false if we're on login or register pages
router$;
constructor(
protected session: Session,
protected cd: ChangeDetectorRef,
private themeService: ThemeService,
protected componentFactoryResolver: ComponentFactoryResolver,
protected topbarService: V2TopbarService
protected topbarService: V2TopbarService,
protected router: Router
) {}
ngOnInit() {
this.loadComponent();
this.session.isLoggedIn(() => this.detectChanges());
this.listen();
this.topbarService.setContainer(this);
}
......@@ -68,16 +80,24 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
* @param value
* @param showBottombar
*/
toggleMarketingPages(value: boolean, showBottombar = true) {
toggleMarketingPages(
value: boolean,
showBottombar = true,
forceBackground: boolean = true
) {
this.marketingPages = value;
this.showSeparateLoginBtns = value;
this.showBottombar = value && showBottombar;
this.forceBackground = forceBackground;
this.onScroll();
this.detectChanges();
}
@HostListener('window:scroll')
onScroll() {
this.showBackground = this.marketingPages
this.showBackground = this.forceBackground
? true
: this.marketingPages
? window.document.body.scrollTop > 52
: true;
}
......@@ -110,4 +130,27 @@ export class V2TopbarComponent implements OnInit, OnDestroy {
clearTimeout(this.timeout);
}
}
private listen() {
this.setOnAuthPages(this.router.url);
this.router$ = this.router.events.subscribe(
(navigationEvent: NavigationEnd) => {
if (navigationEvent instanceof NavigationEnd) {
if (!navigationEvent.urlAfterRedirects) {
return;
}
this.setOnAuthPages(
navigationEvent.urlAfterRedirects || navigationEvent.url
);
}
}
);
}
private setOnAuthPages(url) {
this.onAuthPages = url === '/login' || url === '/register';
this.detectChanges();
}
}
src/app/common/layout/v2-topbar/v2-topbar.service.ts
View file @ 0b853f91
......@@ -13,9 +13,17 @@ export class V2TopbarService {
return this;
}
toggleMarketingPages(value: boolean, showBottombar: boolean = true) {
toggleMarketingPages(
value: boolean,
showBottombar: boolean = true,
forceBackground: boolean = true
) {
if (this.container) {
this.container.toggleMarketingPages(value, showBottombar);
this.container.toggleMarketingPages(
value,
showBottombar,
forceBackground
);
}
}
}
src/app/modules/auth/login.component.scss
View file @ 0b853f91
......@@ -90,11 +90,15 @@ m-login {
font-size: 36px;
line-height: 48px;
font-weight: bold;
@include m-theme() {
color: themed($m-grey-800);
}
}
.mdl-cell {
margin: 0;
padding-bottom: 14px;
padding-bottom: 25px;
}
form {
......@@ -112,6 +116,17 @@ m-login {
padding: 10px 15px;
height: 37px;
font-weight: normal;
@include m-theme() {
color: themed($m-grey-800);
}
&:active,
&:focus {
@include m-theme() {
outline: 1px solid themed($m-blue);
}
}
}
&.m-loginBox__bigButton {
......@@ -138,6 +153,10 @@ m-login {
label:not(.mdl-checkbox) {
display: inline-block;
margin-bottom: 10px;
@include m-theme() {
color: themed($m-grey-300);
}
}
label.mdl-checkbox {
......
src/app/modules/auth/login.component.ts
View file @ 0b853f91
......@@ -68,7 +68,7 @@ export class LoginComponent implements OnInit, OnDestroy {
this.newDesign = this.featuresService.has('register_pages-december-2019');
if (this.newDesign) {
this.topbarService.toggleMarketingPages(true);
this.topbarService.toggleMarketingPages(true, false, false);
}
}
......
src/app/modules/auth/register.component.html
View file @ 0b853f91
......@@ -3,7 +3,7 @@
*mIfFeature="'register_pages-december-2019'; else registerBlock"
>
<div
class="m-grid__column-6 m-grid__column__skip-4 m-grid__column-8--tablet m-grid__column__skip-3--tablet m-grid__column-10--mobile m-grid__column__skip-2--mobile"
class="m-grid__column-6 m-grid__column__skip-4 m-grid__column-8--tablet m-grid__column__skip-3--tablet m-grid__column-12--mobile m-grid__column__skip-1--mobile"
>
<div class="m-register__wrapper">
<minds-form-register
......@@ -11,6 +11,7 @@
[showBigButton]="true"
[showPromotions]="false"
[showLabels]="true"
[showInlineErrors]="true"
(done)="registered()"
>
</minds-form-register>
......
src/app/modules/auth/register.component.scss
View file @ 0b853f91
......@@ -51,13 +51,14 @@ m-register {
}
minds-form-register {
@media screen and (max-width: $m-grid-max-mobile) {
padding: 48px 25px;
}
padding: 86px 67px 150px;
display: block;
background-color: #fcfcfc;
padding: 86px 67px;
@media screen and (max-width: $m-grid-max-mobile) {
padding-left: 25px;
padding-right: 25px;
}
clip-path: polygon(0 2%, 100% 0, 100% 97%, 0 95%);
......@@ -66,22 +67,29 @@ m-register {
line-height: 36px;
font-weight: bold;
margin-bottom: 4px;
@include m-theme() {
color: themed($m-grey-800);
}
}
.m-register__alreadyAUser {
display: inline-block;
font-size: 14px;
line-height: 19px;
color: #9b9b9b;
margin-bottom: 19px;
font-weight: 400;
color: #9b9b9b;
a {
font-weight: 400;
color: #0091ff;
}
}
.mdl-cell {
margin: 0;
padding-bottom: 14px;
padding-bottom: 25px;
}
form {
......@@ -99,6 +107,17 @@ m-register {
padding: 10px 15px;
height: 37px;
font-weight: normal;
@include m-theme() {
color: themed($m-grey-800);
}
&:active,
&:focus {
@include m-theme() {
outline: 1px solid themed($m-blue);
}
}
}
}
......@@ -108,6 +127,15 @@ m-register {
line-height: 19px;
}
label:not(.mdl-checkbox) {
display: inline-block;
margin-bottom: 10px;
@include m-theme() {
color: themed($m-grey-300);
}
}
label.mdl-checkbox {
display: flex;
align-items: center;
......@@ -115,342 +143,6 @@ m-register {
margin-bottom: 0;
}
//.m-register--hero {
// position: relative;
//
// background-image: url('<%= APP_CDN %>/assets/videos/what-1/what-1.jpg');
// background-size: cover;
// background-position: center center;
//
// .m-register--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 12px;
// }
// }
//
// .m-register--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-register--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-register--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: 110px;
// font-weight: 800;
// letter-spacing: 1.25px;
// line-height: 1;
//
// @media screen and (max-width: 720px) {
// font-size: 42px;
// }
// }
//
// h3 {
// font-size: 26px;
// 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-register--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 {
// display: none;
// }
// .m-login-box input {
// border: 0;
// border-radius: 3px;
// font-weight: 600;
// -webkit-font-smoothing: antialiased;
// text-rendering: optimizeLegibility;
// font-family: Roboto;
// letter-spacing: 1px;
// @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;
// @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;
// 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-register--grid {
// .m-register--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-register {
// .m-register--section {
// height: 300px;
// align-items: center;
// justify-content: center;
// display: flex;
// font-weight: 100;
// font-size: 41px;
//
// display: block;
// text-align: center;
// padding: 80px 0;
// height: auto;
//
// @include m-theme() {
// background-color: themed($m-white);
// }
//
// @media screen and (max-width: 720px) {
// padding: 16px 0;
// }
//
// h1 {
// font-size: 72px;
// font-weight: 600;
// font-weight: 800;
// letter-spacing: 0.25px;
// margin-left: 8px;
// margin-right: 8px;
// @include m-theme() {
// color: themed($m-grey-800);
// }
//
// @media screen and (max-width: 720px) {
// font-size: 28px;
// }
// }
//
// h2 {
// font-size: 56px;
// line-height: 1;
// font-weight: 600;
// letter-spacing: 1.25px;
// @include m-theme() {
// color: themed($m-grey-800);
// }
//
// @media screen and (max-width: 720px) {
// font-size: 22px;
// }
//
// &.m-hompeage--wide-letters {
// letter-spacing: 4px;
// }
// }
//
// h4 {
// font-weight: 400;
// font-size: 32px;
// letter-spacing: 4px;
//
// @media screen and (max-width: 1250px) {
// font-size: 24px;
// }
// .m-break--8spaces {
// padding-left: 60px;
// }
// }
//
// h5 {
// font-size: 12px;
// letter-spacing: 0.75px;
// line-height: 1;
// margin: 0;
// margin-top: -18px;
// text-rendering: optimizeLegibility;
// -webkit-font-smoothing: antialiased;
// text-transform: uppercase;
// @include m-theme() {
// color: themed($m-grey-200);
// }
//
// @media screen and (max-width: 720px) {
// margin-top: 0;
// }
// }
// }
//
// .m-register--section--with-video {
// position: relative;
// overflow: hidden;
// padding-bottom: 0;
//
// .m-register--section--video--overlay {
// position: absolute;
// z-index: 1;
// width: 100%;
// }
// }
//
// .m-register--section--video {
// overflow: hidden;
// min-width: 100%;
// min-height: 100%;
// position: relative;
//
// video {
// min-width: 100%;
// min-height: 100%;
// top: 0;
// left: 50%;
// transform: translateX(-50%);
// position: absolute;
// }
// }
//}
//
//.m-footer {
// padding: 28px;
// min-height: 150px;
// position: relative;
// @include m-theme() {
// background-color: themed($m-white);
// }
//
// .copyright {
// display: block;
// padding: 16px 0;
// width: 100%;
// text-align: center;
// font-size: 11px;
// font-weight: bold;
// }
//}
.mdl-card__actions {
flex-direction: row;
align-items: center;
......@@ -473,11 +165,50 @@ m-register {
}
}
}
}
@media screen and (min-width: $max-mobile) and (max-width: 760px) {
minds-form-register {
padding: 40px 20px;
.mdl-checkbox {
&.is-checked {
.mdl-checkbox__tick-outline {
@include m-theme() {
background-color: themed($m-blue);
}
}
}
.mdl-checkbox__box-outline {
@include m-theme() {
border: 1px solid themed($m-grey-100);
}
}
}
@media screen and(max-width: 1250px) {
label.mdl-checkbox {
margin-bottom: 20px;
}
.mdl-card__actions {
flex-direction: column;
align-items: flex-start;
}
}
.m-register__error,
.m-register__formError {
font-size: 14px;
line-height: 19px;
@include m-theme() {
color: themed($m-red) !important;
}
}
.m-register__formError {
margin-top: 20px;
}
.m-register__error {
margin-top: 3px;
text-align: right;
}
}
}
......
src/app/modules/auth/register.component.ts
View file @ 0b853f91
......@@ -56,7 +56,7 @@ export class RegisterComponent implements OnInit, OnDestroy {
this.newDesign = this.featuresService.has('register_pages-december-2019');
if (this.newDesign) {
this.topbarService.toggleMarketingPages(true);
this.topbarService.toggleMarketingPages(true, false, false);
}
}
......
src/app/modules/forms/popover-validation/popover.component.scss
View file @ 0b853f91
......@@ -25,6 +25,8 @@ m-popover {
border-width: 0 10px 10px 10px;
transition-duration: 0.3s;
transition-property: transform;
height: 24px;
@include m-theme() {
border-color: transparent transparent themed($m-white) transparent;
}
......
src/app/modules/forms/popover-validation/popover.component.ts
View file @ 0b853f91
......@@ -3,6 +3,8 @@ import {
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Output,
ViewChild,
} from '@angular/core';
......@@ -22,6 +24,8 @@ export class PopoverComponent {
hidden: boolean = false;
@Output() change: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor(protected cd: ChangeDetectorRef) {}
show(): void {
......@@ -53,7 +57,10 @@ export class PopoverComponent {
this.numbersCheck &&
this.spacesCheck
) {
this.change.emit(true);
setTimeout(() => this.hide(true), 500);
} else {
this.change.emit(false);
}
this.detectChanges();
}
......
src/app/modules/forms/register/register.html
View file @ 0b853f91
<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"
[hidden]="showInlineErrors || !errorMessage"
>
<div class="mdl-card__supporting-text mdl-color-text--blue-grey-50">
{{errorMessage}}
<ng-container *ngTemplateOutlet="errorTemplate"></ng-container>
</div>
</div>
<h3 *ngIf="showTitle">Join the Minds revolution</h3>
<span class="m-register__alreadyAUser" *ngIf="showTitle"
>Already have an account? <a [routerLink]="'/login'">login</a></span
>
<ng-template #errorTemplate>
{{ errorMessage }}
</ng-template>
<h3 *ngIf="showTitle">Join the Minds Revolution</h3>
<span class="m-register__alreadyAUser" *ngIf="showTitle">
Already have an account? <a [routerLink]="'/login'">Login</a>
</span>
<!-- START: Register -->
<form
......@@ -36,6 +41,20 @@
onfocus="this.removeAttribute('readonly');"
[class.m-input--hide-placeholder]="showLabels"
/>
<div class="m-register__error" *ngIf="showError('username')">
<ng-container
*ngIf="this.form.get('username').errors.minlength"
i18n="@@MINDS__REGISTER__EXCEPTION__USERNAME_TOO_SHORT"
>
Must be at least 4 characters long
</ng-container>
<ng-container
*ngIf="this.form.get('username').errors.maxlength"
i18n="@@MINDS__REGISTER__EXCEPTION__USERNAME_TOO_LONG"
>
Cannot be longer than 128 characters
</ng-container>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col">
......@@ -50,12 +69,20 @@
i18n-placeholder="email placeholder|@@FORMS__REGISTER__EMAIL_PLACEHOLDER"
[class.m-input--hide-placeholder]="showLabels"
/>
<div class="m-register__error" *ngIf="showError('email')">
<ng-container
*ngIf="this.form.get('email').errors.email"
i18n="@@MINDS__REGISTER__EXCEPTION__INVALID_EMAIL"
>
Invalid email
</ng-container>
</div>
</div>
<div class="mdl-cell mdl-cell--12-col" style="position: relative">
<label for="password" *ngIf="showLabels" i18n>
Password
</label>
<m-popover #popover>
<m-popover (change)="onPopoverChange($event)" #popover>
<input
type="password"
id="password"
......@@ -86,6 +113,17 @@
onfocus="this.removeAttribute('readonly');"
[class.m-input--hide-placeholder]="showLabels"
/>
<div
class="m-register__error"
*ngIf="this.form.get('password2').dirty || this.form.get('password2').touched"
>
<ng-container
*ngIf="this.form.errors?.passwordConfirming"
i18n="@@MINDS__REGISTER__EXCEPTION__INVALID_EMAIL"
>
Passwords must match
</ng-container>
</div>
</div>
<div
......@@ -102,6 +140,13 @@
</div>
</div>
<div
class="m-register__formError"
*ngIf="showInlineErrors && showBigButton && errorMessage"
>
<ng-container *ngTemplateOutlet="errorTemplate"></ng-container>
</div>
<div class="mdl-card__actions">
<div>
<label
......@@ -160,7 +205,7 @@
<button
class="mf-button mf-button--alt"
(click)="register($event)"
[disabled]="!this.form.valid || inProgress"
[disabled]="!this.form.valid|| this.passwordFieldValid || inProgress"
*ngIf="showBigButton"
>
<ng-container i18n="@@FORMS__REGISTER__JOIN_MINDS_NOW_ACTION">
......
src/app/modules/forms/register/register.ts
View file @ 0b853f91
......@@ -5,8 +5,15 @@ import {
Input,
Output,
NgZone,
OnInit,
} from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import {
FormGroup,
FormBuilder,
Validators,
AbstractControl,
ValidationErrors,
} from '@angular/forms';
import { Client } from '../../../services/api';
import { Session } from '../../../services/session';
......@@ -21,13 +28,14 @@ import { FeaturesService } from '../../../services/features.service';
selector: 'minds-form-register',
templateUrl: 'register.html',
})
export class RegisterForm {
export class RegisterForm implements OnInit {
@Input() referrer: string;
@Input() parentId: string = '';
@Input() showTitle: boolean = false;
@Input() showBigButton: boolean = false;
@Input() showPromotions: boolean = true;
@Input() showLabels: boolean = false;
@Input() showInlineErrors: boolean = false;
@Output() done: EventEmitter<any> = new EventEmitter();
......@@ -38,6 +46,7 @@ export class RegisterForm {
captcha: string;
takenUsername: boolean = false;
usernameValidationTimeout: any;
passwordFieldValid: boolean = false;
showFbForm: boolean = false;
......@@ -56,16 +65,26 @@ export class RegisterForm {
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(),
});
this.form = fb.group(
{
username: [
'',
[
Validators.required,
Validators.minLength(4),
Validators.maxLength(128),
],
],
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.required],
password2: ['', [Validators.required]],
tos: [false, Validators.requiredTrue],
exclusive_promotions: [false],
captcha: [''],
previousUrl: this.routerHistoryService.getPreviousUrl(),
},
{ validators: [this.passwordConfirmingValidator] }
);
}
ngOnInit() {
......@@ -74,6 +93,20 @@ export class RegisterForm {
}
}
showError(field: string) {
return (
this.showInlineErrors &&
this.form.get(field).invalid &&
(this.form.get(field).dirty || this.form.get(field).touched)
);
}
passwordConfirmingValidator(c: AbstractControl): ValidationErrors | null {
if (c.get('password').value !== c.get('password2').value) {
return { passwordConfirming: true };
}
}
register(e) {
e.preventDefault();
this.errorMessage = '';
......@@ -83,7 +116,7 @@ export class RegisterForm {
return;
}
//re-enable cookies
// re-enable cookies
document.cookie =
'disabled_cookies=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
......@@ -121,11 +154,11 @@ export class RegisterForm {
}
if (e.status === 'failed') {
//incorrect login details
// incorrect login details
this.errorMessage = 'RegisterException::AuthenticationFailed';
this.session.logout();
} else if (e.status === 'error') {
//two factor?
// two factor?
this.errorMessage = e.message;
this.session.logout();
} else {
......@@ -177,4 +210,8 @@ export class RegisterForm {
onPasswordBlur() {
this.popover.hide();
}
onPopoverChange(valid: boolean) {
this.passwordFieldValid = !valid;
}
}
src/app/modules/homepage-v2/homepage-v2.component.html
View file @ 0b853f91
......@@ -2,6 +2,8 @@
<m-marketing
class="m-homepage"
[showBottombar]="false"
[forceBackground]="false"
[class.m-homepage__formExperiment]="!!registerForm"
pageTitle="Minds Social Network"
i18n-pageTitle
......@@ -82,6 +84,7 @@
[showBigButton]="true"
[showPromotions]="false"
[showLabels]="true"
[showInlineErrors]="true"
(done)="navigate()"
#registerForm
>
......
src/app/modules/homepage-v2/homepage-v2.component.scss
View file @ 0b853f91
......@@ -212,11 +212,19 @@ m-homepage__v2 {
line-height: 32px;
font-weight: bold;
margin: 0;
@include m-theme() {
color: themed($m-grey-800);
}
}
.m-register__alreadyAUser {
display: none;
}
.mdl-cell {
margin: 0;
padding-bottom: 14px;
padding-bottom: 25px;
}
form {
......@@ -231,6 +239,17 @@ m-homepage__v2 {
padding: 10px 15px;
height: 37px;
font-weight: normal;
@include m-theme() {
color: themed($m-grey-800);
}
&:active,
&:focus {
@include m-theme() {
outline: 1px solid themed($m-blue);
}
}
}
}
......@@ -242,7 +261,11 @@ m-homepage__v2 {
label:not(.mdl-checkbox) {
display: inline-block;
margin-bottom: 14px;
margin-bottom: 10px;
@include m-theme() {
color: themed($m-grey-300);
}
}
label.mdl-checkbox {
......@@ -277,6 +300,51 @@ m-homepage__v2 {
}
}
}
.m-register__error,
.m-register__formError {
font-size: 14px;
line-height: 19px;
@include m-theme() {
color: themed($m-red) !important;
}
}
.m-register__formError {
margin-top: 20px;
}
.m-register__error {
margin-top: 3px;
text-align: right;
}
.mdl-checkbox {
&.is-checked {
.mdl-checkbox__tick-outline {
@include m-theme() {
background-color: themed($m-blue);
}
}
}
.mdl-checkbox__box-outline {
@include m-theme() {
border: 1px solid themed($m-grey-100);
}
}
}
@media screen and(max-width: 1250px) {
label.mdl-checkbox {
margin-bottom: 20px;
}
.mdl-card__actions {
flex-direction: column;
align-items: flex-start;
}
}
}
@media screen and (max-width: $m-grid-max-mobile) {
......
src/app/modules/homepage-v2/homepage-v2.component.ts
View file @ 0b853f91
......@@ -13,7 +13,7 @@ import { FeaturesService } from '../../services/features.service';
selector: 'm-homepage__v2',
templateUrl: 'homepage-v2.component.html',
})
export class HomepageV2Component implements OnDestroy {
export class HomepageV2Component {
@ViewChild('registerForm', { static: false }) registerForm: RegisterForm;
readonly cdnAssetsUrl: string = window.Minds.cdn_assets_url;
......@@ -27,7 +27,6 @@ export class HomepageV2Component implements OnDestroy {
public navigation: NavigationService,
public session: Session,
private loginReferrer: LoginReferrerService,
private topbarService: V2TopbarService,
private featuresService: FeaturesService
) {
this.title.setTitle('Minds Social Network', false);
......@@ -36,12 +35,6 @@ export class HomepageV2Component implements OnDestroy {
this.router.navigate(['/newsfeed']);
return;
}
this.topbarService.toggleMarketingPages(true, false);
}
ngOnDestroy() {
this.topbarService.toggleMarketingPages(false);
}
navigate() {
......
src/app/modules/onboarding-v2/page/onboarding.component.scss
View file @ 0b853f91
......@@ -83,11 +83,16 @@ m-onboarding {
h2.m-onboarding__noticeTitle {
font-size: 32px;
font-weight: bold;
line-height: 32px;
margin-top: 0;
@include m-theme() {
color: themed($m-grey-800);
}
}
& > h1 {
h1 {
font-size: 20px;
line-height: 44px;
font-weight: bold;
......@@ -105,11 +110,12 @@ m-onboarding {
}
}
& > h2 {
h2 {
font-size: 32px;
line-height: 43px;
color: #4a4a4a;
padding-bottom: 13px;
font-weight: bold;
&.m-onboarding__mobileTitle {
font-size: 28px;
......@@ -235,27 +241,38 @@ m-onboarding {
flex-direction: column;
&.m-onboardingControl__dateOfBirth {
position: relative;
padding-top: 15px;
}
.m-onboardingControl__label {
& > label {
font-size: 14px;
line-height: 19px;
margin-bottom: 8px;
}
& > span {
font-style: italic;
position: absolute;
right: 0;
top: 0;
}
}
& > * {
margin-bottom: 8px;
}
input[type='text'],
input[type='number'] {
display: block;
width: 100%;
height: 36px;
border: 1px solid #e8e8e8;
font-size: 14px;
padding-left: 8px;
margin-bottom: 8px;
@include m-theme() {
color: themed($m-grey-800);
}
&:active,
&:focus {
......@@ -272,6 +289,7 @@ m-onboarding {
m-phone-input {
display: flex;
margin-bottom: 8px;
.m-phone-input--wrapper {
justify-content: flex-start;
......@@ -284,6 +302,12 @@ m-onboarding {
width: 100%;
padding-left: 8px;
font-size: 14px;
@include m-theme() {
color: themed($m-grey-800);
}
&:active,
&:focus {
outline: 1px solid #4a90e2;
......@@ -333,6 +357,7 @@ m-onboarding {
margin-left: 10px;
.m-tooltip--anchor {
font-weight: bold;
color: rgba(0, 0, 0, 0.5);
}
......@@ -354,6 +379,10 @@ m-onboarding {
& > *:not(:first-child) {
margin-left: 30px;
}
a {
cursor: pointer;
}
}
}
}
......@@ -361,11 +390,16 @@ m-onboarding {
.mf-button--hollow {
border-color: #e7e7e7 !important;
color: #9b9b9b !important;
font-size: 16px !important;
line-height: 21px !important;
font-weight: 300 !important;
}
.mf-button--alt {
background-color: #5dbac0 !important;
border-color: #5dbac0 !important;
color: white !important;
font-size: 20px !important;
line-height: 26px !important;
}
}
src/app/modules/onboarding-v2/progressbar/progressbar.component.scss
View file @ 0b853f91
......@@ -47,10 +47,12 @@
margin-left: 0;
}
flex-grow: 1;
display: flex;
flex-direction: column;
width: 72px;
margin: 0 25px;
min-width: 72px;
max-width: 122px;
margin: 0 20px;
text-transform: uppercase;
.m-onboardingProgressbarItem__number {
......@@ -61,6 +63,7 @@
.m-onboardingProgressbarItem__selector {
width: 18px;
height: 18px;
margin-top: 10px;
border-radius: 100%;
background-color: #d5d5d5;
......