Skip to content

Minds Frontend
Minds Frontend
Source
...
Target
 
Commits (2)
Hide whitespace changes
Inline Side-by-side
Showing with 197 additions and 150 deletions
src/app/modules/auth/login.component.scss
View file @ 8f06abbe
......@@ -84,7 +84,7 @@ m-login {
padding: 50px 37px;
clip-path: polygon(0 0, 100% 8px, 99.99% 99%, 0% 100%);
clip-path: polygon(0 2%, 100% 0, 100% 97%, 0 95%);
h3 {
font-size: 24px;
......
src/app/modules/auth/register.component.scss
View file @ 8f06abbe
......@@ -59,7 +59,7 @@ m-register {
padding: 50px 37px;
clip-path: polygon(0 0, 100% 8px, 99.99% 99%, 0% 100%);
clip-path: polygon(0 2%, 100% 0, 100% 97%, 0 95%);
h3 {
font-size: 24px;
......
src/app/modules/onboarding-v2/onboarding.module.ts
View file @ 8f06abbe
......@@ -22,6 +22,7 @@ import { GroupsModule } from '../groups/groups.module';
import { OnboardingV2Service } from './service/onboarding.service';
import { Client } from '../../services/api/client';
import { Session } from '../../services/session';
import { PhoneVerificationComponent } from './steps/info/phone-input/input.component';
const routes: Routes = [
{
......@@ -83,6 +84,7 @@ const routes: Routes = [
ChannelsStepComponent,
ChannelListComponent,
GroupListComponent,
PhoneVerificationComponent,
],
providers: [
{
......
src/app/modules/onboarding-v2/page/onboarding.component.scss
View file @ 8f06abbe
......@@ -37,7 +37,7 @@ m-onboarding {
.m-onboarding__form {
display: block;
padding: 80px 70px;
padding: 55px 70px 80px;
color: #9b9b9b;
&::before {
......@@ -48,11 +48,11 @@ m-onboarding {
top: 0;
width: 100%;
height: 100%;
clip-path: polygon(0 0, 100% 8px, 99.99% 99%, 0% 100%);
clip-path: polygon(0 2%, 100% 0, 100% 97%, 0 95%);
z-index: -1;
}
@media screen and(max-width: $min-desktop) {
@media screen and(max-width: $m-grid-max-tablet) {
padding: 50px 20px;
}
......@@ -69,14 +69,12 @@ m-onboarding {
color: #9b9b9b;
@media screen and (max-width: $max-mobile) {
@media screen and (max-width: $m-grid-max-mobile) {
font-size: 16px;
line-height: 23px;
}
}
//clip-path: polygon(0 0, 100% 8px, 99.99% 99%, 0% 100%);
h1.m-onboarding__noticeTitle {
font-size: 20px;
line-height: 35px;
......@@ -111,6 +109,7 @@ m-onboarding {
font-size: 32px;
line-height: 43px;
color: #4a4a4a;
padding-bottom: 13px;
&.m-onboarding__mobileTitle {
font-size: 28px;
......@@ -145,7 +144,7 @@ m-onboarding {
.m-onboarding__controls {
position: relative;
width: 100%;
padding-top: 50px;
padding-top: 68px;
&::before {
//content: '';
......@@ -158,13 +157,13 @@ m-onboarding {
background: black;
background: linear-gradient(180deg, #f3f3f3 0%, transparent 56%);
@media screen and (min-width: 741px) and (max-width: $min-desktop) {
@media screen and (min-width: 741px) and (max-width: $m-grid-max-tablet) {
content: '';
width: calc(100% + 40px);
margin-left: -20px;
}
@media screen and (min-width: $min-desktop) {
@media screen and (min-width: $m-grid-max-tablet) {
content: '';
}
}
......@@ -235,6 +234,10 @@ m-onboarding {
display: flex;
flex-direction: column;
&.m-onboardingControl__dateOfBirth {
padding-top: 15px;
}
.m-onboardingControl__label {
& > span {
position: absolute;
......
src/app/modules/onboarding-v2/progressbar/progressbar.component.html
View file @ 8f06abbe
......@@ -8,7 +8,7 @@
[class.m-onboardingProgressbar__item--selected]="step.selected"
*ngFor="let step of steps; let i = index"
>
<span>{{ i + 1 }}</span>
<span class="m-onboardingProgressbarItem__number">{{ i + 1 }}</span>
<span>{{ step.name }}</span>
<div class="m-onboardingProgressbarItem__selector"></div>
</div>
......
src/app/modules/onboarding-v2/progressbar/progressbar.component.scss
View file @ 8f06abbe
......@@ -23,7 +23,7 @@
background-color: #dbdbdb;
z-index: 1;
@media screen and (min-width: 741px) and (max-width: $min-desktop) {
@media screen and (min-width: 741px) and (max-width: $m-grid-max-tablet) {
width: calc(100% + 40px);
margin-left: -20px;
}
......@@ -53,6 +53,11 @@
margin: 0 25px;
text-transform: uppercase;
.m-onboardingProgressbarItem__number {
font-size: 13px;
line-height: 18px;
}
.m-onboardingProgressbarItem__selector {
width: 18px;
height: 18px;
......
src/app/modules/onboarding-v2/steps/info/info.component.html
View file @ 8f06abbe
<div class="m-onboarding__controls">
<div class="m-onboarding__control" *ngIf="!confirming; else confirmBlock">
<div class="m-onboardingControl__label">
<label i18n>Mobile Phone Number</label>
<m-tooltip [anchor]="tooltipAnchor">
<span m-tooltip--anchor>𝒊</span>
<ng-container i18n>
Your mobile number may be used for additional account security, unique
identification and to help your friends find you. This data is private
and encrypted.
</ng-container>
</m-tooltip>
<span i18n>Optional</span>
</div>
<div class="m-onboarding__control">
<div class="m-onboarding__phoneInput">
<div class="m-onboarding__input">
<m-phone-input [(ngModel)]="number" ngDefaultControl></m-phone-input>
<div class="m-onboarding__error">
{{ numberError }}
</div>
</div>
<div
*ngIf="inProgress"
class="mdl-spinner mdl-js-spinner is-active"
[mdl]
></div>
<div
class="m-onboardingInput__saveButton"
[class.disabled]="!number || number.length < 13"
(click)="savePhoneNumber()"
*ngIf="!inProgress"
i18n
>
<i class="material-icons">check</i>
</div>
</div>
</div>
<div class="m-onboarding__control">
<m-onboarding__phoneverification
[tooltipAnchor]="tooltipAnchor"
#phoneVerification
>
</m-onboarding__phoneverification>
</div>
<ng-template #confirmBlock>
<div class="m-onboarding__control">
<div class="m-onboardingControl__label">
<label i18n>Verification Code</label>
<m-tooltip [anchor]="tooltipAnchor">
<span m-tooltip--anchor>𝒊</span>
<ng-container i18n>
Please enter the code we just sent to +{{ number }}, to verify your
number.
</ng-container>
</m-tooltip>
</div>
<div class="m-onboarding__input">
<input
type="number"
[ngModel]="code"
(ngModelChange)="codeChange($event)"
placeholder="eg. 198349"
i18n-placeholder
/>
<div class="m-onboarding__error">
{{ codeError }}
</div>
</div>
</div>
</ng-template>
<div class="m-onboarding__control">
<div class="m-onboardingControl__label">
<label data-minds="location" i18n>Location</label>
......@@ -89,15 +24,16 @@
<div class="m-onboarding__input">
<input type="text" data-minds="locationInput" [(ngModel)]="location" />
<div class="m-onboarding__error">
<div class="m-onboarding__error" *ngIf="locationError">
{{ locationError }}
</div>
</div>
</div>
<div class="m-onboarding__control">
<div class="m-onboarding__control m-onboardingControl__dateOfBirth">
<div class="m-onboardingControl__label">
<label data-minds="dateOfBirth" i18n>Date of Birth</label>
<span i18n>Optional</span>
<m-tooltip [anchor]="tooltipAnchor">
<span m-tooltip--anchor>𝒊</span>
......
src/app/modules/onboarding-v2/steps/info/info.component.ts
View file @ 8f06abbe
import { Component, HostListener } from '@angular/core';
import { Component, HostListener, ViewChild } from '@angular/core';
import { Session } from '../../../../services/session';
import { MindsUser } from '../../../../interfaces/entities';
import { Client } from '../../../../services/api';
import { Router } from '@angular/router';
import { PhoneVerificationComponent } from './phone-input/input.component';
@Component({
selector: 'm-onboarding__infoStep',
......@@ -15,19 +16,16 @@ export class InfoStepComponent {
selectedDay = '1';
selectedYear = new Date().getFullYear();
tooltipAnchor: 'top' | 'left' = 'left';
confirming: boolean = false;
inProgress: boolean = false;
number: string;
numberError: string;
code: number;
codeError: string;
secret: string;
location: string;
locationError: string;
date: string;
dateOfBirthError: string;
@ViewChild('phoneVerification', { static: false })
phoneVerification: PhoneVerificationComponent;
constructor(
private session: Session,
private client: Client,
......@@ -67,69 +65,13 @@ export class InfoStepComponent {
return true;
}
async savePhoneNumber() {
this.verify();
}
selectedDateChange(date: string) {
this.date = date;
}
codeChange(code: number) {
this.code = code;
if (code.toString().length === 6) {
this.confirm();
}
}
async verify() {
this.inProgress = true;
this.numberError = null;
try {
const response: any = await this.client.post(
'api/v2/blockchain/rewards/verify',
{
number: this.number,
}
);
this.secret = response.secret;
this.confirming = true;
} catch (e) {
this.numberError = e.message;
this.confirming = false;
}
this.inProgress = false;
}
async confirm() {
this.inProgress = true;
this.codeError = null;
try {
const response: any = await this.client.post(
'api/v2/blockchain/rewards/confirm',
{
number: this.number,
code: this.code,
secret: this.secret,
}
);
window.Minds.user.rewards = true;
} catch (e) {
this.codeError = e.message;
}
this.inProgress = false;
}
cancel() {
this.confirming = false;
this.code = null;
this.secret = null;
this.phoneVerification.reset();
this.inProgress = false;
this.numberError = null;
this.codeError = null;
this.locationError = null;
this.dateOfBirthError = null;
}
......
src/app/modules/onboarding-v2/steps/info/phone-input/input.component.html 0 → 100644
View file @ 8f06abbe
<ng-container *ngIf="!confirming; else confirmBlock">
<div class="m-onboardingControl__label">
<label i18n>Mobile Phone Number</label>
<m-tooltip [anchor]="tooltipAnchor">
<span m-tooltip--anchor>𝒊</span>
<ng-container i18n>
Your mobile number may be used for additional account security, unique
identification and to help your friends find you. This data is private
and encrypted.
</ng-container>
</m-tooltip>
<span i18n>Optional</span>
</div>
<div class="m-onboarding__control">
<div class="m-onboarding__phoneInput">
<div class="m-onboarding__input">
<m-phone-input [(ngModel)]="number" ngDefaultControl></m-phone-input>
<div class="m-onboarding__error" *ngIf="numberError">
{{ numberError }}
</div>
</div>
<div
*ngIf="inProgress"
class="mdl-spinner mdl-js-spinner is-active"
[mdl]
></div>
<div
class="m-onboardingInput__saveButton"
[class.disabled]="!number || number.length < 13"
(click)="savePhoneNumber()"
*ngIf="!inProgress"
i18n
>
<i class="material-icons">check</i>
</div>
</div>
</div>
</ng-container>
<ng-template #confirmBlock>
<p *ngIf="confirmed" i18n>Your phone number has been verified.</p>
<ng-container *ngIf="!confirmed">
<div class="m-onboardingControl__label">
<label i18n>Verification Code</label>
<m-tooltip [anchor]="tooltipAnchor">
<span m-tooltip--anchor>𝒊</span>
<ng-container i18n>
Please enter the code we just sent to +{{ number }}, to verify your
number.
</ng-container>
</m-tooltip>
</div>
<div class="m-onboarding__input">
<input
type="number"
[ngModel]="code"
(ngModelChange)="codeChange($event)"
placeholder="eg. 198349"
i18n-placeholder
/>
<div class="m-onboarding__error" *ngIf="codeError">
{{ codeError }}
</div>
</div>
</ng-container>
</ng-template>
src/app/modules/onboarding-v2/steps/info/phone-input/input.component.ts 0 → 100644
View file @ 8f06abbe
import { Component, Input, OnInit } from '@angular/core';
import { Client } from '../../../../../services/api/client';
@Component({
selector: 'm-onboarding__phoneverification',
templateUrl: 'input.component.html',
})
export class PhoneVerificationComponent implements OnInit {
@Input() tooltipAnchor: 'top' | 'left' = 'left';
number: string;
code: number;
secret: string;
numberError: string;
codeError: string;
inProgress: boolean = false;
confirming: boolean = false;
confirmed: boolean = false;
constructor(private client: Client) {}
ngOnInit() {}
async savePhoneNumber() {
this.verify();
}
async verify() {
this.inProgress = true;
this.numberError = null;
try {
const response: any = await this.client.post(
'api/v2/blockchain/rewards/verify',
{
number: this.number,
}
);
this.secret = response.secret;
this.confirming = true;
} catch (e) {
this.numberError = e.message;
this.confirming = false;
}
this.inProgress = false;
}
codeChange(code: number) {
this.code = code;
if (code.toString().length === 6) {
this.confirm();
}
}
async confirm() {
this.inProgress = true;
this.codeError = null;
try {
const response: any = await this.client.post(
'api/v2/blockchain/rewards/confirm',
{
number: this.number,
code: this.code,
secret: this.secret,
}
);
this.confirmed = true;
window.Minds.user.rewards = true;
} catch (e) {
this.codeError = e.message;
}
this.inProgress = false;
}
reset() {
this.confirming = false;
this.inProgress = false;
this.code = null;
this.secret = null;
this.numberError = null;
this.codeError = null;
}
}