diff --git a/src/components/profile/multiFactorAuth/MultiFactorAuth.intl.json b/src/components/profile/multiFactorAuth/MultiFactorAuth.intl.json index 9008bb3..0907617 100644 --- a/src/components/profile/multiFactorAuth/MultiFactorAuth.intl.json +++ b/src/components/profile/multiFactorAuth/MultiFactorAuth.intl.json @@ -4,7 +4,7 @@ "mfaIntroduction": "First of all you need to install one of suggested apps on your phone. This app will generate auth codes for you. Please choose your OS to get corresponding installation links.", "installOnOfTheApps": "Install one of the following apps:", - "getAlternativeApps": "Get alternative apps", + "findAlternativeApps": "Find alternative apps", "theAppIsInstalled": "The app is installed", "scanQrCode": "Open your favorite QR scanner app and scan the following QR code:", diff --git a/src/components/profile/multiFactorAuth/instructions/OsInstruction.js b/src/components/profile/multiFactorAuth/instructions/OsInstruction.js index 105a161..b048135 100644 --- a/src/components/profile/multiFactorAuth/instructions/OsInstruction.js +++ b/src/components/profile/multiFactorAuth/instructions/OsInstruction.js @@ -9,24 +9,57 @@ import styles from './instructions.scss'; type OS = 'android'|'ios'|'windows'; const linksByOs: {[key: OS]: Array<{link: string, label: string}>} = { - android: [ - { - link: '', - label: 'Google Authenticator' - }, - { - link: '', - label: 'FreeOTP Authenticator' - }, - { - link: '', - label: 'TOTP Authenticator' - } - ], - ios: [ - ], - windows: [ - ] + android: { + storeSearch: 'https://play.google.com/store/search?q=totp%20authenticator', + recommendations: [ + { + 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: { + storeSearch: 'https://linkmaker.itunes.apple.com/en-us?mediaType=ios_apps&term=authenticator', + recommendations: [ + { + 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: { + storeSearch: 'https://www.microsoft.com/be-by/store/search/apps?devicetype=mobile&q=authenticator', + recommendations: [ + { + 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({ @@ -41,9 +74,9 @@ export default function OsInstruction({
- - + +
diff --git a/src/components/profile/multiFactorAuth/instructions/images/android.svg b/src/components/profile/multiFactorAuth/instructions/images/android.svg index 5f8d89c..c1b3b02 100644 --- a/src/components/profile/multiFactorAuth/instructions/images/android.svg +++ b/src/components/profile/multiFactorAuth/instructions/images/android.svg @@ -1 +1,14 @@ - + + + + + + + + + + + + + + diff --git a/src/components/profile/multiFactorAuth/instructions/images/apple.svg b/src/components/profile/multiFactorAuth/instructions/images/apple.svg index 2bd9c37..c26fa29 100644 --- a/src/components/profile/multiFactorAuth/instructions/images/apple.svg +++ b/src/components/profile/multiFactorAuth/instructions/images/apple.svg @@ -1 +1,11 @@ - + + + + + + + + + + + diff --git a/src/components/profile/multiFactorAuth/instructions/images/windows.svg b/src/components/profile/multiFactorAuth/instructions/images/windows.svg index d0b2109..2d0d6f3 100644 --- a/src/components/profile/multiFactorAuth/instructions/images/windows.svg +++ b/src/components/profile/multiFactorAuth/instructions/images/windows.svg @@ -1 +1,11 @@ - + + + + + + + + + + + diff --git a/src/components/profile/multiFactorAuth/instructions/instructions.scss b/src/components/profile/multiFactorAuth/instructions/instructions.scss index 2c9a748..c1be8e9 100644 --- a/src/components/profile/multiFactorAuth/instructions/instructions.scss +++ b/src/components/profile/multiFactorAuth/instructions/instructions.scss @@ -1,8 +1,10 @@ @import "~components/ui/fonts.scss"; +$boxHeight: 140px; + .instructionContainer { position: relative; - min-height: 160px; + min-height: $boxHeight; background: #fff; border: 1px #fff solid; @@ -20,7 +22,7 @@ left: 0; right: 0; margin: 15px; - height: 130px; + height: $boxHeight; } .osTile { @@ -33,6 +35,10 @@ transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); font-family: $font-family-title; + + .instructionActive & { + cursor: default; + } } .osLogo { @@ -117,28 +123,41 @@ } .osInstruction { + $padding: 15px; + position: relative; z-index: 1; - margin-left: 100px; - padding: 15px; + margin-left: 115px - $padding; + padding: $padding; } .instructionTitle { font-family: $font-family-title; - font-size: 15px; + font-size: 14px; } .appList { - margin: 16px 0; - font-size: 14px; + margin: 10px 0; + font-size: 11px; li { - margin: 5px 0; + margin: 7px 0; + } + + a { + color: #666; + border-bottom-color: #666; + border-bottom-style: dashed; } } +// TODO: прижать это к нижней части .otherApps { text-align: right; - font-size: 13px; - opacity: 0.7; + font-size: 10px; + + a { + color: #9E9E9E; + border-bottom-color: #9E9E9E; + } } diff --git a/src/components/ui/stepper/stepper.scss b/src/components/ui/stepper/stepper.scss index e9d13ee..f19a0ec 100644 --- a/src/components/ui/stepper/stepper.scss +++ b/src/components/ui/stepper/stepper.scss @@ -44,20 +44,24 @@ width: 12px; height: 12px; border-radius: 100%; + box-sizing: border-box; background: #aaa; - transition: background 0.4s ease; + border: 2px solid #aaa; + transition: background 0.4s ease, + border-color 0.4s cubic-bezier(0.19, 1, 0.22, 1); // easeOutExpo } } .activeStep { &:before { right: 0; - transition-delay: 0; + transition-delay: unset; } &:after { background: $green; + border-color: darker($green); transition-delay: 0.3s; } }