mirror of
https://github.com/elyby/accounts-frontend.git
synced 2025-05-31 14:11:58 +05:30
Create app namespace for all absolute requires of app modules. Move all packages under packages yarn workspace
This commit is contained in:
SleepWalker
@@ -0,0 +1,83 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as Message } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import profileForm from '../../profileForm.scss';
|
||||
import messages from '../MultiFactorAuth.intl.json';
|
||||
import OsInstruction from './OsInstruction';
|
||||
import OsTile from './OsTile';
|
||||
import styles from './instructions.scss';
|
||||
import androidLogo from './images/android.svg';
|
||||
import appleLogo from './images/apple.svg';
|
||||
import windowsLogo from './images/windows.svg';
|
||||
|
||||
interface State {
|
||||
activeOs: null | 'android' | 'ios' | 'windows';
|
||||
}
|
||||
|
||||
export default class Instructions extends React.Component<{}, State> {
|
||||
state: State = {
|
||||
activeOs: null,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { activeOs } = this.state;
|
||||
|
||||
return (
|
||||
<div className={profileForm.formBody}>
|
||||
<div className={profileForm.formRow}>
|
||||
<p className={profileForm.description}>
|
||||
<Message {...messages.mfaIntroduction} />
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={profileForm.formRow}>
|
||||
<div
|
||||
className={classNames(styles.instructionContainer, {
|
||||
[styles.instructionActive]: !!activeOs,
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classNames(styles.osList, {
|
||||
[styles.androidActive]: activeOs === 'android',
|
||||
[styles.appleActive]: activeOs === 'ios',
|
||||
[styles.windowsActive]: activeOs === 'windows',
|
||||
})}
|
||||
>
|
||||
<OsTile
|
||||
className={styles.androidTile}
|
||||
logo={androidLogo}
|
||||
label="Google Play"
|
||||
onClick={event => this.onChangeOs(event, 'android')}
|
||||
/>
|
||||
<OsTile
|
||||
className={styles.appleTile}
|
||||
logo={appleLogo}
|
||||
label="App Store"
|
||||
onClick={event => this.onChangeOs(event, 'ios')}
|
||||
/>
|
||||
<OsTile
|
||||
className={styles.windowsTile}
|
||||
logo={windowsLogo}
|
||||
label="Windows Store"
|
||||
onClick={event => this.onChangeOs(event, 'windows')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={styles.osInstructionContainer}>
|
||||
{activeOs ? <OsInstruction os={activeOs} /> : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
onChangeOs(event: React.MouseEvent, osName: 'android' | 'ios' | 'windows') {
|
||||
event.preventDefault();
|
||||
|
||||
this.setState({
|
||||
activeOs: this.state.activeOs === osName ? null : osName,
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import React from 'react';
|
||||
import { FormattedMessage as Message } from 'react-intl';
|
||||
|
||||
import messages from '../MultiFactorAuth.intl.json';
|
||||
import styles from './instructions.scss';
|
||||
|
||||
type OS = 'android' | 'ios' | 'windows';
|
||||
|
||||
const linksByOs: {
|
||||
[K in OS]: {
|
||||
searchLink: string;
|
||||
featured: Array<{ link: string; label: string }>;
|
||||
};
|
||||
} = {
|
||||
android: {
|
||||
searchLink: 'https://play.google.com/store/search?q=totp%20authenticator',
|
||||
featured: [
|
||||
{
|
||||
link:
|
||||
'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2',
|
||||
label: 'Google Authenticator',
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp',
|
||||
label: 'FreeOTP Authenticator',
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://play.google.com/store/apps/details?id=com.authenticator.authservice',
|
||||
label: 'TOTP Authenticator',
|
||||
},
|
||||
],
|
||||
},
|
||||
ios: {
|
||||
searchLink:
|
||||
'https://linkmaker.itunes.apple.com/en-us?mediaType=ios_apps&term=authenticator',
|
||||
featured: [
|
||||
{
|
||||
link:
|
||||
'https://itunes.apple.com/ru/app/google-authenticator/id388497605',
|
||||
label: 'Google Authenticator',
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://itunes.apple.com/us/app/otp-auth-two-factor-authentication-for-pros/id659877384',
|
||||
label: 'OTP Auth',
|
||||
},
|
||||
{
|
||||
link: 'https://itunes.apple.com/us/app/2stp-authenticator/id954311670',
|
||||
label: '2STP Authenticator',
|
||||
},
|
||||
],
|
||||
},
|
||||
windows: {
|
||||
searchLink:
|
||||
'https://www.microsoft.com/be-by/store/search/apps?devicetype=mobile&q=authenticator',
|
||||
featured: [
|
||||
{
|
||||
link:
|
||||
'https://www.microsoft.com/en-us/store/p/microsoft-authenticator/9nblgggzmcj6',
|
||||
label: 'Microsoft Authenticator',
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://www.microsoft.com/en-us/store/p/authenticator/9nblggh08h54',
|
||||
label: 'Authenticator+',
|
||||
},
|
||||
{
|
||||
link:
|
||||
'https://www.microsoft.com/en-us/store/p/authenticator-for-windows/9nblggh4n8mx',
|
||||
label: 'Authenticator for Windows',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default function OsInstruction({ os }: { os: OS }) {
|
||||
return (
|
||||
<div className={styles.osInstruction}>
|
||||
<h3 className={styles.instructionTitle}>
|
||||
<Message {...messages.installOnOfTheApps} />
|
||||
</h3>
|
||||
|
||||
<ul className={styles.appList}>
|
||||
{linksByOs[os].featured.map(item => (
|
||||
<li key={item.label}>
|
||||
<a href={item.link} target="_blank">
|
||||
{item.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<div className={styles.otherApps}>
|
||||
<a href={linksByOs[os].searchLink} target="_blank">
|
||||
<Message {...messages.findAlternativeApps} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import styles from './instructions.scss';
|
||||
|
||||
export default function OsInstruction({
|
||||
className,
|
||||
logo,
|
||||
label,
|
||||
onClick,
|
||||
}: {
|
||||
className: string;
|
||||
logo: string;
|
||||
label: string;
|
||||
onClick: (event: React.MouseEvent<any>) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className={classNames(styles.osTile, className)} onClick={onClick}>
|
||||
<img className={styles.osLogo} src={logo} alt={label} />
|
||||
<div className={styles.osName}>{label}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<svg viewBox="0 0 70 80" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(-359.000000, -439.000000)" fill="#379070">
|
||||
<g transform="translate(272.000000, 105.000000)">
|
||||
<g transform="translate(87.000000, 334.000000)">
|
||||
<g>
|
||||
<path d="M65,30 C62.25,30 60,32.25 60,35 L60,55 C60,57.75 62.25,60 65,60 C67.75,60 70,57.75 70,55 L70,35 C70,32.25 67.75,30 65,30 L65,30 Z M5,30 C2.25,30 0,32.25 0,35 L0,55 C0,57.75 2.25,60 5,60 C7.75,60 10,57.75 10,55 L10,35 C10,32.25 7.75,30 5,30 L5,30 Z M12.5,57.5 C12.5,61.6425 15.8575,65 20,65 L20,65 L20,75 C20,77.75 22.25,80 25,80 C27.75,80 30,77.75 30,75 L30,65 L40,65 L40,75 C40,77.75 42.25,80 45,80 C47.75,80 50,77.75 50,75 L50,65 C54.1425,65 57.5,61.6425 57.5,57.5 L57.5,30 L12.5,30 L12.5,57.5 L12.5,57.5 Z"/>
|
||||
<path d="M57.36,25 C56.6,18.135 52.75,12.2025 47.2325,8.6225 L49.735,3.62 C50.3525,2.385 49.8525,0.8825 48.6175,0.265 C47.3825,-0.3525 45.88,0.1475 45.2625,1.3825 L42.7525,6.405 L42.1,6.145 C39.8675,5.4025 37.48,5 35,5 C32.52,5 30.1325,5.4025 27.9,6.145 L27.2475,6.405 L24.7375,1.3825 C24.12,0.1475 22.6175,-0.3525 21.3825,0.265 C20.1475,0.8825 19.6475,2.385 20.265,3.62 L22.7675,8.6225 C17.25,12.205 13.4,18.135 12.64,25 L12.64,27.5 L57.5,27.5 L57.5,25 L57.36,25 L57.36,25 Z M27.5,20 C26.12,20 25,18.88 25,17.5 C25,16.12 26.1175,15.0025 27.495,15 L27.5025,15 L27.5075,15 C28.885,15.0025 30.0025,16.12 30.0025,17.5 C30.0025,18.88 28.8825,20 27.5025,20 L27.5,20 Z M42.5,20 C41.12,20 40,18.88 40,17.5 C40,16.12 41.115,15.0025 42.495,15 L42.5,15 L42.5075,15 C43.885,15.0025 45.0025,16.12 45.0025,17.5 C45.0025,18.88 43.8825,20 42.5025,20 L42.5,20 Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,11 @@
|
||||
<svg viewBox="0 0 66 80" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(-474.000000, -439.000000)" fill="#D8D5CE">
|
||||
<g transform="translate(272.000000, 105.000000)">
|
||||
<g transform="translate(202.000000, 334.000000)">
|
||||
<path d="M54.835,42.5075 C54.735,32.375 63.0975,27.5175 63.47,27.275 C58.77,20.3975 51.45,19.4575 48.8425,19.3475 C42.6125,18.7175 36.6875,23.015 33.525,23.015 C30.3725,23.015 25.4925,19.44 20.325,19.535 C13.535,19.635 7.2725,23.4825 3.7775,29.565 C-3.2775,41.8075 1.97,59.9425 8.8475,69.8725 C12.2075,74.7325 16.215,80.19 21.475,79.995 C26.54,79.7925 28.4575,76.7175 34.58,76.7175 C40.7025,76.7175 42.425,79.995 47.7875,79.895 C53.2375,79.7925 56.6925,74.9425 60.03,70.0675 C63.8875,64.43 65.4775,58.97 65.57,58.69 C65.45,58.635 54.94,54.61 54.835,42.5075 L54.835,42.5075 Z M44.7625,12.775 C47.555,9.3875 49.44,4.6875 48.925,0 C44.9025,0.165 40.0275,2.68 37.1425,6.0575 C34.5525,9.055 32.2875,13.84 32.895,18.435 C37.385,18.785 41.9675,16.1525 44.7625,12.775 L44.7625,12.775 Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,11 @@
|
||||
<svg width="70px" height="70px" viewBox="0 0 70 70" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(-585.000000, -444.000000)" fill="#71A6B2">
|
||||
<g transform="translate(272.000000, 105.000000)">
|
||||
<g transform="translate(313.000000, 339.000000)">
|
||||
<path d="M0.0256666667,32.6666667 L0,9.912 L28,6.10866667 L28,32.6666667 L0.0256666667,32.6666667 Z M32.6666667,5.432 L69.9906667,0 L69.9906667,32.6666667 L32.6666667,32.6666667 L32.6666667,5.432 Z M70,37.3333333 L69.9906667,70 L32.6666667,64.75 L32.6666667,37.3333333 L70,37.3333333 Z M28,64.155 L0.0233333333,60.319 L0.021,37.3333333 L28,37.3333333 L28,64.155 Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 830 B |
@@ -0,0 +1 @@
|
||||
export { default } from './Instructions';
|
||||
@@ -0,0 +1,287 @@
|
||||
@import '~app/components/ui/fonts.scss';
|
||||
|
||||
.instructionTitle {
|
||||
font-family: $font-family-title;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.appList {
|
||||
margin: 10px 0;
|
||||
font-size: 11px;
|
||||
|
||||
li {
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
border-bottom-color: #666;
|
||||
border-bottom-style: dashed;
|
||||
}
|
||||
}
|
||||
|
||||
.otherApps {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 5px;
|
||||
font-size: 10px;
|
||||
|
||||
a {
|
||||
color: #9e9e9e;
|
||||
border-bottom-color: #9e9e9e;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 420px) {
|
||||
$boxHeight: 110px;
|
||||
$boxPadding: 15px;
|
||||
|
||||
.instructionContainer {
|
||||
position: relative;
|
||||
min-height: $boxHeight + $boxPadding * 2;
|
||||
|
||||
background: #fff;
|
||||
border: 1px #fff solid;
|
||||
|
||||
transition: 0.4s ease;
|
||||
}
|
||||
|
||||
.instructionActive {
|
||||
background: #ebe8e1;
|
||||
border-color: #d8d5ce;
|
||||
}
|
||||
|
||||
.osList {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: $boxPadding;
|
||||
height: $boxHeight;
|
||||
}
|
||||
|
||||
.osTile {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); // easeInOutQuart
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
font-family: $font-family-title;
|
||||
}
|
||||
|
||||
.osLogo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
height: 80px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.osName {
|
||||
font-size: 15px;
|
||||
margin: 10px 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.androidTile {
|
||||
$translateX: 0;
|
||||
|
||||
transform: translateX($translateX) scale(1);
|
||||
|
||||
&:hover {
|
||||
transform: translateX($translateX) scale(1.1);
|
||||
}
|
||||
|
||||
.androidActive & {
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.appleActive &,
|
||||
.windowsActive & {
|
||||
transform: translateX($translateX) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.appleTile {
|
||||
$translateX: 124px;
|
||||
$translateX: -51%;
|
||||
|
||||
transform: translateX($translateX) scale(1);
|
||||
left: 49%;
|
||||
|
||||
&:hover {
|
||||
transform: translateX($translateX) scale(1.1);
|
||||
}
|
||||
|
||||
.appleActive & {
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.androidActive &,
|
||||
.windowsActive & {
|
||||
transform: translateX($translateX) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.windowsTile {
|
||||
$translateX: 230px;
|
||||
$translateX: -100%;
|
||||
|
||||
transform: translateX($translateX) scale(1);
|
||||
left: 100%;
|
||||
|
||||
&:hover {
|
||||
transform: translateX($translateX) scale(1.1);
|
||||
}
|
||||
|
||||
.windowsActive & {
|
||||
transform: translateX(0);
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.appleActive &,
|
||||
.androidActive & {
|
||||
transform: translateX($translateX) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.osInstructionContainer {
|
||||
opacity: 0;
|
||||
transition: 0.4s;
|
||||
|
||||
.instructionActive & {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.osInstruction {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 15px;
|
||||
margin-left: 30%;
|
||||
padding-left: 15px;
|
||||
padding-bottom: 15px;
|
||||
min-height: $boxHeight;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
.instructionContainer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.osList {
|
||||
}
|
||||
|
||||
.osTile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
|
||||
background: #fff;
|
||||
$borderColor: #eee;
|
||||
border-top: 1px solid $borderColor;
|
||||
border-bottom: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
|
||||
transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); // easeOutCubic
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-color: $borderColor;
|
||||
}
|
||||
|
||||
.instructionActive & {
|
||||
border-bottom-color: $borderColor;
|
||||
}
|
||||
}
|
||||
|
||||
.osLogo {
|
||||
max-width: 30px;
|
||||
}
|
||||
|
||||
.osName {
|
||||
font-family: $font-family-title;
|
||||
font-size: 16px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@mixin commonNonActiveTile() {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.androidTile {
|
||||
z-index: 3;
|
||||
|
||||
.appleActive & {
|
||||
@include commonNonActiveTile;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
.windowsActive & {
|
||||
@include commonNonActiveTile;
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
.appleTile {
|
||||
z-index: 2;
|
||||
|
||||
.appleActive & {
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
|
||||
.androidActive &,
|
||||
.windowsActive & {
|
||||
@include commonNonActiveTile;
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
.windowsTile {
|
||||
z-index: 1;
|
||||
|
||||
.windowsActive & {
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
|
||||
.androidActive &,
|
||||
.appleActive & {
|
||||
@include commonNonActiveTile;
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
}
|
||||
|
||||
.osInstructionContainer {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
height: 100px;
|
||||
opacity: 0;
|
||||
transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
|
||||
width: 100%;
|
||||
box-shadow: inset 0 -1px #eee;
|
||||
|
||||
.instructionActive & {
|
||||
top: 50px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.osInstruction {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.otherApps {
|
||||
bottom: 8px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user