From 2cf7ff535499edbdd21278440c69b3d1da4f1402 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Fri, 16 Feb 2024 14:15:48 +0400 Subject: [PATCH 01/44] feat: new signup page --- crowdin/messages.json | 66 ++------ .../signup-academy-complete/academy-input.tsx | 134 ++++++++++++++++ .../pages/signup-academy-complete/index.tsx | 26 +++ .../signup-academy-complete/password-form.tsx | 103 ++++++++++++ .../password-validation.tsx | 23 +++ .../signup-academy-complete/pop-up-menu.tsx | 75 +++++++++ .../residence-form.tsx | 150 ++++++++++++++++++ .../signup-academy.module.scss | 26 +++ .../form-container/form-social-buttons.tsx | 115 ++++++++++++++ .../signup-academy/form-container/index.tsx | 74 +++++++++ .../form-container/signup-page-form.tsx | 67 ++++++++ src/features/pages/signup-academy/index.tsx | 53 +++++++ .../pages/signup-academy/signup.content.tsx | 26 +++ .../pages/signup-academy/signup.module.scss | 48 ++++++ src/images/common/deriv-academy.svg | 11 ++ src/images/svg/eye.svg | 3 + src/pages/academy/complete-signup/index.tsx | 19 +++ src/pages/academy/signup/index.tsx | 19 +++ 18 files changed, 989 insertions(+), 49 deletions(-) create mode 100644 src/features/pages/signup-academy-complete/academy-input.tsx create mode 100644 src/features/pages/signup-academy-complete/index.tsx create mode 100644 src/features/pages/signup-academy-complete/password-form.tsx create mode 100644 src/features/pages/signup-academy-complete/password-validation.tsx create mode 100644 src/features/pages/signup-academy-complete/pop-up-menu.tsx create mode 100644 src/features/pages/signup-academy-complete/residence-form.tsx create mode 100644 src/features/pages/signup-academy-complete/signup-academy.module.scss create mode 100644 src/features/pages/signup-academy/form-container/form-social-buttons.tsx create mode 100644 src/features/pages/signup-academy/form-container/index.tsx create mode 100644 src/features/pages/signup-academy/form-container/signup-page-form.tsx create mode 100644 src/features/pages/signup-academy/index.tsx create mode 100644 src/features/pages/signup-academy/signup.content.tsx create mode 100644 src/features/pages/signup-academy/signup.module.scss create mode 100644 src/images/common/deriv-academy.svg create mode 100644 src/images/svg/eye.svg create mode 100644 src/pages/academy/complete-signup/index.tsx create mode 100644 src/pages/academy/signup/index.tsx diff --git a/crowdin/messages.json b/crowdin/messages.json index ff5f019e184..b29cd593889 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -28,7 +28,6 @@ "26480598": "General", "26596220": "Finance", "27830635": "Deriv (V) Ltd", - "28675270": "Chief Financial Officer", "28681430": "Join great marketing minds at Deriv’s office in Ciudad del Este, Paraguay. Be part of a vibrant team that develops the company’s growth in the region.", "29394238": "<0> 280,000", "33219178": "We'll pay your IB commission into your MT5 (Derived account daily).", @@ -43,7 +42,6 @@ "41078219": "Get into the Deriv Trader experience", "41570825": "Are High/Low Ticks options available on Deriv Trader?", "42762042": "Add stake amount to receive payout quote", - "48132512": "Join and grow with us.", "48235639": "The potential payout and loss (your initial stake) amounts are clearly displayed before you open the trade.", "48469443": "Complete <0>this form, and we'll get in touch with you in a couple of days.
You'll need a real Deriv trading account, too. If you don't have one, sign up <1>here.", "48763975": "What if I am unhappy with the outcome of my complaint?", @@ -85,8 +83,6 @@ "71535160": "Calculate the overnight fees for holding any open positions. The fees can be positive or negative depending on your swap rate.", "71630191": "Do not share your account information and other personal details with anyone via Telegram.", "71650838": "Speak simply and plainly, and not hide behind ambiguity", - "71755468": "In a journey spanning more than 23 years, we have grown to over 2.5 million customers worldwide. But our mission has remained the same:", - "73765361": "Chief Audit Executive", "74138086": "Take control of your trades on Deriv MT5", "74593350": "3. Select Real account or Demo account.", "76083876": "<0>A social media admin
Promote our products and services on your social media pages, and earn commission when you convert your audience into traders.", @@ -161,6 +157,7 @@ "152299772": "Why should I join your affiliate programme?", "152524253": "Trade the world’s markets with our popular user-friendly platform.", "154463429": "Our demo trading experience will represent real-money trading, especially with contract pricing and trading restrictions.", + "154545319": "Country of residence is where you currently live.", "154883335": "Exclusive access to innovative assets", "155518428": "graph", "155869362": "high low", @@ -313,6 +310,7 @@ "295072338": "The email is poorly written, with incorrect grammar and many typos.", "295173783": "Long/Short", "300201586": "Open a demo account on Deriv and practise with an unlimited amount of virtual funds on our award-winning platforms.", + "301441673": "Select your citizenship/nationality as it appears on your passport or other government-issued ID.", "301901540": "Make fast deposits using PIX, Brazilian banks’ most popular payment solution.", "302542488": "background pattern", "302938619": "<0>100 lots traded with DL on <0>US Tech 100 is split between:", @@ -374,7 +372,6 @@ "357273365": "For DEX Indices, a deal of 3 lots of the DEX 600 DOWN Index for a price of USD 6000 will pay out USD 0.5 in commission based on the following formula:", "358257887": "Once your submitted document has been approved, go to Cashier > DP2P to register your Deriv P2P account.", "358369253": "Can I close In/Out options before the end of the trade duration?", - "358838306": "Vice President of Customer Support", "360357815": "High/Low ticks | Digital options contract | Deriv", "361051814": "Let’s say you want to calculate the take profit level and pip value when you want to sell 3 lots of Volatility 50 Index priced at 249.5961 USD with a take profit amount of 84 USD.", "364422126": "Available 24/7 with varying levels of volatility, our synthetic indices are priced based on algorithms that are audited for fairness by an independent third party.", @@ -415,7 +412,6 @@ "396323780": "DEX Indices", "396992773": "Deriv is the best broker in the world so far in terms of the assets they offer, ease of withdrawals and deposits, plus other services. Keep on giving us the best, Deriv!", "399056226": "How can I recognise phishing websites?", - "400968378": "locations", "401039438": "Have consistent, regular sign ups via your referral link", "401450104": "> 3 - 5 billion", "401498558": "Deriv (FX) Ltd (Company No. LL13394), incorporated on the 18th January 2017, is registered in the Federal Territory of Labuan (Malaysia) with its registered office located at Unit No. 3A-16, Level 3A, Labuan Times Square, Jalan Merdeka, 87000, Federal Territory of Labuan, Malaysia. Deriv (FX) Ltd is licensed by the Labuan Financial Services Authority <0>(view licence) and is a member of the <1>Labuan Fintech Association.", @@ -501,8 +497,6 @@ "469798381": "Years of service", "470277541": "Maximum duration", "472630909": "It will take 1-3 working days for your application to be reviewed.", - "472915014": "Deriv is one of the world’s largest online brokers. We offer CFDs and other derivatives on forex, stocks & indices, cryptocurrencies, commodities, and derived indices to millions of registered users across the globe.", - "473760456": "We speak plainly to avoid ambiguity, disclose the terms of all contracts, and are clear about the risks of trading and how we make money.", "474616293": "The trading platform to fit your style", "475611258": "Help centre | Frequently asked questions | About Deriv | Deriv", "476241116": "Provide expert tips and opinions on online trading via a website, blog, YouTube channel, webinars, or other forms of digital media.", @@ -577,7 +571,6 @@ "535867011": "Sign up in minutes and explore Trader’s Hub — all your trading needs, in one place.", "538228086": "Close-Low", "539261300": "OS icon", - "539645627": "We aim to deliver market-leading products that are trusted around the world.", "540538076": "40+ stocks", "541218901": "Full name*", "541543954": "<0>Revenue share
Earn commission of up to 45% based on the monthly net revenue generated by your clients. The higher their net revenue, the higher your commission payout.", @@ -617,6 +610,7 @@ "573706432": "Select market to trade", "574805081": "<0>SPXS.US The Direxion Daily S&P 500 Bear 3X Shares ETF seeks to reflect 300% of the inverse of the performance of the S&P 500.", "575534504": "Low spreads", + "576355707": "Select your country and citizenship:", "576643640": "

Reset Call/Reset Put contracts offer the ability to reset the strike price at a potentially more advantageous level. In this contract, your market prediction is your contract's exit price against the reset price (instead of the entry price). Reset contract types also typically offer a lower fixed payout percentage compared to Rise/Fall contracts.

Meanwhile, Rise/Fall contracts consider the contract's exit price against the contract's entry price, based on your market prediction.

In both instances, the potential payout is fixed upon entry.

", "576793632": "0 - 15 million <0>(Crypto)", "577779861": "Withdrawal", @@ -669,6 +663,7 @@ "623188171": "Trade cryptocurrencies and synthetic indices anytime, even on weekends and holidays.", "623694668": "VWO.US", "624256060": "Define optional parameters that give you more control over your trading, including stop loss, take profit, and deal cancellation.", + "627048390": "You should enter 8-25 characters.", "627774646": "Additional income stream from monthly subscriptions.", "627845959": "Things to keep in mind when trading multipliers", "628661446": "If the selected condition is not met or if the last tick is equal to the average of all the ticks, your stake is lost.", @@ -688,7 +683,6 @@ "636857983": "Take advantage of a highly liquid market with round-the-clock trading. Profit from correctly predicting the movement of the world's most popular cryptocurrencies.", "636968212": "If you encounter any issues with a transaction on Deriv P2P, first try to resolve it with the trader you’re dealing with. If they’re not willing to help, please let us know via <0>live chat, and we’ll help you resolve it.", "637013579": "Our classic \"drag-and-drop\" tool for creating trading bots, featuring pop-up trading charts, for advanced users.", - "640307277": "Vice President of Engineering", "640979467": "<0>IWM.US The iShares Russell 2000 ETF tracks the investment results of an index of small-capitalisation US equities.", "642995056": "Email", "643714136": "Binary bot for creating trading bot", @@ -763,7 +757,6 @@ "706434010": "Deriv X logo", "706931524": "When you purchase a 'High-Close' contract, your payout will be equal to the difference between the highest price and the exit price over the duration of the contract multiplied by the multiplier.", "710137133": "Apply now", - "712547410": "total trade turnover", "714321435": "laptop mt5", "714478782": "<0>AUD Basket measures the value of the Australian dollar against a basket of five global currencies (USD, EUR, GBP, JPY, CAD), each weighted by 20%.", "715753532": "Find your role with us by browsing Deriv job opportunities in Cyberjaya, Malaysia.", @@ -822,7 +815,6 @@ "762926186": "A quick strategy is a ready-made strategy that you can use in Deriv Bot. There are 3 quick strategies you can choose from: Martingale, D'Alembert, and Oscar's Grind.", "763072092": "MT5 trading signals subscriptions expire automatically after one month. To renew or cancel a subscription, follow these steps.", "763514492": "Get integrated help", - "764856444": "We have a huge mission, an incredible team, and rapid growth.", "764879840": "GLD.US", "764958509": "Trade on global financial markets and multiply your potential profit without losing more than your stake.", "768795461": "Start trading cryptocurrencies on Deriv in 3 simple steps", @@ -864,7 +856,6 @@ "803547668": "paid out since inception", "803989222": "The Synthetics account allows you to trade on Deriv’s proprietary synthetic indices that are available 24/7 and simulate real-world market movements.", "806165583": "Australia 200", - "808426886": "We don’t practise hard-selling, offer financial or trading advice, nor make promises of guaranteed returns. We don’t encourage vulnerable people to trade and implement controls to prevent any unlawful activity.", "809146176": "Not applicable", "809414451": "<0>Forex at your fingertips. Currency trading with major and minor pairs.", "809480545": "If you'd like to log in using your email address instead, follow these steps:", @@ -897,7 +888,6 @@ "831164350": "Let’s say you want to calculate the stop loss level and pip value when you want to buy a lot of EUR/USD priced at 1.17524 USD with a stop loss amount of 24 USD.", "831282685": "Drop us an email", "831784233": "Close-Low Icon", - "832324110": "Our locations", "832827564": "This plan is not available for IBs who promote to clients residing in the EU.", "833547634": "Currency weight", "835328271": "accumulators take profit", @@ -1227,7 +1217,6 @@ "1149190992": "Trade selected derived and financial assets without overnight charges.", "1150115412": "1. Please log in to your account and go to the “Manage account settings”.", "1150953111": "Tight spreads", - "1151456638": "We value team players that collaborate freely across departments with humility and ambition.", "1151925602": "Predict whether the last digit of the last tick of a contract will be higher or lower than a specific number.", "1153826782": "A sub-affiliate earns USD 200 from their Revenue Share plan. The same sub-affiliate earns USD 100 from their IB programme. Here is how we calculate their total commissions:", "1155361880": "Need help? Please <0>contact us via live chat.", @@ -1269,7 +1258,6 @@ "1187487273": "Volatility 15 (1s) Index", "1189346909": "To withdraw from your Deriv account into your personal account, go to Cashier, click \"Withdrawal\", and follow the instructions on the screen. You’ll need to verify your withdrawal request and confirm your withdrawal amount.", "1189875009": "Proven track record", - "1190588251": "We treat all customers equitably, handle complaints with integrity, and offer competitive prices with no hidden costs and no artificial barriers on customer withdrawals.", "1191311301": "How do I set an investor password for my Deriv MT5 account?", "1191789799": "Password should be more than 8 characters including 1 uppercase and 1 number", "1192961783": "Licence and regulatory information | Deriv", @@ -1411,7 +1399,6 @@ "1319030942": "Signup failed", "1320418221": "Estimate the margin you need to hold your positions. The result depends on leverage, volume lot, and your Deriv MT5 account balance.", "1323941798": "Short", - "1324376913": "Our values are the fabric of our culture", "1325181938": "Street*", "1326142154": "high-low option trade", "1326235397": "These indices correspond to simulated markets with constant volatilities of 10%, 25%, 50%, 75%, and 100%.", @@ -1503,7 +1490,6 @@ "1403848854": "The Deriv MT5 Standard account offers new and experienced traders high leverage and variable spreads for maximum flexibility.", "1404594106": "Swap short (Daily points)", "1405194573": "Locate the live chat widget on our website or app at the bottom right corner of the screen.", - "1405237333": "Head of People Management", "1405929527": "Your IB commissions earned from Deriv X are credited directly into your Deriv account daily.", "1406209174": "Trade with a regulated industry pioneer trusted by traders for more than 20 years.", "1406360927": "Minor pairs", @@ -1514,6 +1500,7 @@ "1409308163": "Favourite assets", "1410320737": "Go to Deriv MT5 dashboard", "1411032790": "Multiple charts to view your online trading", + "1411373212": "Strong passwords contain at least 8 characters. combine uppercase and lowercase letters, numbers, and symbols.", "1412121500": "How do I open a Touch/No Touch contract on Deriv?", "1412644174": "We process your deposits and withdrawals internally within 1 to 3 business days (depending on your <0>payment method). It may take longer for your funds to reach you due to the different processing times by banks and payment service providers. See our <0>Payment methods page for a complete list of the processing times for each payment method.", "1413295628": "DIA.US", @@ -1825,7 +1812,6 @@ "1673505406": "An impersonator’s main goal is to steal your sensitive information and funds.", "1673824550": "Minimum stake", "1674164323": "<0>With a x500 multiplier, if the market goes down 2%, you'll <1>lose only $100. An automatic stop out kicks in if your loss reaches your stake amount.", - "1674363165": "traders worldwide", "1674798397": "Trade multipliers on our mobile app.", "1676292946": "Forex trading gives you the chance to profit from changes in the relative values of currencies on the forex market.", "1677027187": "Forex", @@ -1887,7 +1873,6 @@ "1733606989": "0.50", "1733660945": "Funds available as soon as confirmed", "1734026582": "This plan is available exclusively for affiliates who promote to clients residing in EU.", - "1734683614": "Chief Executive Officer", "1736625026": "What are accumulators?", "1737371600": "Where can I trade vanilla options on Deriv?", "1739086943": "Wall Street 30", @@ -2299,6 +2284,7 @@ "2071808494": "Expert and friendly support", "2071998706": "For forex, there is a fixed commission of USD 2 per lot. A deal of 0.2 lots of GBP/JPY will pay out USD 0.4 in commission based on the following formula:", "2074119658": "Customise your contracts to suit your risk appetite using innovative features like stop loss, take profit, and deal cancellation.", + "2074513346": "Use this account to log in to <0Deriv and Deriv Academy.", "2075608900": "Competitive fixed and variable spreads", "2075864188": "FREE", "2076930425": "Find out how Deriv P2P works", @@ -2370,7 +2356,6 @@ "2139905716": "In addition to their simplicity to understand, the main reason traders choose to trade vanilla options is because they offer potentially high profit as they do not have a fixed payout, while losses are strictly limited to the initial stake amount.", "2142042461": "Trading CFDs increases both potential profit and loss", "2142117024": "Take profit amount in Up direction", - "2143477659": "We settle all contracts fairly, process all deposits and withdrawals promptly, and provide reliable support and a high-quality trading experience to all our customers.", "2143762194": "Create your Deriv account now and start trading!", "2144015434": "On Deriv, trading CFDs on leverage lets you pay only a small fraction of the contract’s value and amplify your potential profit, similarly increasing your potential loss.", "2144113378": "A chart illustrating a losing Rise trade type contract", @@ -3464,8 +3449,18 @@ "-955173076": "We provide clear, accessible information about our platforms and processes so we can build trust and strong client relationships. Through detailed product descriptions and open communication, we aim to make it easier for you to make informed trading decisions.", "-2032112598": "Be responsible", "-35673135": "We build our services and platforms on a foundation of trust, honesty, and ethical practices. By proactively implementing policies and controls to prevent unlawful activities, we ensure a fair and secure environment for our trading community.", + "-71049153": "Keep your account secure with a password", + "-981015173": "Go to Deriv Academy", + "-1193651304": "Country of residence", + "-2040322967": "Citizenship", + "-1541554430": "Next", + "-1770179687": "By clicking “Create account”, you confirm that you are 18 or older. You understand that we may use your email address to send you information about Deriv products and services as well as market news. You can always unsubscribe from these emails in your account settings. For more information, please take a look at Deriv’s <0>Security and privacy policy.", + "-417711545": "Create account", + "-1264882776": "Your go-to platform for exclusive trading courses", + "-609665275": "Gain access to comprehensive modules on forex, Deriv MT5, and more.", "-2125275828": "Unique trade types. Hundreds of instruments. Financial and derived markets.", "-154889447": "Ready to join over 2.5 million traders who have chosen Deriv as their trusted broker? Enter your email address to create a free demo account.", + "-1957784093": "Easy And Free Sign Up | Online Trading | Deriv.com", "-323355149": "deriv careers", "-507845880": "Cyberjaya bridge and lake view", "-2024257622": "Dubai Skyscrappers", @@ -3773,7 +3768,6 @@ "-1687100060": "Available 24/7", "-167184778": "Trade with high leverage ratios to have even more opportunities to increase your position size.", "-1355872061": "Join over 1 million people who trade stocks, forex and other markets on Deriv.com — the award-winning broker that’s been trusted for over 20 years.", - "-1957784093": "Easy And Free Sign Up | Online Trading | Deriv.com", "-1859592272": "deriv platform", "-399480833": "deriv platform mobile", "-69605883": "background pattern mobile", @@ -4402,7 +4396,6 @@ "-1130147753": " Details", "-990526713": "Step 5 : Terms of use (5 of 5)", "-204765990": "Terms of use", - "-1541554430": "Next", "-26610045": "Add an affiliate account", "-435672026": "Wrong email", "-265889213": "Empty input not available", @@ -4775,30 +4768,5 @@ "-594286125": "Practise trading with Deriv as long as you like. No risk, no hidden fees.", "-1773685845": "All markets and platforms", "-661813412": "Enjoy full access to all our markets and platforms.", - "-1520902282": "No credit card needed", - "-2022759357": "Make trading accessible to anyone, anywhere", - "-77779780": "From inception, our goal was to break free of the high commissions and clunky products offered by traditional brokers. Also, we aim to deliver a first-class experience to digitally inclined traders, regardless of the size of their accounts.", - "-554746075": "Integrity", - "-1917169640": "We serve our customers with fairness and transparency. We settle all contracts by the book and speak plainly and truthfully.", - "-1679427554": "Customer focus", - "-411750591": "We put the customer first and strive to build products that deliver the best customer experience.", - "-611750993": "Competence", - "-1566641642": "We value colleagues with the ability to use good judgement and an aptitude to learn and grow.", - "-1111451256": "Teamwork", - "-418008452": "Our principles are the framework for our decisions", - "-3618456": "Learn more about our principles", - "-1855417261": "Our leadership", - "-1277783292": "Chief Operating Officer", - "-1369524546": "Chief Information Officer", - "-2049472334": "Chief Risk & Compliance Officer", - "-216767904": "Chief Administrative Officer", - "-197772643": "Head of Marketing & Global Partnerships", - "-290006480": "Vice President of Product", - "-871474425": "Vice President of IT Operations", - "-864130274": "Head of Accounts", - "-275117592": "withdrawals last month", - "-608807773": "trades last month", - "-1165835520": "employees", - "-651384976": "nationalities", - "-1033881248": "See our open positions" + "-1520902282": "No credit card needed" } \ No newline at end of file diff --git a/src/features/pages/signup-academy-complete/academy-input.tsx b/src/features/pages/signup-academy-complete/academy-input.tsx new file mode 100644 index 00000000000..5f6735785df --- /dev/null +++ b/src/features/pages/signup-academy-complete/academy-input.tsx @@ -0,0 +1,134 @@ +import React, { useRef, useState } from 'react' +import styled, { css } from 'styled-components' +import device from 'themes/device' +import { + InputProps, + InputWrapper, + RelativeWrapper, + StyledInput, + StyledLabel, +} from 'components/form/input' +import OpenedEye from 'images/svg/signup-affiliates/opened-eye.svg' +import ClosedEye from 'images/svg/eye.svg' + +type AcademyPasswordInputProps = { + password_icon?: boolean +} & InputProps + +export const StyledRelativeWrapper = styled(RelativeWrapper)` + margin-block: 16px 36px; +` +export const ErrorMessage = styled.div<{ error?: boolean }>` + position: absolute; + font-size: 12px; + color: ${({ error }) => (error ? 'var(--color-red-1)' : 'var(--color-grey-5)')}; + padding: 6px 0; +` +const StyledIcon = styled.img<{ password_icon?: boolean }>` + position: absolute; + right: ${({ password_icon }) => (password_icon ? '2.8rem' : '0.8rem')}; + top: 1.5rem; + height: 1rem; + width: 1.5rem; + cursor: pointer; + + @media ${device.tablet} { + right: ${({ password_icon }) => (password_icon ? '4rem' : '2rem')}; + top: 1.6rem; + } + @media ${device.desktopL} { + top: 1rem; + } +` +export const Label = styled(StyledLabel)` + top: 1.5rem; + color: var(--color-grey-5); +` +export const StyledInputWrapper = styled(InputWrapper)<{ + password_length?: number + is_password?: boolean +}>` + border-radius: 4px; + border: solid 1px var(--color-grey-7); + ${({ password_length, is_password }) => { + if (is_password && password_length == 0) + return css` + border-bottom: solid 4px var(--color-grey-5); + ` + else if (is_password && password_length >= 1) + return css` + border-bottom: solid 4px var(--color-blue-7); + &:hover { + border-color: var(--color-blue-7); + } + ` + else + return css` + border-bottom: solid 1px var(--color-grey-7); + &:hover { + border-color: var(--color-grey-5); + + & > label { + color: var(--color-grey-5); + } + } + ` + }} + + @media ${device.tabletL} { + height: unset; + border-radius: 4px; + } +` + +const AcademyPasswordInput = ({ + label = '', + id = '', + error = '', + password_icon, + ...props +}: AcademyPasswordInputProps) => { + const current_input = useRef(null) + const [is_password_visible, setPasswordVisible] = useState(false) + + return ( + + + + {label && ( + + )} + + {password_icon && ( + setPasswordVisible(!is_password_visible)} + /> + )} + {error && ( + <> + {error} + + )} + + ) +} + +export default AcademyPasswordInput diff --git a/src/features/pages/signup-academy-complete/index.tsx b/src/features/pages/signup-academy-complete/index.tsx new file mode 100644 index 00000000000..a2da5fd2bad --- /dev/null +++ b/src/features/pages/signup-academy-complete/index.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import { signup_wrapper, static_nav_logo } from '../signup-academy/signup.module.scss' +import Layout from 'features/components/templates/layout' +import PopUpMenu from './pop-up-menu' +import NavTemplate from 'features/components/templates/navigation/template' +import LogoImage from 'images/common/deriv-academy.svg' +import Link from 'features/components/atoms/link' +import Image from 'features/components/atoms/image' + +const SignupCompleteAcademy = () => { + return ( + + ( + + + + )} + /> + + + ) +} +export default SignupCompleteAcademy diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/signup-academy-complete/password-form.tsx new file mode 100644 index 00000000000..c3f1c787827 --- /dev/null +++ b/src/features/pages/signup-academy-complete/password-form.tsx @@ -0,0 +1,103 @@ +import React, { useState } from 'react' +import styled from 'styled-components' +import { navigate } from 'gatsby' +import { trading_btn, signup_form_line, input_field } from './signup-academy.module.scss' +import AcademyInput from './academy-input' +import { academy_validation } from './password-validation' +import Flex from 'features/components/atoms/flex-box' +import Typography from 'features/components/atoms/typography' +import { Localize, localize } from 'components/localization' +import { Button } from 'components/form' +import apiManager from 'common/websocket' + +type AcademyPasswordFormProps = { + residence: string +} + +const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { + const [password, setPassword] = useState('') + const [form_errors, setFormErrors] = useState('') + const [submit_status, setSubmitStatus] = useState('') + const [submit_error_msg, setSubmitErrorMsg] = useState('') + const GoTrading = styled(Button)` + border-radius: 4px; + ` + + const handleInput = (e) => { + e.preventDefault() + const { value } = e.target + console.log('value', value) + value && setPassword(value) + if (academy_validation) { + const error_msg = academy_validation.password(value) + setFormErrors(error_msg) + } + } + console.log('hi') + const handleError = () => { + setFormErrors('') + } + + const GetDerivAcademy = () => { + apiManager + .augmentedSend('new_account_virtual', { + new_account_virtual: 1, + type: 'trading', + client_password: password, + residence: residence, + verification_code: 'uoJvVuQ6', + }) + .then((response) => { + console.log(response) + if (response.error) { + setSubmitStatus('error') + setSubmitErrorMsg(response.error.message) + } else { + setSubmitStatus('success') + navigate( + 'https://oauth.deriv.com/oauth2/session/thinkific/create?app_id=37228', + { replace: true }, + ) + } + }) + } + + return ( + + + + + + + handleError()} + /> + + + + + + +
+ + + +
+ + ) +} + +export default AcademyPasswordForm diff --git a/src/features/pages/signup-academy-complete/password-validation.tsx b/src/features/pages/signup-academy-complete/password-validation.tsx new file mode 100644 index 00000000000..049b14c03c5 --- /dev/null +++ b/src/features/pages/signup-academy-complete/password-validation.tsx @@ -0,0 +1,23 @@ +import { localize } from 'components/localization' + +export const password_regex_validate = { + password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+[{\]};:'",<.>/?]).{8,}$/, +} + +export const validation_is_lack_number = (input, min_digit) => input.length + 1 > min_digit + +export const passwordValidation = (input) => { + if (!input) { + return localize('_t_You should enter 8-25 characters._t_') + } else if (!password_regex_validate.password.test(input)) { + return localize( + `_t_Password should have lower and uppercase English letters with numbers._t_`, + ) + } +} + +export const academy_validation = { + password: (input) => { + return passwordValidation(input) + }, +} diff --git a/src/features/pages/signup-academy-complete/pop-up-menu.tsx b/src/features/pages/signup-academy-complete/pop-up-menu.tsx new file mode 100644 index 00000000000..a88222eca62 --- /dev/null +++ b/src/features/pages/signup-academy-complete/pop-up-menu.tsx @@ -0,0 +1,75 @@ +import React, { useState } from 'react' +import styled from 'styled-components' +import ResidenceForm from './residence-form' +import PasswordForm from './password-form' +import device from 'themes/device' +import { useResidenceList } from 'features/hooks/use-residence-list' + +const Card = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + z-index: 99; +` +const ModalCard = styled.div` + position: relative; + z-index: 310; + display: flex; + flex-direction: column; + border-radius: 8px; + box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); + inline-size: 44rem; + background: var(--color-white); + + @media ${device.tablet} { + width: 80%; + } +` +const Background = styled.div` + position: absolute; + width: 100%; + height: 100vh; + top: 0; + left: 0; + background-color: var(--color-black-6); + opacity: 0.4; + z-index: 10; +` +const PopUpMenu = () => { + const [residence_list] = useResidenceList({ + restricted_countries: ['Iran', 'North Korea', 'Myanmar (Burma)', 'Syria', 'Cuba'], + }) + const [is_password, setIsPassword] = useState(false) + const [selected_value, setSelectedValue] = useState({ + country: null, + citizenship: null, + }) + console.log('country', selected_value.country) + console.log('citizenship', selected_value.citizenship) + return ( + <> + + + {!is_password && ( + setIsPassword(true)} + selected_value={selected_value} + setSelectedValue={setSelectedValue} + /> + )} + {is_password && } + + + + + + ) +} + +export default PopUpMenu diff --git a/src/features/pages/signup-academy-complete/residence-form.tsx b/src/features/pages/signup-academy-complete/residence-form.tsx new file mode 100644 index 00000000000..685b814a24b --- /dev/null +++ b/src/features/pages/signup-academy-complete/residence-form.tsx @@ -0,0 +1,150 @@ +import React, { useState } from 'react' +import styled from 'styled-components' +import { next_btn } from './signup-academy.module.scss' +import { DropdownSearch } from 'components/elements' +import device from 'themes/device' +import { localize, Localize } from 'components/localization' +import Typography from 'features/components/atoms/typography' +import { Button } from 'components/form' +import Flex from 'features/components/atoms/flex-box' +import { SelectedType } from 'components/hooks/use-dropdown' + +export const InputGroup = styled.div` + display: flex; + flex-direction: column; + width: 100%; +` +export const InputWrapper = styled.ul` + width: 100%; + line-height: 10px; + + @media ${device.tabletL} { + inline-size: 95%; + margin-bottom: 0; + } +` +export const NextButton = styled(Button)` + border-radius: 4px; +` +type CountryType = { + name: string + display_name: string + value: string +} +type HandleNextType = () => void + +type ResidenceFormProps = { + residence_list?: CountryType[] + handleNext?: HandleNextType + selected_value?: { + country: SelectedType + citizenship: SelectedType + } + setSelectedValue: (e) => void +} + +const ResidenceForm = ({ + residence_list, + handleNext, + selected_value, + setSelectedValue, +}: ResidenceFormProps) => { + const { country, citizenship } = selected_value + + const form_inputs = [ + { + id: 'dm-country-select', + name: 'country', + type: 'select', + label: localize('_t_Country of residence_t_'), + list: residence_list, + placeholder_message: localize( + '_t_Country of residence is where you currently live._t_', + ), + }, + { + id: 'dm-citizenship-select', + name: 'citizenship', + type: 'select', + label: localize('_t_Citizenship_t_'), + list: residence_list, + placeholder_message: localize( + '_t_Select your citizenship/nationality as it appears on your passport or other government-issued ID._t_', + ), + }, + ] + + return ( + + + + + + + + {form_inputs.map((item) => { + if (item.name === 'country') { + return ( + <> + { + setSelectedValue((prevState) => ({ + ...prevState, + country: country, + })) + }} + style={{ marginTop: '16px' }} + /> + + + + + ) + } else { + return ( + <> + { + setSelectedValue((prevState) => ({ + ...prevState, + citizenship: citizenship, + })) + }} + style={{ marginTop: '16px' }} + /> + + + + + ) + } + })} +
+ + + +
+ + + + ) +} +export default ResidenceForm diff --git a/src/features/pages/signup-academy-complete/signup-academy.module.scss b/src/features/pages/signup-academy-complete/signup-academy.module.scss new file mode 100644 index 00000000000..a45d6535046 --- /dev/null +++ b/src/features/pages/signup-academy-complete/signup-academy.module.scss @@ -0,0 +1,26 @@ +@use 'features/styles/theme/theme-mixins' as *; +@import 'features/styles/theme/variables'; + +.next_btn { + display: flex; + justify-content: flex-end; + padding-block: 2.4rem; +} + +.trading_btn { + display: flex; + justify-content: center; + @include breakpoints(tablet) { + justify-content: flex-end; + padding-top: 2.4rem; + } +} + +.signup_form_line { + block-size: 1px; + background-color: $color-grey-7; + display: none; + @include breakpoints(tablet) { + display: block; + } +} diff --git a/src/features/pages/signup-academy/form-container/form-social-buttons.tsx b/src/features/pages/signup-academy/form-container/form-social-buttons.tsx new file mode 100644 index 00000000000..417e2bbd3ec --- /dev/null +++ b/src/features/pages/signup-academy/form-container/form-social-buttons.tsx @@ -0,0 +1,115 @@ +import React from 'react' +import { Analytics } from '@deriv-com/analytics' +import { signup_apple_btn, signup_fb_btn, signup_login_redirect } from '../signup.module.scss' +import Login from 'common/login' +import Button from 'features/components/atoms/button' +import Flex from 'features/components/atoms/flex-box' +import Image from 'features/components/atoms/image' +import Typography from 'features/components/atoms/typography' +import AppleLogo from 'images/svg/signup_apple_icon.svg' +import FacebookLogo from 'images/svg/signup_fb_icon.svg' +import GoogleLogo from 'images/svg/google_logo.svg' +import { Localize } from 'components/localization' +import { isBrowser } from 'common/utility' + +const FormSocialButtons = () => { + const analyticsData: Parameters[1] = { + action: 'started', + form_source: isBrowser() && window.location.hostname, + form_name: 'default_diel_deriv', + } + + return ( + <> + { + Analytics?.trackEvent('ce_virtual_signup_form', { + signup_provider: 'google', + ...analyticsData, + }) + Login.initOneAll('google') + }} + > + + + + + + + + { + Analytics?.trackEvent('ce_virtual_signup_form', { + signup_provider: 'facebook', + ...analyticsData, + }) + Login.initOneAll('facebook') + }} + > + + + + + + + + { + Analytics?.trackEvent('ce_virtual_signup_form', { + signup_provider: 'apple', + ...analyticsData, + }) + Login.initOneAll('apple') + }} + > + + + + + + + + + { + event.preventDefault() + Analytics?.trackEvent('ce_virtual_signup_form', { + action: 'go_to_login', + form_source: isBrowser() && window.location.hostname, + form_name: 'default_diel_deriv', + }) + Login.redirectToLogin() + }} + />, + ]} + /> + + + ) +} + +export default FormSocialButtons diff --git a/src/features/pages/signup-academy/form-container/index.tsx b/src/features/pages/signup-academy/form-container/index.tsx new file mode 100644 index 00000000000..67f03fe65bd --- /dev/null +++ b/src/features/pages/signup-academy/form-container/index.tsx @@ -0,0 +1,74 @@ +import React from 'react' +import { + signup_form_container, + signup_form_line, + link_text, + sign_up_header, + sign_up_content, +} from '../signup.module.scss' +import FormSocialButtons from './form-social-buttons' +import SignUpPageForm from './signup-page-form' +import Flex from 'features/components/atoms/flex-box' +import Typography from 'features/components/atoms/typography' +import { Localize } from 'components/localization' +import Link from 'features/components/atoms/link' +import useRegion from 'components/hooks/use-region' + +const SignUpFormContainer = () => { + const { is_eu } = useRegion() + + const security_pdf_link = `/tnc${is_eu ? '/eu' : ''}/security-and-privacy.pdf` + + return ( + + + + + + + + + + + , + ]} + /> + + + + + + + + + + + + + ) +} + +export default SignUpFormContainer diff --git a/src/features/pages/signup-academy/form-container/signup-page-form.tsx b/src/features/pages/signup-academy/form-container/signup-page-form.tsx new file mode 100644 index 00000000000..066dee6aa36 --- /dev/null +++ b/src/features/pages/signup-academy/form-container/signup-page-form.tsx @@ -0,0 +1,67 @@ +import React from 'react' +import { link_text } from '../signup.module.scss' +import Flex from 'features/components/atoms/flex-box' +import { TString } from 'types/generics' +import Button from 'features/components/atoms/button' +import { localize, Localize } from 'components/localization' +import Input from 'features/components/atoms/input' +import Link from 'features/components/atoms/link' +import useSignupForm from 'features/hooks/use-signup-form' + +const SignUpPageForm = () => { + const { onSignup, signUpForm } = useSignupForm() + + const { + register, + formState: { errors, isValid, isSubmitting, isSubmitSuccessful }, + watch, + handleSubmit, + clearErrors, + setValue, + } = signUpForm + const values = watch() + + const is_button_disabled = + values.email === '' || !values.terms || !isValid || isSubmitting || isSubmitSuccessful + + return ( + + + + + , + ]} + /> + + + + + + + ) +} + +export default SignUpPageForm diff --git a/src/features/pages/signup-academy/index.tsx b/src/features/pages/signup-academy/index.tsx new file mode 100644 index 00000000000..ea8636ca05b --- /dev/null +++ b/src/features/pages/signup-academy/index.tsx @@ -0,0 +1,53 @@ +import React, { useEffect } from 'react' +import { Analytics } from '@deriv-com/analytics' +import Layout from 'features/components/templates/layout' +import { signup_wrapper, static_nav_logo } from './signup.module.scss' +import SignUpContent from './signup.content' +import SignUpFormContainer from './form-container' +import NavTemplate from 'features/components/templates/navigation/template' +import Flex from 'features/components/atoms/flex-box' +import { isBrowser } from 'common/utility' +import Link from 'features/components/atoms/link' +import Image from 'features/components/atoms/image' +import LogoImage from 'images/common/deriv-academy.svg' + +const SignUpAcademy = () => { + const analyticsData: Parameters[1] = { + form_source: isBrowser() && window.location.hostname, + form_name: 'default_diel_deriv', + } + + useEffect(() => { + Analytics?.trackEvent('ce_virtual_signup_form', { action: 'open', ...analyticsData }) + }, []) + + return ( + + ( + + + + )} + /> + + + + + + ) +} + +export default SignUpAcademy diff --git a/src/features/pages/signup-academy/signup.content.tsx b/src/features/pages/signup-academy/signup.content.tsx new file mode 100644 index 00000000000..8c7e3f670fb --- /dev/null +++ b/src/features/pages/signup-academy/signup.content.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import Flex from 'features/components/atoms/flex-box' +import Typography from 'features/components/atoms/typography' +import { Localize } from 'components/localization' + +const SignUpContent = () => { + return ( + + + + + + + + + ) +} + +export default SignUpContent diff --git a/src/features/pages/signup-academy/signup.module.scss b/src/features/pages/signup-academy/signup.module.scss new file mode 100644 index 00000000000..8ec6458a89e --- /dev/null +++ b/src/features/pages/signup-academy/signup.module.scss @@ -0,0 +1,48 @@ +@use 'features/styles/theme/theme-mixins' as *; +@import 'features/styles/theme/variables'; + +.signup_wrapper { + min-block-size: calc(100svh - 7rem); +} + +.signup_form_container { + @include breakpoints(tablet) { + box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.05); + } +} + +.signup_form_line { + block-size: 1px; + background-color: $color-grey-7; +} + +.sign_up_header { + font-size: 24px; +} + +.sign_up_content { + font-size: 12px; +} + +.signup_login_redirect { + cursor: pointer; +} + +.signup_fb_btn { + background-color: #1877f2; +} + +.signup_apple_btn { + background-color: #000000; +} +.link_text { + text-decoration: underline; + &:hover { + text-decoration-color: #000000; + color: $text-color-primary; + } +} +.static_nav_logo { + inline-size: 19.9rem; + block-size: 3.19rem; +} diff --git a/src/images/common/deriv-academy.svg b/src/images/common/deriv-academy.svg new file mode 100644 index 00000000000..e2f3c6b717f --- /dev/null +++ b/src/images/common/deriv-academy.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/svg/eye.svg b/src/images/svg/eye.svg new file mode 100644 index 00000000000..1933b577957 --- /dev/null +++ b/src/images/svg/eye.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/academy/complete-signup/index.tsx b/src/pages/academy/complete-signup/index.tsx new file mode 100644 index 00000000000..13d1e08b89f --- /dev/null +++ b/src/pages/academy/complete-signup/index.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import { TGatsbyHead } from 'features/types' +import { WithIntl } from 'components/localization' +import { SEO } from 'components/containers' +import SignupCompleteAcademy from 'features/pages/signup-academy-complete' + +const SignupPage = () => { + return +} + +export default WithIntl()(SignupPage) + +export const Head = ({ pageContext }: TGatsbyHead) => ( + +) diff --git a/src/pages/academy/signup/index.tsx b/src/pages/academy/signup/index.tsx new file mode 100644 index 00000000000..cfc397cdd51 --- /dev/null +++ b/src/pages/academy/signup/index.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import SignUpAcademy from 'features/pages/signup-academy' +import { TGatsbyHead } from 'features/types' +import { WithIntl } from 'components/localization' +import { SEO } from 'components/containers' + +const SignupPage = () => { + return +} + +export default WithIntl()(SignupPage) + +export const Head = ({ pageContext }: TGatsbyHead) => ( + +) From 1581285e9d2c4438aba466299404a67c2b295a05 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Sat, 17 Feb 2024 08:36:31 +0400 Subject: [PATCH 02/44] fix: redirection of login page --- crowdin/messages.json | 2 +- src/common/login.ts | 30 ++++++++++++++++--- .../signup-academy-complete/pop-up-menu.tsx | 3 +- .../signup-academy/form-container/index.tsx | 5 +++- .../index.tsx | 4 +-- 5 files changed, 34 insertions(+), 10 deletions(-) rename src/pages/academy/{complete-signup => completesignup}/index.tsx (88%) diff --git a/crowdin/messages.json b/crowdin/messages.json index b29cd593889..c700102b437 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -1759,6 +1759,7 @@ "1631705059": "Predict whether the exit spot will be higher or lower than a price target (the barrier) at the end of the contract period.", "1633022779": "Synthetic indices and cryptocurrencies are available for trading 24/7.", "1633102593": "Software developers", + "1633767238": "Use this account to log in to <0>Deriv and <0>Deriv Academy.", "1634507782": "Range Break 200 Index", "1634696689": "From (lots)", "1635959746": "high close", @@ -2284,7 +2285,6 @@ "2071808494": "Expert and friendly support", "2071998706": "For forex, there is a fixed commission of USD 2 per lot. A deal of 0.2 lots of GBP/JPY will pay out USD 0.4 in commission based on the following formula:", "2074119658": "Customise your contracts to suit your risk appetite using innovative features like stop loss, take profit, and deal cancellation.", - "2074513346": "Use this account to log in to <0Deriv and Deriv Academy.", "2075608900": "Competitive fixed and variable spreads", "2075864188": "FREE", "2076930425": "Find out how Deriv P2P works", diff --git a/src/common/login.ts b/src/common/login.ts index 85b8ccf1f6c..124bad76607 100644 --- a/src/common/login.ts +++ b/src/common/login.ts @@ -1,19 +1,33 @@ import Cookies from 'js-cookie' +import { useEffect, useState } from 'react' import { isStorageSupported } from './storage' import { getCookiesFields, getCookiesObject, getDataLink, getDataObjFromCookies } from './cookies' import { getAppId } from './websocket/config' -import { redirectToTradingPlatform } from './utility' +import { isBrowser, redirectToTradingPlatform } from './utility' import { brand_name, deriv_app_id, oauth_url } from 'common/constants' export type TSocialProvider = 'google' | 'facebook' | 'apple' const Login = (() => { + const [containsAcademy, setContainsAcademy] = useState(false) + const redirectToLogin = () => { if (isStorageSupported(sessionStorage)) { window.location.href = loginUrl() } } + useEffect(() => { + const url = window.location.href + const is_academy = isBrowser() && url.includes('academy') + + if (is_academy) { + setContainsAcademy(true) + } else { + setContainsAcademy(false) + } + }) + const loginUrl = () => { const server_url = localStorage.getItem('config.server_url') const language = localStorage.getItem('i18n')?.replace('-', '_') @@ -31,9 +45,17 @@ const Login = (() => { const sub_url = redirectToTradingPlatform() - return server_url && /qa/.test(server_url) - ? `https://${server_url}/oauth2/authorize?app_id=${getAppId()}&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}` - : `${oauth_url}/oauth2/authorize?app_id=${deriv_app_id}&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}` + if (containsAcademy) { + if (server_url && /qa/.test(server_url)) { + return `https://${server_url}/oauth2/authorize?app_id=37228&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}` + } + return `${oauth_url}/oauth2/authorize?app_id=37228&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}` + } else { + if (server_url && /qa/.test(server_url)) { + return `https://${server_url}/oauth2/authorize?app_id=${getAppId()}&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}` + } + return `${oauth_url}/oauth2/authorize?app_id=${deriv_app_id}&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}` + } } const initOneAll = (provider: TSocialProvider, utm_content?: string): void => { diff --git a/src/features/pages/signup-academy-complete/pop-up-menu.tsx b/src/features/pages/signup-academy-complete/pop-up-menu.tsx index a88222eca62..231c8c165f1 100644 --- a/src/features/pages/signup-academy-complete/pop-up-menu.tsx +++ b/src/features/pages/signup-academy-complete/pop-up-menu.tsx @@ -49,8 +49,7 @@ const PopUpMenu = () => { country: null, citizenship: null, }) - console.log('country', selected_value.country) - console.log('citizenship', selected_value.citizenship) + return ( <> diff --git a/src/features/pages/signup-academy/form-container/index.tsx b/src/features/pages/signup-academy/form-container/index.tsx index 67f03fe65bd..b598159302b 100644 --- a/src/features/pages/signup-academy/form-container/index.tsx +++ b/src/features/pages/signup-academy/form-container/index.tsx @@ -37,7 +37,10 @@ const SignUpFormContainer = () => { - + ]} + /> diff --git a/src/pages/academy/complete-signup/index.tsx b/src/pages/academy/completesignup/index.tsx similarity index 88% rename from src/pages/academy/complete-signup/index.tsx rename to src/pages/academy/completesignup/index.tsx index 13d1e08b89f..ec2fb635e4d 100644 --- a/src/pages/academy/complete-signup/index.tsx +++ b/src/pages/academy/completesignup/index.tsx @@ -4,11 +4,11 @@ import { WithIntl } from 'components/localization' import { SEO } from 'components/containers' import SignupCompleteAcademy from 'features/pages/signup-academy-complete' -const SignupPage = () => { +const CompleteSignupPage = () => { return } -export default WithIntl()(SignupPage) +export default WithIntl()(CompleteSignupPage) export const Head = ({ pageContext }: TGatsbyHead) => ( Date: Sun, 18 Feb 2024 15:04:05 +0400 Subject: [PATCH 03/44] feat: academy app id redirection for login --- src/common/login.ts | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/src/common/login.ts b/src/common/login.ts index 124bad76607..36e68ab8e59 100644 --- a/src/common/login.ts +++ b/src/common/login.ts @@ -9,7 +9,8 @@ import { brand_name, deriv_app_id, oauth_url } from 'common/constants' export type TSocialProvider = 'google' | 'facebook' | 'apple' const Login = (() => { - const [containsAcademy, setContainsAcademy] = useState(false) + const url = window.location.href + const is_academy = isBrowser() && url.includes('academy') const redirectToLogin = () => { if (isStorageSupported(sessionStorage)) { @@ -17,17 +18,6 @@ const Login = (() => { } } - useEffect(() => { - const url = window.location.href - const is_academy = isBrowser() && url.includes('academy') - - if (is_academy) { - setContainsAcademy(true) - } else { - setContainsAcademy(false) - } - }) - const loginUrl = () => { const server_url = localStorage.getItem('config.server_url') const language = localStorage.getItem('i18n')?.replace('-', '_') @@ -45,7 +35,7 @@ const Login = (() => { const sub_url = redirectToTradingPlatform() - if (containsAcademy) { + if (is_academy) { if (server_url && /qa/.test(server_url)) { return `https://${server_url}/oauth2/authorize?app_id=37228&l=${language}&brand=${brand_name.toLowerCase()}${affiliate_token_link}${cookies_link}&platform=${sub_url}` } From f1d14aeb544c09a0add5d0d539c2f2c09e8b8124 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Mon, 19 Feb 2024 09:04:48 +0400 Subject: [PATCH 04/44] fix: window error issue --- src/common/login.ts | 2 +- .../pages/signup-academy-complete/password-form.tsx | 10 +++++----- .../pages/signup-academy-complete/pop-up-menu.tsx | 4 +--- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/common/login.ts b/src/common/login.ts index 36e68ab8e59..d9f8729ce5a 100644 --- a/src/common/login.ts +++ b/src/common/login.ts @@ -9,7 +9,7 @@ import { brand_name, deriv_app_id, oauth_url } from 'common/constants' export type TSocialProvider = 'google' | 'facebook' | 'apple' const Login = (() => { - const url = window.location.href + const url = window && window.location.href const is_academy = isBrowser() && url.includes('academy') const redirectToLogin = () => { diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/signup-academy-complete/password-form.tsx index c3f1c787827..202edfac4cf 100644 --- a/src/features/pages/signup-academy-complete/password-form.tsx +++ b/src/features/pages/signup-academy-complete/password-form.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import styled from 'styled-components' import { navigate } from 'gatsby' -import { trading_btn, signup_form_line, input_field } from './signup-academy.module.scss' +import { trading_btn, signup_form_line } from './signup-academy.module.scss' import AcademyInput from './academy-input' import { academy_validation } from './password-validation' import Flex from 'features/components/atoms/flex-box' @@ -26,14 +26,14 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { const handleInput = (e) => { e.preventDefault() const { value } = e.target - console.log('value', value) - value && setPassword(value) + + setPassword(value) if (academy_validation) { const error_msg = academy_validation.password(value) setFormErrors(error_msg) } } - console.log('hi') + const handleError = () => { setFormErrors('') } @@ -68,7 +68,7 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { - + { - const [residence_list] = useResidenceList({ - restricted_countries: ['Iran', 'North Korea', 'Myanmar (Burma)', 'Syria', 'Cuba'], - }) + const [residence_list] = useResidenceList({}) const [is_password, setIsPassword] = useState(false) const [selected_value, setSelectedValue] = useState({ country: null, From 43c9b900ae78d7a19a6c3eeffd68d3b31d18f9aa Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Mon, 19 Feb 2024 09:24:43 +0400 Subject: [PATCH 05/44] fix: window error --- src/common/login.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/login.ts b/src/common/login.ts index d9f8729ce5a..b82a3c42a79 100644 --- a/src/common/login.ts +++ b/src/common/login.ts @@ -9,7 +9,7 @@ import { brand_name, deriv_app_id, oauth_url } from 'common/constants' export type TSocialProvider = 'google' | 'facebook' | 'apple' const Login = (() => { - const url = window && window.location.href + const url = isBrowser() && window.location.href const is_academy = isBrowser() && url.includes('academy') const redirectToLogin = () => { From 48bc72dc3144793894e9dd97b6413d90c88e7d79 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Mon, 19 Feb 2024 13:31:04 +0400 Subject: [PATCH 06/44] fix: app id connection and login page --- src/common/websocket/config.ts | 41 ++++--- .../hooks/use-residence-list/index.tsx | 9 +- .../residence-form.tsx | 4 +- .../form-container/form-social-buttons.tsx | 115 ------------------ .../signup-academy/form-container/index.tsx | 39 ++++-- src/features/pages/signup-academy/index.tsx | 2 +- .../pages/signup-academy/signup.content.tsx | 6 +- .../pages/signup-academy/signup.module.scss | 3 + 8 files changed, 66 insertions(+), 153 deletions(-) delete mode 100644 src/features/pages/signup-academy/form-container/form-social-buttons.tsx diff --git a/src/common/websocket/config.ts b/src/common/websocket/config.ts index 8c1b0ee2e2c..92dc95cda3c 100644 --- a/src/common/websocket/config.ts +++ b/src/common/websocket/config.ts @@ -69,7 +69,8 @@ const isStaging = () => isBrowser() && domain_config.staging.hostname === window const isBeta = () => isBrowser() && domain_config.beta.hostname === window.location.hostname const isLive = () => isProduction() || isStaging() || isBeta() const isLocalHost = () => isBrowser() && domain_config.local.hostname === window.location.hostname - +const url = isBrowser() && window.location.href +const is_academy = isBrowser() && url.includes('academy') const getAppId = (): null | number | string => { let app_id = null const user_app_id = '' // you can insert Application ID of your registered application here @@ -83,24 +84,28 @@ const getAppId = (): null | number | string => { const config_app_id = window.localStorage.getItem('config.app_id') - if (url_app_id) { - app_id = url_app_id - } else if (config_app_id) { - app_id = config_app_id - } else if (isStaging()) { - window.localStorage.removeItem('config.default_app_id') - app_id = domain_config.staging.app_id - } else if (isBeta()) { - window.localStorage.removeItem('config.default_app_id') - app_id = domain_config.beta.app_id - } else if (user_app_id.length) { - window.localStorage.setItem('config.default_app_id', user_app_id) // it's being used in endpoint chrome extension - please do not remove - app_id = user_app_id - } else if (isLocalHost()) { - app_id = domain_config.local.app_id + if (is_academy) { + app_id = 37228 } else { - window.localStorage.removeItem('config.default_app_id') - app_id = isProduction() ? prod_app_id : domain_config.test.app_id + if (url_app_id) { + app_id = url_app_id + } else if (config_app_id) { + app_id = config_app_id + } else if (isStaging()) { + window.localStorage.removeItem('config.default_app_id') + app_id = domain_config.staging.app_id + } else if (isBeta()) { + window.localStorage.removeItem('config.default_app_id') + app_id = domain_config.beta.app_id + } else if (user_app_id.length) { + window.localStorage.setItem('config.default_app_id', user_app_id) // it's being used in endpoint chrome extension - please do not remove + app_id = user_app_id + } else if (isLocalHost()) { + app_id = domain_config.local.app_id + } else { + window.localStorage.removeItem('config.default_app_id') + app_id = isProduction() ? prod_app_id : domain_config.test.app_id + } } } return app_id diff --git a/src/features/hooks/use-residence-list/index.tsx b/src/features/hooks/use-residence-list/index.tsx index 79bd5a0080e..5493372e307 100644 --- a/src/features/hooks/use-residence-list/index.tsx +++ b/src/features/hooks/use-residence-list/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo } from 'react' +import { useEffect, useMemo, useState } from 'react' import useWS from 'components/hooks/useWS' export type ResidenceType = { @@ -34,6 +34,13 @@ export const useResidenceList = ({ restricted_countries?: ['Iran', 'North Korea', 'Myanmar (Burma)', 'Syria', 'Cuba'] } = {}) => { const { send, data } = useWS('residence_list') + // console.log( + // data.map((item) => { + // if (item.disabled === 'DISABLED') { + + // } + // }), + // ) useEffect(() => { send() }, [send]) diff --git a/src/features/pages/signup-academy-complete/residence-form.tsx b/src/features/pages/signup-academy-complete/residence-form.tsx index 685b814a24b..ecf3b4d2c5b 100644 --- a/src/features/pages/signup-academy-complete/residence-form.tsx +++ b/src/features/pages/signup-academy-complete/residence-form.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React from 'react' import styled from 'styled-components' import { next_btn } from './signup-academy.module.scss' import { DropdownSearch } from 'components/elements' @@ -93,7 +93,6 @@ const ResidenceForm = ({ items={item.list} selected_item={country} mb="5px" - // error={form_errors[`${item.name}_error_msg`]} onChange={(country) => { setSelectedValue((prevState) => ({ ...prevState, @@ -117,7 +116,6 @@ const ResidenceForm = ({ items={item.list} selected_item={citizenship} mb="5px" - // error={form_errors[`${item.name}_error_msg`]} onChange={(citizenship) => { setSelectedValue((prevState) => ({ ...prevState, diff --git a/src/features/pages/signup-academy/form-container/form-social-buttons.tsx b/src/features/pages/signup-academy/form-container/form-social-buttons.tsx deleted file mode 100644 index 417e2bbd3ec..00000000000 --- a/src/features/pages/signup-academy/form-container/form-social-buttons.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import React from 'react' -import { Analytics } from '@deriv-com/analytics' -import { signup_apple_btn, signup_fb_btn, signup_login_redirect } from '../signup.module.scss' -import Login from 'common/login' -import Button from 'features/components/atoms/button' -import Flex from 'features/components/atoms/flex-box' -import Image from 'features/components/atoms/image' -import Typography from 'features/components/atoms/typography' -import AppleLogo from 'images/svg/signup_apple_icon.svg' -import FacebookLogo from 'images/svg/signup_fb_icon.svg' -import GoogleLogo from 'images/svg/google_logo.svg' -import { Localize } from 'components/localization' -import { isBrowser } from 'common/utility' - -const FormSocialButtons = () => { - const analyticsData: Parameters[1] = { - action: 'started', - form_source: isBrowser() && window.location.hostname, - form_name: 'default_diel_deriv', - } - - return ( - <> - { - Analytics?.trackEvent('ce_virtual_signup_form', { - signup_provider: 'google', - ...analyticsData, - }) - Login.initOneAll('google') - }} - > - - - - - - - - { - Analytics?.trackEvent('ce_virtual_signup_form', { - signup_provider: 'facebook', - ...analyticsData, - }) - Login.initOneAll('facebook') - }} - > - - - - - - - - { - Analytics?.trackEvent('ce_virtual_signup_form', { - signup_provider: 'apple', - ...analyticsData, - }) - Login.initOneAll('apple') - }} - > - - - - - - - - - { - event.preventDefault() - Analytics?.trackEvent('ce_virtual_signup_form', { - action: 'go_to_login', - form_source: isBrowser() && window.location.hostname, - form_name: 'default_diel_deriv', - }) - Login.redirectToLogin() - }} - />, - ]} - /> - - - ) -} - -export default FormSocialButtons diff --git a/src/features/pages/signup-academy/form-container/index.tsx b/src/features/pages/signup-academy/form-container/index.tsx index b598159302b..b91513f75e6 100644 --- a/src/features/pages/signup-academy/form-container/index.tsx +++ b/src/features/pages/signup-academy/form-container/index.tsx @@ -1,18 +1,20 @@ import React from 'react' +import { Analytics } from '@deriv-com/analytics' import { signup_form_container, - signup_form_line, link_text, sign_up_header, sign_up_content, + signup_login_redirect, } from '../signup.module.scss' -import FormSocialButtons from './form-social-buttons' import SignUpPageForm from './signup-page-form' import Flex from 'features/components/atoms/flex-box' import Typography from 'features/components/atoms/typography' import { Localize } from 'components/localization' import Link from 'features/components/atoms/link' import useRegion from 'components/hooks/use-region' +import Login from 'common/login' +import { isBrowser } from 'common/utility' const SignUpFormContainer = () => { const { is_eu } = useRegion() @@ -60,16 +62,29 @@ const SignUpFormContainer = () => { ]} /> - - - - - - - - - - + + + { + event.preventDefault() + Analytics?.trackEvent('ce_virtual_signup_form', { + action: 'go_to_login', + form_source: isBrowser() && window.location.hostname, + form_name: 'default_diel_deriv', + }) + Login.redirectToLogin() + }} + />, + ]} + /> + ) } diff --git a/src/features/pages/signup-academy/index.tsx b/src/features/pages/signup-academy/index.tsx index ea8636ca05b..9a8392d90cc 100644 --- a/src/features/pages/signup-academy/index.tsx +++ b/src/features/pages/signup-academy/index.tsx @@ -36,7 +36,7 @@ const SignUpAcademy = () => { container="fluid" align="start" md={{ - justify: 'around', + justify: 'center', align: 'center', gap: '16x', }} diff --git a/src/features/pages/signup-academy/signup.content.tsx b/src/features/pages/signup-academy/signup.content.tsx index 8c7e3f670fb..4494d1b7841 100644 --- a/src/features/pages/signup-academy/signup.content.tsx +++ b/src/features/pages/signup-academy/signup.content.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { signup_content } from './signup.module.scss' import Flex from 'features/components/atoms/flex-box' import Typography from 'features/components/atoms/typography' import { Localize } from 'components/localization' @@ -6,17 +7,16 @@ import { Localize } from 'components/localization' const SignUpContent = () => { return ( - + - + diff --git a/src/features/pages/signup-academy/signup.module.scss b/src/features/pages/signup-academy/signup.module.scss index 8ec6458a89e..5225cf288e2 100644 --- a/src/features/pages/signup-academy/signup.module.scss +++ b/src/features/pages/signup-academy/signup.module.scss @@ -46,3 +46,6 @@ inline-size: 19.9rem; block-size: 3.19rem; } +.signup_content { + max-width: 44rem; +} From 99d00ec670e7001920bfc97dad938ca7d90f0810 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Tue, 20 Feb 2024 09:01:55 +0400 Subject: [PATCH 07/44] fix: changed the url flow for academy signup flow --- crowdin/messages.json | 1 + .../hooks/use-residence-list/index.tsx | 31 ++++++------ .../residence-form.tsx | 49 ++++++++++++++----- .../index.tsx | 0 .../signup => academy-signup}/index.tsx | 0 5 files changed, 54 insertions(+), 27 deletions(-) rename src/pages/{academy/completesignup => academy-complete-signup}/index.tsx (100%) rename src/pages/{academy/signup => academy-signup}/index.tsx (100%) diff --git a/crowdin/messages.json b/crowdin/messages.json index c700102b437..f02d3686145 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -1813,6 +1813,7 @@ "1673505406": "An impersonator’s main goal is to steal your sensitive information and funds.", "1673824550": "Minimum stake", "1674164323": "<0>With a x500 multiplier, if the market goes down 2%, you'll <1>lose only $100. An automatic stop out kicks in if your loss reaches your stake amount.", + "1674319947": "Unfortunately, Deriv is not available in this country.", "1674798397": "Trade multipliers on our mobile app.", "1676292946": "Forex trading gives you the chance to profit from changes in the relative values of currencies on the forex market.", "1677027187": "Forex", diff --git a/src/features/hooks/use-residence-list/index.tsx b/src/features/hooks/use-residence-list/index.tsx index 5493372e307..0521e347890 100644 --- a/src/features/hooks/use-residence-list/index.tsx +++ b/src/features/hooks/use-residence-list/index.tsx @@ -18,14 +18,23 @@ const formatResidenceList = ({ } return residences .filter(({ text: name }) => !restricted.includes(name)) - .map(({ text: display_name, text: name, value: symbol, phone_idd: prefix }) => { - return { - name, - display_name, - symbol, - prefix, - } - }) + .map( + ({ + text: display_name, + text: name, + value: symbol, + phone_idd: prefix, + disabled: disabled, + }) => { + return { + name, + display_name, + symbol, + prefix, + disabled, + } + }, + ) } export const useResidenceList = ({ @@ -34,13 +43,7 @@ export const useResidenceList = ({ restricted_countries?: ['Iran', 'North Korea', 'Myanmar (Burma)', 'Syria', 'Cuba'] } = {}) => { const { send, data } = useWS('residence_list') - // console.log( - // data.map((item) => { - // if (item.disabled === 'DISABLED') { - // } - // }), - // ) useEffect(() => { send() }, [send]) diff --git a/src/features/pages/signup-academy-complete/residence-form.tsx b/src/features/pages/signup-academy-complete/residence-form.tsx index ecf3b4d2c5b..f7c10a263c2 100644 --- a/src/features/pages/signup-academy-complete/residence-form.tsx +++ b/src/features/pages/signup-academy-complete/residence-form.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useState } from 'react' import styled from 'styled-components' import { next_btn } from './signup-academy.module.scss' import { DropdownSearch } from 'components/elements' @@ -30,6 +30,7 @@ type CountryType = { name: string display_name: string value: string + disabled: string } type HandleNextType = () => void @@ -50,6 +51,21 @@ const ResidenceForm = ({ setSelectedValue, }: ResidenceFormProps) => { const { country, citizenship } = selected_value + const [errors, setErrors] = useState(false) + + const handleSelection = (country) => { + const is_country_disabled = residence_list.filter((item) => country.name === item.name)?.[0] + ?.disabled + setSelectedValue((prevState) => ({ + ...prevState, + country: country, + })) + if (is_country_disabled) { + setErrors(true) + } else { + setErrors(false) + } + } const form_inputs = [ { @@ -61,6 +77,7 @@ const ResidenceForm = ({ placeholder_message: localize( '_t_Country of residence is where you currently live._t_', ), + error_message: '_t_Unfortunately, Deriv is not available in this country._t_', }, { id: 'dm-citizenship-select', @@ -73,7 +90,7 @@ const ResidenceForm = ({ ), }, ] - + console.log(residence_list) return ( @@ -93,17 +110,23 @@ const ResidenceForm = ({ items={item.list} selected_item={country} mb="5px" - onChange={(country) => { - setSelectedValue((prevState) => ({ - ...prevState, - country: country, - })) - }} + onChange={(country) => handleSelection(country)} style={{ marginTop: '16px' }} /> - - - + {errors && ( + + + + )} + {!errors && ( + + + + )} ) } else { @@ -124,7 +147,7 @@ const ResidenceForm = ({ }} style={{ marginTop: '16px' }} /> - + @@ -134,7 +157,7 @@ const ResidenceForm = ({
diff --git a/src/pages/academy/completesignup/index.tsx b/src/pages/academy-complete-signup/index.tsx similarity index 100% rename from src/pages/academy/completesignup/index.tsx rename to src/pages/academy-complete-signup/index.tsx diff --git a/src/pages/academy/signup/index.tsx b/src/pages/academy-signup/index.tsx similarity index 100% rename from src/pages/academy/signup/index.tsx rename to src/pages/academy-signup/index.tsx From 3f73ee418ef08a5826ad4f1e6fcb12449e49e82c Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Tue, 20 Feb 2024 17:34:22 +0400 Subject: [PATCH 08/44] fix: passowrd changes --- crowdin/messages.json | 1 + .../signup-academy-complete/password-form.tsx | 23 +++++++++++-------- .../password-validation.tsx | 5 ++++ 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/crowdin/messages.json b/crowdin/messages.json index f02d3686145..bc175f8f23e 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -1488,6 +1488,7 @@ "1403586449": "Competitively tighter spreads", "1403761038": "Real account ", "1403848854": "The Deriv MT5 Standard account offers new and experienced traders high leverage and variable spreads for maximum flexibility.", + "1404440001": "Repeats like “abcabcabc” are only slightly harder to guess than “abc”.", "1404594106": "Swap short (Daily points)", "1405194573": "Locate the live chat widget on our website or app at the bottom right corner of the screen.", "1405929527": "Your IB commissions earned from Deriv X are credited directly into your Deriv account daily.", diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/signup-academy-complete/password-form.tsx index 202edfac4cf..32ba1db9e85 100644 --- a/src/features/pages/signup-academy-complete/password-form.tsx +++ b/src/features/pages/signup-academy-complete/password-form.tsx @@ -1,9 +1,10 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import styled from 'styled-components' import { navigate } from 'gatsby' import { trading_btn, signup_form_line } from './signup-academy.module.scss' -import AcademyInput from './academy-input' +import AcademyPasswordInput from './academy-input' import { academy_validation } from './password-validation' +import { isBrowser } from 'common/utility' import Flex from 'features/components/atoms/flex-box' import Typography from 'features/components/atoms/typography' import { Localize, localize } from 'components/localization' @@ -18,7 +19,6 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { const [password, setPassword] = useState('') const [form_errors, setFormErrors] = useState('') const [submit_status, setSubmitStatus] = useState('') - const [submit_error_msg, setSubmitErrorMsg] = useState('') const GoTrading = styled(Button)` border-radius: 4px; ` @@ -38,6 +38,14 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { setFormErrors('') } + const params = new URLSearchParams(isBrowser() && location.search) + const codeValue = params.get('code') + + const handleNavigation = () => { + window.location.href = + 'https://oauth.deriv.com/oauth2/session/thinkific/create?app_id=37228' + } + const GetDerivAcademy = () => { apiManager .augmentedSend('new_account_virtual', { @@ -45,7 +53,7 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { type: 'trading', client_password: password, residence: residence, - verification_code: 'uoJvVuQ6', + verification_code: codeValue, }) .then((response) => { console.log(response) @@ -54,10 +62,7 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { setSubmitErrorMsg(response.error.message) } else { setSubmitStatus('success') - navigate( - 'https://oauth.deriv.com/oauth2/session/thinkific/create?app_id=37228', - { replace: true }, - ) + handleNavigation() } }) } @@ -69,7 +74,7 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { - /?]).{8,}$/, + common_password: /^(?!.*(.)\1.*\1)(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,}$/, } export const validation_is_lack_number = (input, min_digit) => input.length + 1 > min_digit @@ -9,6 +10,10 @@ export const validation_is_lack_number = (input, min_digit) => input.length + 1 export const passwordValidation = (input) => { if (!input) { return localize('_t_You should enter 8-25 characters._t_') + } else if (password_regex_validate.common_password.test(input)) { + return localize( + `_t_Repeats like “abcabcabc” are only slightly harder to guess than “abc”._t_`, + ) } else if (!password_regex_validate.password.test(input)) { return localize( `_t_Password should have lower and uppercase English letters with numbers._t_`, From f50bdfe60ebf19c81a56deb579c9f63abb0a8e98 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Wed, 21 Feb 2024 11:32:14 +0400 Subject: [PATCH 09/44] fix: validation for password --- .../signup-academy-complete/password-form.tsx | 17 +++++++++++----- .../password-validation.tsx | 20 ++++++++++++------- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/signup-academy-complete/password-form.tsx index 32ba1db9e85..05250a9c8eb 100644 --- a/src/features/pages/signup-academy-complete/password-form.tsx +++ b/src/features/pages/signup-academy-complete/password-form.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from 'react' import styled from 'styled-components' -import { navigate } from 'gatsby' import { trading_btn, signup_form_line } from './signup-academy.module.scss' import AcademyPasswordInput from './academy-input' import { academy_validation } from './password-validation' @@ -17,8 +16,10 @@ type AcademyPasswordFormProps = { const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { const [password, setPassword] = useState('') - const [form_errors, setFormErrors] = useState('') + // const [form_errors, setFormErrors] = useState('') const [submit_status, setSubmitStatus] = useState('') + const [form_errors, setFormErrors] = useState({ text: '', is_warning: false }) + const GoTrading = styled(Button)` border-radius: 4px; ` @@ -35,7 +36,7 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { } const handleError = () => { - setFormErrors('') + setFormErrors({ text: '', is_warning: false }) } const params = new URLSearchParams(isBrowser() && location.search) @@ -62,6 +63,7 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { setSubmitErrorMsg(response.error.message) } else { setSubmitStatus('success') + //setting the session token handleNavigation() } }) @@ -80,7 +82,7 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { type="password" label="Create a password" value={password} - error={form_errors} + error={form_errors?.text} placeholder="Create a password" password_icon={true} onChange={handleInput} @@ -97,7 +99,12 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => {
- +
diff --git a/src/features/pages/signup-academy-complete/password-validation.tsx b/src/features/pages/signup-academy-complete/password-validation.tsx index 6c3384e8e2c..83aa62fc0cc 100644 --- a/src/features/pages/signup-academy-complete/password-validation.tsx +++ b/src/features/pages/signup-academy-complete/password-validation.tsx @@ -9,15 +9,21 @@ export const validation_is_lack_number = (input, min_digit) => input.length + 1 export const passwordValidation = (input) => { if (!input) { - return localize('_t_You should enter 8-25 characters._t_') + return { text: localize('_t_You should enter 8-25 characters._t_'), is_warning: false } } else if (password_regex_validate.common_password.test(input)) { - return localize( - `_t_Repeats like “abcabcabc” are only slightly harder to guess than “abc”._t_`, - ) + return { + text: localize( + `_t_Repeats like “abcabcabc” are only slightly harder to guess than “abc”._t_`, + ), + is_warning: true, + } } else if (!password_regex_validate.password.test(input)) { - return localize( - `_t_Password should have lower and uppercase English letters with numbers._t_`, - ) + return { + text: localize( + `_t_Password should have lower and uppercase English letters with numbers._t_`, + ), + is_warning: false, + } } } From 7e830cc2f8e1c79d2baf1d5a755107b1f745cc31 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Wed, 21 Feb 2024 15:33:44 +0400 Subject: [PATCH 10/44] fix: password feature button --- .../signup-academy-complete/academy-input.tsx | 24 ++++++++++++------- .../signup-academy-complete/password-form.tsx | 18 ++++++-------- 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/features/pages/signup-academy-complete/academy-input.tsx b/src/features/pages/signup-academy-complete/academy-input.tsx index 5f6735785df..612be74d3d0 100644 --- a/src/features/pages/signup-academy-complete/academy-input.tsx +++ b/src/features/pages/signup-academy-complete/academy-input.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react' +import React, { useRef, useState, useCallback } from 'react' import styled, { css } from 'styled-components' import device from 'themes/device' import { @@ -13,15 +13,16 @@ import ClosedEye from 'images/svg/eye.svg' type AcademyPasswordInputProps = { password_icon?: boolean + error_or_warning?: { text: string; is_warning: boolean } } & InputProps export const StyledRelativeWrapper = styled(RelativeWrapper)` margin-block: 16px 36px; ` -export const ErrorMessage = styled.div<{ error?: boolean }>` +export const ErrorMessage = styled.div<{ is_warning?: boolean }>` position: absolute; font-size: 12px; - color: ${({ error }) => (error ? 'var(--color-red-1)' : 'var(--color-grey-5)')}; + color: ${({ is_warning }) => (is_warning ? 'var(--color-green)' : 'var(--color-red)')}; padding: 6px 0; ` const StyledIcon = styled.img<{ password_icon?: boolean }>` @@ -84,17 +85,20 @@ export const StyledInputWrapper = styled(InputWrapper)<{ const AcademyPasswordInput = ({ label = '', id = '', - error = '', + error_or_warning = { text: '', is_warning: false }, password_icon, ...props }: AcademyPasswordInputProps) => { const current_input = useRef(null) const [is_password_visible, setPasswordVisible] = useState(false) + const get_error_message = useCallback(() => { + return error_or_warning.text + }, [error_or_warning]) return ( @@ -102,14 +106,14 @@ const AcademyPasswordInput = ({ {...props} id={id} width={500} - error={error} + error={get_error_message()} showLabel={label} background="white" ref={current_input} type={is_password_visible ? 'text' : props.type} /> {label && ( - diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/signup-academy-complete/password-form.tsx index 05250a9c8eb..3c17820937a 100644 --- a/src/features/pages/signup-academy-complete/password-form.tsx +++ b/src/features/pages/signup-academy-complete/password-form.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { useEffect, useState, useCallback } from 'react' import styled from 'styled-components' import { trading_btn, signup_form_line } from './signup-academy.module.scss' import AcademyPasswordInput from './academy-input' @@ -24,16 +24,14 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { border-radius: 4px; ` - const handleInput = (e) => { + const handleInput = useCallback((e: React.ChangeEvent) => { e.preventDefault() const { value } = e.target setPassword(value) - if (academy_validation) { - const error_msg = academy_validation.password(value) - setFormErrors(error_msg) - } - } + const error_msg = academy_validation?.password(value) || { text: '', is_warning: false } + setFormErrors(error_msg) + }, []) const handleError = () => { setFormErrors({ text: '', is_warning: false }) @@ -82,7 +80,7 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { type="password" label="Create a password" value={password} - error={form_errors?.text} + error_or_warning={form_errors} placeholder="Create a password" password_icon={true} onChange={handleInput} @@ -101,9 +99,7 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => {
From 352c8bef936ae6135a9f9f4ab1dacf093efc87e8 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Wed, 21 Feb 2024 16:38:28 +0400 Subject: [PATCH 11/44] fix: added the token auth --- .../pages/signup-academy-complete/academy-input.tsx | 5 +++-- .../pages/signup-academy-complete/password-form.tsx | 8 ++------ 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/features/pages/signup-academy-complete/academy-input.tsx b/src/features/pages/signup-academy-complete/academy-input.tsx index 612be74d3d0..32e5a87911b 100644 --- a/src/features/pages/signup-academy-complete/academy-input.tsx +++ b/src/features/pages/signup-academy-complete/academy-input.tsx @@ -22,7 +22,7 @@ export const StyledRelativeWrapper = styled(RelativeWrapper)` export const ErrorMessage = styled.div<{ is_warning?: boolean }>` position: absolute; font-size: 12px; - color: ${({ is_warning }) => (is_warning ? 'var(--color-green)' : 'var(--color-red)')}; + color: ${({ is_warning }) => (is_warning ? 'var(--color-yellow-3)' : 'var(--color-red)')}; padding: 6px 0; ` const StyledIcon = styled.img<{ password_icon?: boolean }>` @@ -48,6 +48,7 @@ export const Label = styled(StyledLabel)` export const StyledInputWrapper = styled(InputWrapper)<{ password_length?: number is_password?: boolean + // is_warning:boolean }>` border-radius: 4px; border: solid 1px var(--color-grey-7); @@ -98,7 +99,7 @@ const AcademyPasswordInput = ({ return ( diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/signup-academy-complete/password-form.tsx index 3c17820937a..975570525e7 100644 --- a/src/features/pages/signup-academy-complete/password-form.tsx +++ b/src/features/pages/signup-academy-complete/password-form.tsx @@ -40,11 +40,6 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { const params = new URLSearchParams(isBrowser() && location.search) const codeValue = params.get('code') - const handleNavigation = () => { - window.location.href = - 'https://oauth.deriv.com/oauth2/session/thinkific/create?app_id=37228' - } - const GetDerivAcademy = () => { apiManager .augmentedSend('new_account_virtual', { @@ -55,6 +50,7 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { verification_code: codeValue, }) .then((response) => { + const auth_token = response.new_account_virtual.oauth_token console.log(response) if (response.error) { setSubmitStatus('error') @@ -62,7 +58,7 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { } else { setSubmitStatus('success') //setting the session token - handleNavigation() + window.location.href = `https://oauth.deriv.com/oauth2/session/thinkific/create?app_id=37228&token1=${auth_token}` } }) } From 0645ff9b049812b73ee88ae1dafa2cb827f2c7f8 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Wed, 21 Feb 2024 17:38:26 +0400 Subject: [PATCH 12/44] fix: added authorized token --- .../pages/signup-academy-complete/password-form.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/signup-academy-complete/password-form.tsx index 975570525e7..37b401ce11d 100644 --- a/src/features/pages/signup-academy-complete/password-form.tsx +++ b/src/features/pages/signup-academy-complete/password-form.tsx @@ -50,15 +50,19 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { verification_code: codeValue, }) .then((response) => { - const auth_token = response.new_account_virtual.oauth_token console.log(response) if (response.error) { setSubmitStatus('error') setSubmitErrorMsg(response.error.message) } else { + const auth_token = response.new_account_virtual.oauth_token + apiManager.augmentedSend('authorize', { + authorize: auth_token, + }) setSubmitStatus('success') + //setting the session token - window.location.href = `https://oauth.deriv.com/oauth2/session/thinkific/create?app_id=37228&token1=${auth_token}` + // window.location.href = `https://oauth.deriv.com/oauth2/session/thinkific/create?app_id=37228&token1=${auth_token}` } }) } From 797409f8ac767b984c4c3a6bdd6bc8954bb2cef4 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Thu, 22 Feb 2024 10:20:48 +0400 Subject: [PATCH 13/44] fix: background color issue --- src/features/pages/signup-academy-complete/pop-up-menu.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/features/pages/signup-academy-complete/pop-up-menu.tsx b/src/features/pages/signup-academy-complete/pop-up-menu.tsx index 70231fbda3a..1724f3e3c4a 100644 --- a/src/features/pages/signup-academy-complete/pop-up-menu.tsx +++ b/src/features/pages/signup-academy-complete/pop-up-menu.tsx @@ -36,8 +36,7 @@ const Background = styled.div` height: 100vh; top: 0; left: 0; - background-color: var(--color-black-6); - opacity: 0.4; + background-color: rgba(0, 0, 0, 0.72); z-index: 10; ` const PopUpMenu = () => { From f7e75de67507b6d462f1df31c43d79e3fdbdf73b Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Thu, 22 Feb 2024 11:25:14 +0400 Subject: [PATCH 14/44] fix: redirection of url to thinkific --- crowdin/messages.json | 2 -- .../pages/signup-academy-complete/password-form.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/crowdin/messages.json b/crowdin/messages.json index bc175f8f23e..cfff66b1d68 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -3458,8 +3458,6 @@ "-1541554430": "Next", "-1770179687": "By clicking “Create account”, you confirm that you are 18 or older. You understand that we may use your email address to send you information about Deriv products and services as well as market news. You can always unsubscribe from these emails in your account settings. For more information, please take a look at Deriv’s <0>Security and privacy policy.", "-417711545": "Create account", - "-1264882776": "Your go-to platform for exclusive trading courses", - "-609665275": "Gain access to comprehensive modules on forex, Deriv MT5, and more.", "-2125275828": "Unique trade types. Hundreds of instruments. Financial and derived markets.", "-154889447": "Ready to join over 2.5 million traders who have chosen Deriv as their trusted broker? Enter your email address to create a free demo account.", "-1957784093": "Easy And Free Sign Up | Online Trading | Deriv.com", diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/signup-academy-complete/password-form.tsx index 37b401ce11d..492e4b50b9d 100644 --- a/src/features/pages/signup-academy-complete/password-form.tsx +++ b/src/features/pages/signup-academy-complete/password-form.tsx @@ -56,13 +56,13 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { setSubmitErrorMsg(response.error.message) } else { const auth_token = response.new_account_virtual.oauth_token - apiManager.augmentedSend('authorize', { - authorize: auth_token, - }) + // apiManager.augmentedSend('authorize', { + // authorize: auth_token, + // }) setSubmitStatus('success') //setting the session token - // window.location.href = `https://oauth.deriv.com/oauth2/session/thinkific/create?app_id=37228&token1=${auth_token}` + window.location.href = `https://oauth.deriv.com/oauth2/session/thinkific/create?app_id=37228&token1=${auth_token}` } }) } From 3be632d4880083f8395ca5f719289f6237d8b6d1 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Thu, 22 Feb 2024 11:44:58 +0400 Subject: [PATCH 15/44] fix: authorize the api call --- .../pages/signup-academy-complete/password-form.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/signup-academy-complete/password-form.tsx index 492e4b50b9d..dbf963a7c00 100644 --- a/src/features/pages/signup-academy-complete/password-form.tsx +++ b/src/features/pages/signup-academy-complete/password-form.tsx @@ -56,9 +56,9 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { setSubmitErrorMsg(response.error.message) } else { const auth_token = response.new_account_virtual.oauth_token - // apiManager.augmentedSend('authorize', { - // authorize: auth_token, - // }) + apiManager.augmentedSend('authorize', { + authorize: auth_token, + }) setSubmitStatus('success') //setting the session token From 4e0bd544008167c38eccce97541c9d7fb1e510b1 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Thu, 22 Feb 2024 16:17:19 +0400 Subject: [PATCH 16/44] fix: redirection of language to english only --- crowdin/messages.json | 2 ++ gatsby-node.js | 35 ++++++++++--------- .../form-container/signup-page-form.tsx | 2 +- 3 files changed, 21 insertions(+), 18 deletions(-) diff --git a/crowdin/messages.json b/crowdin/messages.json index cfff66b1d68..bc175f8f23e 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -3458,6 +3458,8 @@ "-1541554430": "Next", "-1770179687": "By clicking “Create account”, you confirm that you are 18 or older. You understand that we may use your email address to send you information about Deriv products and services as well as market news. You can always unsubscribe from these emails in your account settings. For more information, please take a look at Deriv’s <0>Security and privacy policy.", "-417711545": "Create account", + "-1264882776": "Your go-to platform for exclusive trading courses", + "-609665275": "Gain access to comprehensive modules on forex, Deriv MT5, and more.", "-2125275828": "Unique trade types. Hundreds of instruments. Financial and derived markets.", "-154889447": "Ready to join over 2.5 million traders who have chosen Deriv as their trusted broker? Enter your email address to create a free demo account.", "-1957784093": "Easy And Free Sign Up | Online Trading | Deriv.com", diff --git a/gatsby-node.js b/gatsby-node.js index 2eb3b6243ed..f9194b31a18 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -50,6 +50,7 @@ const BuildPage = (page, actions) => { const who_we_are = /who-we-are/g.test(page.path) const is_cfds = /cfds/g.test(page.path) const is_options = /options/g.test(page.path) + const is_academy = /academy-signup/g.test(page.path) if (is_careers) { createRedirect({ @@ -372,7 +373,14 @@ const BuildPage = (page, actions) => { isPermanent: true, }) } - + if (is_academy) { + createRedirect({ + fromPath: `/${lang}/academy-signup`, + toPath: `/en/academy-signup`, + redirectInBrowser: true, + isPermanent: true, + }) + } return current_page }) } @@ -429,19 +437,14 @@ exports.onCreateWebpackConfig = ({ stage, actions, loaders, getConfig }, { ...op splitChunks: { chunks: 'all', cacheGroups: { - vendor: { - test: /[\\/]node_modules[\\/]/, - name: 'vendors', - chunks: 'all', - priority: -10, - }, - bundle: { - test: /\.(js|ts|tsx)$/, - name: 'bundle', - chunks: 'all', - priority: -20, - enforce: true, - }, + default: false, + vendors: false, + // Merge all js, ts, and tsx files into one bundle + all: { + test: /\.(js|ts|tsx)$/, + name: 'bundle', + chunks: 'all', + }, }, }, mangleExports: 'size', @@ -462,9 +465,7 @@ exports.onCreateWebpackConfig = ({ stage, actions, loaders, getConfig }, { ...op providedExports: true, usedExports: true, }, - plugins: [ - new StylelintPlugin({ ...style_lint_options, ...options }), - ], + plugins: [new StylelintPlugin({ ...style_lint_options, ...options })], resolve: { modules: [path.resolve(__dirname, 'src'), 'node_modules'], }, diff --git a/src/features/pages/signup-academy/form-container/signup-page-form.tsx b/src/features/pages/signup-academy/form-container/signup-page-form.tsx index 066dee6aa36..53a491e5ecb 100644 --- a/src/features/pages/signup-academy/form-container/signup-page-form.tsx +++ b/src/features/pages/signup-academy/form-container/signup-page-form.tsx @@ -44,7 +44,7 @@ const SignUpPageForm = () => { components={[ Date: Mon, 26 Feb 2024 09:19:10 +0400 Subject: [PATCH 17/44] fix: for handling the response for the country --- src/features/pages/signup-academy-complete/pop-up-menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/pages/signup-academy-complete/pop-up-menu.tsx b/src/features/pages/signup-academy-complete/pop-up-menu.tsx index 1724f3e3c4a..0bb7edd70f6 100644 --- a/src/features/pages/signup-academy-complete/pop-up-menu.tsx +++ b/src/features/pages/signup-academy-complete/pop-up-menu.tsx @@ -53,7 +53,7 @@ const PopUpMenu = () => { {!is_password && ( setIsPassword(true)} selected_value={selected_value} setSelectedValue={setSelectedValue} From 1f2316d7b6342d1d684188e4de4aedbb89bc41f9 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Mon, 26 Feb 2024 13:19:42 +0400 Subject: [PATCH 18/44] fix: flickering logo issue --- src/common/login.ts | 1 - .../templates/navigation/static-nav/index.tsx | 13 +++++++++++-- .../navigation/static-nav/static-nav.module.scss | 4 ++++ .../pages/signup-academy-complete/index.tsx | 2 +- src/features/pages/signup-academy/index.tsx | 15 ++------------- .../{deriv-academy.svg => derivacademy.svg} | 0 6 files changed, 18 insertions(+), 17 deletions(-) rename src/images/common/{deriv-academy.svg => derivacademy.svg} (100%) diff --git a/src/common/login.ts b/src/common/login.ts index b82a3c42a79..217c681596c 100644 --- a/src/common/login.ts +++ b/src/common/login.ts @@ -1,5 +1,4 @@ import Cookies from 'js-cookie' -import { useEffect, useState } from 'react' import { isStorageSupported } from './storage' import { getCookiesFields, getCookiesObject, getDataLink, getDataObjFromCookies } from './cookies' import { getAppId } from './websocket/config' diff --git a/src/features/components/templates/navigation/static-nav/index.tsx b/src/features/components/templates/navigation/static-nav/index.tsx index 1e2db042934..7b4637160da 100644 --- a/src/features/components/templates/navigation/static-nav/index.tsx +++ b/src/features/components/templates/navigation/static-nav/index.tsx @@ -1,18 +1,27 @@ import React from 'react' import NavTemplate from '../template' -import { static_nav_logo } from './static-nav.module.scss' +import { static_nav_logo, static_nav_logo_academy } from './static-nav.module.scss' import Link from 'features/components/atoms/link' import Image from 'features/components/atoms/image' import LogoImage from 'images/common/rebranding_logo.svg' +import AcademyLogoImage from 'images/common/derivacademy.svg' +import { isBrowser } from 'common/utility' const StaticNav = () => { + const url = isBrowser() && window.location.href + const is_academy = isBrowser() && url.includes('academy') + const image = is_academy ? AcademyLogoImage : LogoImage + return ( ( - + )} /> diff --git a/src/features/components/templates/navigation/static-nav/static-nav.module.scss b/src/features/components/templates/navigation/static-nav/static-nav.module.scss index 9670a73fa9c..bb3c6640e15 100644 --- a/src/features/components/templates/navigation/static-nav/static-nav.module.scss +++ b/src/features/components/templates/navigation/static-nav/static-nav.module.scss @@ -9,3 +9,7 @@ block-size: 3.6rem; } } +.static_nav_logo_academy { + inline-size: 19.9rem; + block-size: 3.19rem; +} diff --git a/src/features/pages/signup-academy-complete/index.tsx b/src/features/pages/signup-academy-complete/index.tsx index a2da5fd2bad..831cd12b83b 100644 --- a/src/features/pages/signup-academy-complete/index.tsx +++ b/src/features/pages/signup-academy-complete/index.tsx @@ -3,7 +3,7 @@ import { signup_wrapper, static_nav_logo } from '../signup-academy/signup.module import Layout from 'features/components/templates/layout' import PopUpMenu from './pop-up-menu' import NavTemplate from 'features/components/templates/navigation/template' -import LogoImage from 'images/common/deriv-academy.svg' +import LogoImage from 'images/common/derivacademy.svg' import Link from 'features/components/atoms/link' import Image from 'features/components/atoms/image' diff --git a/src/features/pages/signup-academy/index.tsx b/src/features/pages/signup-academy/index.tsx index 9a8392d90cc..5ebddfa0c1a 100644 --- a/src/features/pages/signup-academy/index.tsx +++ b/src/features/pages/signup-academy/index.tsx @@ -4,12 +4,9 @@ import Layout from 'features/components/templates/layout' import { signup_wrapper, static_nav_logo } from './signup.module.scss' import SignUpContent from './signup.content' import SignUpFormContainer from './form-container' -import NavTemplate from 'features/components/templates/navigation/template' import Flex from 'features/components/atoms/flex-box' import { isBrowser } from 'common/utility' -import Link from 'features/components/atoms/link' -import Image from 'features/components/atoms/image' -import LogoImage from 'images/common/deriv-academy.svg' +import StaticNav from 'features/components/templates/navigation/static-nav' const SignUpAcademy = () => { const analyticsData: Parameters[1] = { @@ -23,15 +20,7 @@ const SignUpAcademy = () => { return ( - ( - - - - )} - /> + Date: Mon, 26 Feb 2024 14:56:25 +0400 Subject: [PATCH 19/44] fix: flickering logo issue with use state --- .../templates/navigation/static-nav/index.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/features/components/templates/navigation/static-nav/index.tsx b/src/features/components/templates/navigation/static-nav/index.tsx index 7b4637160da..c89169806b3 100644 --- a/src/features/components/templates/navigation/static-nav/index.tsx +++ b/src/features/components/templates/navigation/static-nav/index.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' import NavTemplate from '../template' import { static_nav_logo, static_nav_logo_academy } from './static-nav.module.scss' import Link from 'features/components/atoms/link' @@ -9,8 +9,14 @@ import { isBrowser } from 'common/utility' const StaticNav = () => { const url = isBrowser() && window.location.href - const is_academy = isBrowser() && url.includes('academy') - const image = is_academy ? AcademyLogoImage : LogoImage + const academy = isBrowser() && url.includes('academy') + const [is_academy, setIsAcademy] = useState(false) + useEffect(() => { + // setIsAcademy(true) + if (academy) { + setIsAcademy(true) + } + }, []) return ( { renderLogo={() => ( From 034c0b2143aea158eca2a4fe37c4902acdcfc75b Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Mon, 26 Feb 2024 15:23:51 +0400 Subject: [PATCH 20/44] fix: flickering logo --- .../templates/navigation/static-nav/index.tsx | 21 +++---------------- src/features/pages/signup-academy/index.tsx | 16 ++++++++++++-- 2 files changed, 17 insertions(+), 20 deletions(-) diff --git a/src/features/components/templates/navigation/static-nav/index.tsx b/src/features/components/templates/navigation/static-nav/index.tsx index c89169806b3..1e2db042934 100644 --- a/src/features/components/templates/navigation/static-nav/index.tsx +++ b/src/features/components/templates/navigation/static-nav/index.tsx @@ -1,33 +1,18 @@ -import React, { useEffect, useState } from 'react' +import React from 'react' import NavTemplate from '../template' -import { static_nav_logo, static_nav_logo_academy } from './static-nav.module.scss' +import { static_nav_logo } from './static-nav.module.scss' import Link from 'features/components/atoms/link' import Image from 'features/components/atoms/image' import LogoImage from 'images/common/rebranding_logo.svg' -import AcademyLogoImage from 'images/common/derivacademy.svg' -import { isBrowser } from 'common/utility' const StaticNav = () => { - const url = isBrowser() && window.location.href - const academy = isBrowser() && url.includes('academy') - const [is_academy, setIsAcademy] = useState(false) - useEffect(() => { - // setIsAcademy(true) - if (academy) { - setIsAcademy(true) - } - }, []) - return ( ( - + )} /> diff --git a/src/features/pages/signup-academy/index.tsx b/src/features/pages/signup-academy/index.tsx index 5ebddfa0c1a..eeb6a17700b 100644 --- a/src/features/pages/signup-academy/index.tsx +++ b/src/features/pages/signup-academy/index.tsx @@ -4,9 +4,12 @@ import Layout from 'features/components/templates/layout' import { signup_wrapper, static_nav_logo } from './signup.module.scss' import SignUpContent from './signup.content' import SignUpFormContainer from './form-container' +import NavTemplate from 'features/components/templates/navigation/template' import Flex from 'features/components/atoms/flex-box' import { isBrowser } from 'common/utility' -import StaticNav from 'features/components/templates/navigation/static-nav' +import Link from 'features/components/atoms/link' +import Image from 'features/components/atoms/image' +import LogoImage from 'images/common/derivacademy.svg' const SignUpAcademy = () => { const analyticsData: Parameters[1] = { @@ -20,7 +23,16 @@ const SignUpAcademy = () => { return ( - + ( + + + + )} + /> + Date: Mon, 26 Feb 2024 15:54:12 +0400 Subject: [PATCH 21/44] fix: created the academy nav logo --- .../academy-nav/academy-nav.module.scss | 7 ++++++ .../navigation/academy-nav/index.tsx | 22 +++++++++++++++++++ src/features/pages/signup-academy/index.tsx | 14 ++---------- 3 files changed, 31 insertions(+), 12 deletions(-) create mode 100644 src/features/components/templates/navigation/academy-nav/academy-nav.module.scss create mode 100644 src/features/components/templates/navigation/academy-nav/index.tsx diff --git a/src/features/components/templates/navigation/academy-nav/academy-nav.module.scss b/src/features/components/templates/navigation/academy-nav/academy-nav.module.scss new file mode 100644 index 00000000000..98426a79c1a --- /dev/null +++ b/src/features/components/templates/navigation/academy-nav/academy-nav.module.scss @@ -0,0 +1,7 @@ +@use 'features/styles/theme/theme-mixins' as *; +@import 'features/styles/theme/variables'; + +.static_nav_logo { + inline-size: 19.9rem; + block-size: 3.19rem; +} diff --git a/src/features/components/templates/navigation/academy-nav/index.tsx b/src/features/components/templates/navigation/academy-nav/index.tsx new file mode 100644 index 00000000000..5a48df6e237 --- /dev/null +++ b/src/features/components/templates/navigation/academy-nav/index.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { static_nav_logo } from './academy-nav.module.scss' +import Link from 'features/components/atoms/link' +import Image from 'features/components/atoms/image' +import NavTemplate from 'features/components/templates/navigation/template' +import LogoImage from 'images/common/derivacademy.svg' + +const AcademyNav = () => { + return ( + ( + + + + )} + /> + ) +} + +export default AcademyNav diff --git a/src/features/pages/signup-academy/index.tsx b/src/features/pages/signup-academy/index.tsx index eeb6a17700b..80f749be358 100644 --- a/src/features/pages/signup-academy/index.tsx +++ b/src/features/pages/signup-academy/index.tsx @@ -7,9 +7,7 @@ import SignUpFormContainer from './form-container' import NavTemplate from 'features/components/templates/navigation/template' import Flex from 'features/components/atoms/flex-box' import { isBrowser } from 'common/utility' -import Link from 'features/components/atoms/link' -import Image from 'features/components/atoms/image' -import LogoImage from 'images/common/derivacademy.svg' +import AcademyNav from 'features/components/templates/navigation/academy-nav' const SignUpAcademy = () => { const analyticsData: Parameters[1] = { @@ -23,15 +21,7 @@ const SignUpAcademy = () => { return ( - ( - - - - )} - /> + Date: Tue, 27 Feb 2024 09:44:34 +0400 Subject: [PATCH 22/44] fix: logo fix flicker --- .../templates/navigation/academy-nav/academy-nav.module.scss | 1 - .../templates/navigation/static-nav/static-nav.module.scss | 4 ---- 2 files changed, 5 deletions(-) diff --git a/src/features/components/templates/navigation/academy-nav/academy-nav.module.scss b/src/features/components/templates/navigation/academy-nav/academy-nav.module.scss index 98426a79c1a..1cc87ce0b95 100644 --- a/src/features/components/templates/navigation/academy-nav/academy-nav.module.scss +++ b/src/features/components/templates/navigation/academy-nav/academy-nav.module.scss @@ -1,5 +1,4 @@ @use 'features/styles/theme/theme-mixins' as *; -@import 'features/styles/theme/variables'; .static_nav_logo { inline-size: 19.9rem; diff --git a/src/features/components/templates/navigation/static-nav/static-nav.module.scss b/src/features/components/templates/navigation/static-nav/static-nav.module.scss index bb3c6640e15..9670a73fa9c 100644 --- a/src/features/components/templates/navigation/static-nav/static-nav.module.scss +++ b/src/features/components/templates/navigation/static-nav/static-nav.module.scss @@ -9,7 +9,3 @@ block-size: 3.6rem; } } -.static_nav_logo_academy { - inline-size: 19.9rem; - block-size: 3.19rem; -} From 599e96d700e220921bcba75fef31b263931ce127 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Tue, 27 Feb 2024 13:07:59 +0400 Subject: [PATCH 23/44] fix: password page --- crowdin/messages.json | 2 - package-lock.json | 21 +++ package.json | 1 + .../signup-academy-complete/academy-input.tsx | 141 ------------------ .../signup-academy-complete/password-form.tsx | 38 ++--- .../password-validation.tsx | 40 +---- 6 files changed, 40 insertions(+), 203 deletions(-) delete mode 100644 src/features/pages/signup-academy-complete/academy-input.tsx diff --git a/crowdin/messages.json b/crowdin/messages.json index 82a44621f0b..e99d91fafe0 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -650,7 +650,6 @@ "623188171": "Trade cryptocurrencies and synthetic indices anytime, even on weekends and holidays.", "623694668": "VWO.US", "624256060": "Define optional parameters that give you more control over your trading, including stop loss, take profit, and deal cancellation.", - "627048390": "You should enter 8-25 characters.", "627774646": "Additional income stream from monthly subscriptions.", "627845959": "Things to keep in mind when trading multipliers", "628661446": "If the selected condition is not met or if the last tick is equal to the average of all the ticks, your stake is lost.", @@ -1463,7 +1462,6 @@ "1403586449": "Competitively tighter spreads", "1403761038": "Real account ", "1403848854": "The Deriv MT5 Standard account offers new and experienced traders high leverage and variable spreads for maximum flexibility.", - "1404440001": "Repeats like “abcabcabc” are only slightly harder to guess than “abc”.", "1404594106": "Swap short (Daily points)", "1405194573": "Locate the live chat widget on our website or app at the bottom right corner of the screen.", "1405929527": "Your IB commissions earned from Deriv X are credited directly into your Deriv account daily.", diff --git a/package-lock.json b/package-lock.json index 87711b9bb5f..9c68bb718a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@deriv-com/components": "^0.52.0", "@deriv-com/hooks": "^0.11.0", "@deriv-com/providers": "^0.12.0", + "@deriv-com/ui": "^1.8.8", "@deriv/deriv-api": "^1.0.13", "@deriv/quill-design": "^1.2.16", "@deriv/quill-icons": "^1.17.3", @@ -2826,6 +2827,14 @@ "resolved": "https://registry.npmjs.org/@deriv-com/providers/-/providers-0.12.0.tgz", "integrity": "sha512-BISxdJUrxOfdYGkzsbgpSjIiHErjsFak4Rm+Xv5EsMVGNT7B23Q6wVs3B2D7viaEX8683jmU7WOiE4jp3N05XA==" }, + "node_modules/@deriv-com/ui": { + "version": "1.8.8", + "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.8.8.tgz", + "integrity": "sha512-iUzbckz4tD4z0vKsTijGylld//dWgo3FrKGbmi9F5WoSSAXyhmpuO5ljyeBc3vkefYNwhX9lm+ehjuUeW4tYfA==", + "optionalDependencies": { + "@rollup/rollup-linux-x64-gnu": "^4.9.6" + } + }, "node_modules/@deriv/api-types": { "version": "1.0.156", "resolved": "https://registry.npmjs.org/@deriv/api-types/-/api-types-1.0.156.tgz", @@ -8972,6 +8981,18 @@ "dev": true, "license": "MIT" }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz", + "integrity": "sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==", + "cpu": [ + "x64" + ], + "optional": true, + "os": [ + "linux" + ] + }, "node_modules/@sideway/address": { "version": "4.1.4", "license": "BSD-3-Clause", diff --git a/package.json b/package.json index 715e3c9aff2..9b5abef25f0 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@deriv-com/components": "^0.52.0", "@deriv-com/hooks": "^0.11.0", "@deriv-com/providers": "^0.12.0", + "@deriv-com/ui": "^1.8.8", "@deriv/deriv-api": "^1.0.13", "@deriv/quill-design": "^1.2.16", "@deriv/quill-icons": "^1.17.3", diff --git a/src/features/pages/signup-academy-complete/academy-input.tsx b/src/features/pages/signup-academy-complete/academy-input.tsx deleted file mode 100644 index 32e5a87911b..00000000000 --- a/src/features/pages/signup-academy-complete/academy-input.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import React, { useRef, useState, useCallback } from 'react' -import styled, { css } from 'styled-components' -import device from 'themes/device' -import { - InputProps, - InputWrapper, - RelativeWrapper, - StyledInput, - StyledLabel, -} from 'components/form/input' -import OpenedEye from 'images/svg/signup-affiliates/opened-eye.svg' -import ClosedEye from 'images/svg/eye.svg' - -type AcademyPasswordInputProps = { - password_icon?: boolean - error_or_warning?: { text: string; is_warning: boolean } -} & InputProps - -export const StyledRelativeWrapper = styled(RelativeWrapper)` - margin-block: 16px 36px; -` -export const ErrorMessage = styled.div<{ is_warning?: boolean }>` - position: absolute; - font-size: 12px; - color: ${({ is_warning }) => (is_warning ? 'var(--color-yellow-3)' : 'var(--color-red)')}; - padding: 6px 0; -` -const StyledIcon = styled.img<{ password_icon?: boolean }>` - position: absolute; - right: ${({ password_icon }) => (password_icon ? '2.8rem' : '0.8rem')}; - top: 1.5rem; - height: 1rem; - width: 1.5rem; - cursor: pointer; - - @media ${device.tablet} { - right: ${({ password_icon }) => (password_icon ? '4rem' : '2rem')}; - top: 1.6rem; - } - @media ${device.desktopL} { - top: 1rem; - } -` -export const Label = styled(StyledLabel)` - top: 1.5rem; - color: var(--color-grey-5); -` -export const StyledInputWrapper = styled(InputWrapper)<{ - password_length?: number - is_password?: boolean - // is_warning:boolean -}>` - border-radius: 4px; - border: solid 1px var(--color-grey-7); - ${({ password_length, is_password }) => { - if (is_password && password_length == 0) - return css` - border-bottom: solid 4px var(--color-grey-5); - ` - else if (is_password && password_length >= 1) - return css` - border-bottom: solid 4px var(--color-blue-7); - &:hover { - border-color: var(--color-blue-7); - } - ` - else - return css` - border-bottom: solid 1px var(--color-grey-7); - &:hover { - border-color: var(--color-grey-5); - - & > label { - color: var(--color-grey-5); - } - } - ` - }} - - @media ${device.tabletL} { - height: unset; - border-radius: 4px; - } -` - -const AcademyPasswordInput = ({ - label = '', - id = '', - error_or_warning = { text: '', is_warning: false }, - password_icon, - ...props -}: AcademyPasswordInputProps) => { - const current_input = useRef(null) - const [is_password_visible, setPasswordVisible] = useState(false) - - const get_error_message = useCallback(() => { - return error_or_warning.text - }, [error_or_warning]) - return ( - - - - {label && ( - - )} - - {password_icon && ( - setPasswordVisible(!is_password_visible)} - /> - )} - {get_error_message() && ( - <> - - {get_error_message()} - - - )} - - ) -} - -export default AcademyPasswordInput diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/signup-academy-complete/password-form.tsx index dbf963a7c00..a8e64aa6896 100644 --- a/src/features/pages/signup-academy-complete/password-form.tsx +++ b/src/features/pages/signup-academy-complete/password-form.tsx @@ -1,8 +1,8 @@ -import React, { useEffect, useState, useCallback } from 'react' +import React, { useState, useCallback } from 'react' import styled from 'styled-components' +import { PasswordInput } from '@deriv-com/ui' import { trading_btn, signup_form_line } from './signup-academy.module.scss' -import AcademyPasswordInput from './academy-input' -import { academy_validation } from './password-validation' +import { passwordRegex } from './password-validation' import { isBrowser } from 'common/utility' import Flex from 'features/components/atoms/flex-box' import Typography from 'features/components/atoms/typography' @@ -16,27 +16,19 @@ type AcademyPasswordFormProps = { const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { const [password, setPassword] = useState('') - // const [form_errors, setFormErrors] = useState('') - const [submit_status, setSubmitStatus] = useState('') - const [form_errors, setFormErrors] = useState({ text: '', is_warning: false }) + const [submit_status, setSubmitStatus] = useState() const GoTrading = styled(Button)` border-radius: 4px; ` + const validPassword = (value: string) => passwordRegex.isPasswordValid.test(value) const handleInput = useCallback((e: React.ChangeEvent) => { e.preventDefault() const { value } = e.target - setPassword(value) - const error_msg = academy_validation?.password(value) || { text: '', is_warning: false } - setFormErrors(error_msg) }, []) - const handleError = () => { - setFormErrors({ text: '', is_warning: false }) - } - const params = new URLSearchParams(isBrowser() && location.search) const codeValue = params.get('code') @@ -74,20 +66,15 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { - handleError()} + value={password} /> - + {
- +
diff --git a/src/features/pages/signup-academy-complete/password-validation.tsx b/src/features/pages/signup-academy-complete/password-validation.tsx index 83aa62fc0cc..f3e5c65abfe 100644 --- a/src/features/pages/signup-academy-complete/password-validation.tsx +++ b/src/features/pages/signup-academy-complete/password-validation.tsx @@ -1,34 +1,8 @@ -import { localize } from 'components/localization' - -export const password_regex_validate = { - password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+[{\]};:'",<.>/?]).{8,}$/, - common_password: /^(?!.*(.)\1.*\1)(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,}$/, -} - -export const validation_is_lack_number = (input, min_digit) => input.length + 1 > min_digit - -export const passwordValidation = (input) => { - if (!input) { - return { text: localize('_t_You should enter 8-25 characters._t_'), is_warning: false } - } else if (password_regex_validate.common_password.test(input)) { - return { - text: localize( - `_t_Repeats like “abcabcabc” are only slightly harder to guess than “abc”._t_`, - ), - is_warning: true, - } - } else if (!password_regex_validate.password.test(input)) { - return { - text: localize( - `_t_Password should have lower and uppercase English letters with numbers._t_`, - ), - is_warning: false, - } - } -} - -export const academy_validation = { - password: (input) => { - return passwordValidation(input) - }, +export const passwordRegex = { + hasLowerCase: /[a-z]/, + hasNumber: /\d/, + hasSymbol: /\W/, + hasUpperCase: /[A-Z]/, + isLengthValid: /^.{8,25}$/, + isPasswordValid: /^(?=.*[a-z])(?=.*\d)(?=.*[A-Z])[!-~]{8,25}$/, } From 232ab09655f7f907c519b5712e255ac5f74ab10f Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Tue, 27 Feb 2024 15:44:25 +0400 Subject: [PATCH 24/44] fix: country selection and disabling button --- src/components/elements/dropdown-search.tsx | 4 ++++ src/components/elements/dropdown.tsx | 1 + .../pages/signup-academy-complete/residence-form.tsx | 9 ++++++++- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/elements/dropdown-search.tsx b/src/components/elements/dropdown-search.tsx index 2fd3ed7d693..811e40da6a8 100644 --- a/src/components/elements/dropdown-search.tsx +++ b/src/components/elements/dropdown-search.tsx @@ -78,10 +78,12 @@ const DropdownSearch = ({ onChange, selected_item, is_alternate_style, + onClearInput, ...props }: DropdownProps) => { const [input_value, setInputValue] = useState('') const [dropdown_items, setDropdownItems] = useState([...items]) + const [has_input, setHasInput] = useState(false) const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility, setOpen] = useDropdown(onChange) @@ -99,6 +101,7 @@ const DropdownSearch = ({ const handleInputChange = (e) => { setInputValue(e.target.value) toggleListVisibility(e) + onClearInput?.() } const handleSelectItem = (option: SelectedType, handled_error: FormikErrorsType) => { @@ -115,6 +118,7 @@ const DropdownSearch = ({ const regex = new RegExp(input_value, 'gi') return !!regex.test(String(i.name)) }) + setDropdownItems(filtered_items) toggleListVisibility(e) if (e.key !== 'Escape') { diff --git a/src/components/elements/dropdown.tsx b/src/components/elements/dropdown.tsx index 0d3b9a611ae..b15a9af6b98 100644 --- a/src/components/elements/dropdown.tsx +++ b/src/components/elements/dropdown.tsx @@ -441,6 +441,7 @@ export type DropdownProps = { autocomplete?: string mb?: string is_alternate_style?: boolean + onClearInput?: () => void } & Pick const Dropdown = ({ diff --git a/src/features/pages/signup-academy-complete/residence-form.tsx b/src/features/pages/signup-academy-complete/residence-form.tsx index f7c10a263c2..0cf65eada0b 100644 --- a/src/features/pages/signup-academy-complete/residence-form.tsx +++ b/src/features/pages/signup-academy-complete/residence-form.tsx @@ -60,6 +60,7 @@ const ResidenceForm = ({ ...prevState, country: country, })) + if (is_country_disabled) { setErrors(true) } else { @@ -90,7 +91,7 @@ const ResidenceForm = ({ ), }, ] - console.log(residence_list) + return ( @@ -112,6 +113,9 @@ const ResidenceForm = ({ mb="5px" onChange={(country) => handleSelection(country)} style={{ marginTop: '16px' }} + onClearInput={() => + setSelectedValue({ ...selected_value, country: '' }) + } /> {errors && ( + setSelectedValue({ ...selected_value, citizenship: '' }) + } /> From 6dcfb673e5464c047cfa16f8a4fd44663b0c5cb1 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Tue, 27 Feb 2024 17:38:11 +0400 Subject: [PATCH 25/44] fix: redirection issue --- gatsby-node.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/gatsby-node.js b/gatsby-node.js index 9611a724f77..9d034a13778 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -203,6 +203,21 @@ const BuildPage = (page, actions) => { isPermanent: true, }) } + if (is_academy) { + console.log('academy') + createRedirect({ + fromPath: `/academy-signup/`, + toPath: `/en/academy-signup/`, + redirectInBrowser: true, + isPermanent: true, + }) + createRedirect({ + fromPath: `/academy-signup`, + toPath: `/en/academy-signup`, + redirectInBrowser: true, + isPermanent: true, + }) + } const is_english = process.env.GATSBY_LANGUAGE === 'en' @@ -374,6 +389,13 @@ const BuildPage = (page, actions) => { }) } if (is_academy) { + console.log('academy') + createRedirect({ + fromPath: `/${lang}/academy-signup/`, + toPath: `/en/academy-signup/`, + redirectInBrowser: true, + isPermanent: true, + }) createRedirect({ fromPath: `/${lang}/academy-signup`, toPath: `/en/academy-signup`, @@ -381,6 +403,7 @@ const BuildPage = (page, actions) => { isPermanent: true, }) } + return current_page }) } From ad2b109d3d6362d3df0e8ef9c5fc28dc0930d5e6 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Wed, 28 Feb 2024 10:57:28 +0400 Subject: [PATCH 26/44] fix: logo issue --- .../components/templates/navigation/academy-nav/index.tsx | 4 ++-- src/features/pages/signup-academy-complete/index.tsx | 2 +- src/features/pages/signup-academy/index.tsx | 5 ++--- src/images/common/{derivacademy.svg => deriv_academy.svg} | 0 4 files changed, 5 insertions(+), 6 deletions(-) rename src/images/common/{derivacademy.svg => deriv_academy.svg} (100%) diff --git a/src/features/components/templates/navigation/academy-nav/index.tsx b/src/features/components/templates/navigation/academy-nav/index.tsx index 5a48df6e237..0a0a09e7a27 100644 --- a/src/features/components/templates/navigation/academy-nav/index.tsx +++ b/src/features/components/templates/navigation/academy-nav/index.tsx @@ -1,9 +1,9 @@ import React from 'react' +import NavTemplate from '../template' import { static_nav_logo } from './academy-nav.module.scss' +import LogoImage from 'images/common/deriv_academy.svg' import Link from 'features/components/atoms/link' import Image from 'features/components/atoms/image' -import NavTemplate from 'features/components/templates/navigation/template' -import LogoImage from 'images/common/derivacademy.svg' const AcademyNav = () => { return ( diff --git a/src/features/pages/signup-academy-complete/index.tsx b/src/features/pages/signup-academy-complete/index.tsx index 831cd12b83b..9b8df717db3 100644 --- a/src/features/pages/signup-academy-complete/index.tsx +++ b/src/features/pages/signup-academy-complete/index.tsx @@ -3,7 +3,7 @@ import { signup_wrapper, static_nav_logo } from '../signup-academy/signup.module import Layout from 'features/components/templates/layout' import PopUpMenu from './pop-up-menu' import NavTemplate from 'features/components/templates/navigation/template' -import LogoImage from 'images/common/derivacademy.svg' +import LogoImage from 'images/common/deriv_academy.svg' import Link from 'features/components/atoms/link' import Image from 'features/components/atoms/image' diff --git a/src/features/pages/signup-academy/index.tsx b/src/features/pages/signup-academy/index.tsx index 80f749be358..681f85d8a92 100644 --- a/src/features/pages/signup-academy/index.tsx +++ b/src/features/pages/signup-academy/index.tsx @@ -1,13 +1,12 @@ import React, { useEffect } from 'react' import { Analytics } from '@deriv-com/analytics' import Layout from 'features/components/templates/layout' -import { signup_wrapper, static_nav_logo } from './signup.module.scss' +import { signup_wrapper } from './signup.module.scss' import SignUpContent from './signup.content' import SignUpFormContainer from './form-container' -import NavTemplate from 'features/components/templates/navigation/template' +import AcademyNav from 'features/components/templates/navigation/academy-nav' import Flex from 'features/components/atoms/flex-box' import { isBrowser } from 'common/utility' -import AcademyNav from 'features/components/templates/navigation/academy-nav' const SignUpAcademy = () => { const analyticsData: Parameters[1] = { diff --git a/src/images/common/derivacademy.svg b/src/images/common/deriv_academy.svg similarity index 100% rename from src/images/common/derivacademy.svg rename to src/images/common/deriv_academy.svg From 4f3725df1f5ca502cf3b7b33444fe00d0947fa37 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Wed, 28 Feb 2024 11:26:43 +0400 Subject: [PATCH 27/44] fix: translations issue --- gatsby-node.js | 31 ------------------------------- 1 file changed, 31 deletions(-) diff --git a/gatsby-node.js b/gatsby-node.js index 9d034a13778..338f542cf9f 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -50,7 +50,6 @@ const BuildPage = (page, actions) => { const who_we_are = /who-we-are/g.test(page.path) const is_cfds = /cfds/g.test(page.path) const is_options = /options/g.test(page.path) - const is_academy = /academy-signup/g.test(page.path) if (is_careers) { createRedirect({ @@ -203,21 +202,6 @@ const BuildPage = (page, actions) => { isPermanent: true, }) } - if (is_academy) { - console.log('academy') - createRedirect({ - fromPath: `/academy-signup/`, - toPath: `/en/academy-signup/`, - redirectInBrowser: true, - isPermanent: true, - }) - createRedirect({ - fromPath: `/academy-signup`, - toPath: `/en/academy-signup`, - redirectInBrowser: true, - isPermanent: true, - }) - } const is_english = process.env.GATSBY_LANGUAGE === 'en' @@ -388,21 +372,6 @@ const BuildPage = (page, actions) => { isPermanent: true, }) } - if (is_academy) { - console.log('academy') - createRedirect({ - fromPath: `/${lang}/academy-signup/`, - toPath: `/en/academy-signup/`, - redirectInBrowser: true, - isPermanent: true, - }) - createRedirect({ - fromPath: `/${lang}/academy-signup`, - toPath: `/en/academy-signup`, - redirectInBrowser: true, - isPermanent: true, - }) - } return current_page }) From e1baff68929a5175b421b5b68cb5c7519f88b798 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Wed, 28 Feb 2024 12:25:45 +0400 Subject: [PATCH 28/44] fix: logo issue --- .../templates/navigation/academy-nav/academy-nav.module.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/features/components/templates/navigation/academy-nav/academy-nav.module.scss b/src/features/components/templates/navigation/academy-nav/academy-nav.module.scss index 1cc87ce0b95..f714a6526d5 100644 --- a/src/features/components/templates/navigation/academy-nav/academy-nav.module.scss +++ b/src/features/components/templates/navigation/academy-nav/academy-nav.module.scss @@ -3,4 +3,9 @@ .static_nav_logo { inline-size: 19.9rem; block-size: 3.19rem; + + @include breakpoints(tablet) { + inline-size: 19.9rem; + block-size: 3.19rem; + } } From 1826933ac00340d713429190d107bc413f9b45e8 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Wed, 28 Feb 2024 12:50:11 +0400 Subject: [PATCH 29/44] fix: changed the logo --- .../components/templates/navigation/academy-nav/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/components/templates/navigation/academy-nav/index.tsx b/src/features/components/templates/navigation/academy-nav/index.tsx index 0a0a09e7a27..6300360eba9 100644 --- a/src/features/components/templates/navigation/academy-nav/index.tsx +++ b/src/features/components/templates/navigation/academy-nav/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import NavTemplate from '../template' import { static_nav_logo } from './academy-nav.module.scss' -import LogoImage from 'images/common/deriv_academy.svg' +import LogoImage from 'images/common/rebranding_logo.svg' import Link from 'features/components/atoms/link' import Image from 'features/components/atoms/image' From 1b50c27724ad9d8a3aabd77fa84d73d91de994dc Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Wed, 28 Feb 2024 15:27:18 +0400 Subject: [PATCH 30/44] fix: minimized the logo size --- crowdin/messages.json | 1 + .../components/templates/navigation/academy-nav/index.tsx | 2 +- src/features/pages/signup-academy/form-container/index.tsx | 2 +- .../pages/signup-academy/form-container/signup-page-form.tsx | 4 ++-- src/features/pages/signup-academy/signup.module.scss | 3 +++ src/images/common/academy.svg | 1 + 6 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 src/images/common/academy.svg diff --git a/crowdin/messages.json b/crowdin/messages.json index e99d91fafe0..7f539e463c1 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -3408,6 +3408,7 @@ "-2040322967": "Citizenship", "-1541554430": "Next", "-1770179687": "By clicking “Create account”, you confirm that you are 18 or older. You understand that we may use your email address to send you information about Deriv products and services as well as market news. You can always unsubscribe from these emails in your account settings. For more information, please take a look at Deriv’s <0>Security and privacy policy.", + "-577530018": "Already have a Deriv account?? <0>Log in", "-417711545": "Create account", "-1264882776": "Your go-to platform for exclusive trading courses", "-609665275": "Gain access to comprehensive modules on forex, Deriv MT5, and more.", diff --git a/src/features/components/templates/navigation/academy-nav/index.tsx b/src/features/components/templates/navigation/academy-nav/index.tsx index 6300360eba9..679246f3dd9 100644 --- a/src/features/components/templates/navigation/academy-nav/index.tsx +++ b/src/features/components/templates/navigation/academy-nav/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import NavTemplate from '../template' import { static_nav_logo } from './academy-nav.module.scss' -import LogoImage from 'images/common/rebranding_logo.svg' +import LogoImage from 'images/common/academy.svg' import Link from 'features/components/atoms/link' import Image from 'features/components/atoms/image' diff --git a/src/features/pages/signup-academy/form-container/index.tsx b/src/features/pages/signup-academy/form-container/index.tsx index b91513f75e6..a9392e89c35 100644 --- a/src/features/pages/signup-academy/form-container/index.tsx +++ b/src/features/pages/signup-academy/form-container/index.tsx @@ -65,7 +65,7 @@ const SignUpFormContainer = () => { { /> - + diff --git a/src/features/pages/signup-academy/signup.module.scss b/src/features/pages/signup-academy/signup.module.scss index 5225cf288e2..8debe43db84 100644 --- a/src/features/pages/signup-academy/signup.module.scss +++ b/src/features/pages/signup-academy/signup.module.scss @@ -49,3 +49,6 @@ .signup_content { max-width: 44rem; } +.btn_signup { + text-align: center; +} diff --git a/src/images/common/academy.svg b/src/images/common/academy.svg new file mode 100644 index 00000000000..dede7096f03 --- /dev/null +++ b/src/images/common/academy.svg @@ -0,0 +1 @@ + \ No newline at end of file From 2009c0bdbda299e0233af33a691a613f94fa5ca7 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Thu, 29 Feb 2024 09:40:08 +0400 Subject: [PATCH 31/44] fix: dropdown issues --- src/components/elements/dropdown-search.tsx | 5 ++--- src/components/elements/dropdown.tsx | 3 +++ .../pages/signup-academy-complete/residence-form.tsx | 12 ++++++++++-- 3 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/elements/dropdown-search.tsx b/src/components/elements/dropdown-search.tsx index 811e40da6a8..c16a768b41a 100644 --- a/src/components/elements/dropdown-search.tsx +++ b/src/components/elements/dropdown-search.tsx @@ -61,10 +61,10 @@ const DropdownInput = styled.input` !props.is_alternate_style && css` @media ${device.tabletL} { - font-size: 1.75rem; + font-size: 1.4rem; } @media ${device.mobileL} { - font-size: 1.5rem; + font-size: 1.4rem; } `} ` @@ -153,7 +153,6 @@ const DropdownSearch = ({ value={input_value} is_active={is_open} is_alternate_style={is_alternate_style} - placeholder={label} /> diff --git a/src/components/elements/dropdown.tsx b/src/components/elements/dropdown.tsx index b15a9af6b98..341a5b04f81 100644 --- a/src/components/elements/dropdown.tsx +++ b/src/components/elements/dropdown.tsx @@ -286,6 +286,7 @@ export const StyledLabel = styled.label` transition: 0.25s ease transform; transform: translateZ(0); padding: 0 0.8rem; + margin-top: 3px; ${(props) => !props.is_alternate_style && @@ -293,10 +294,12 @@ export const StyledLabel = styled.label` @media ${device.tabletL} { font-size: 1.65rem; top: 1.4rem; + margin-top: 0px; } @media ${device.mobileL} { font-size: 1.5rem; top: 1.6rem; + margin-top: 0px; } `} diff --git a/src/features/pages/signup-academy-complete/residence-form.tsx b/src/features/pages/signup-academy-complete/residence-form.tsx index 0cf65eada0b..8c3531c7eb8 100644 --- a/src/features/pages/signup-academy-complete/residence-form.tsx +++ b/src/features/pages/signup-academy-complete/residence-form.tsx @@ -127,7 +127,11 @@ const ResidenceForm = ({ )} {!errors && ( - + )} @@ -154,7 +158,11 @@ const ResidenceForm = ({ setSelectedValue({ ...selected_value, citizenship: '' }) } /> - + From 2f71676fb7150620b29f528c8ebb84ff7b235022 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Thu, 29 Feb 2024 11:19:47 +0400 Subject: [PATCH 32/44] fix: sonar cloud issues --- src/common/websocket/config.ts | 85 +++++++++++++++++++++++++--------- 1 file changed, 64 insertions(+), 21 deletions(-) diff --git a/src/common/websocket/config.ts b/src/common/websocket/config.ts index 92dc95cda3c..74358d77655 100644 --- a/src/common/websocket/config.ts +++ b/src/common/websocket/config.ts @@ -71,46 +71,89 @@ const isLive = () => isProduction() || isStaging() || isBeta() const isLocalHost = () => isBrowser() && domain_config.local.hostname === window.location.hostname const url = isBrowser() && window.location.href const is_academy = isBrowser() && url.includes('academy') + +// const getAppId = (): null | number | string => { +// let app_id = null +// const user_app_id = '' // you can insert Application ID of your registered application here +// const url_app_id = window.sessionStorage.getItem('app_id') +// const config_app_id = window.localStorage.getItem('config.app_id') + +// if (isBrowser()) { +// const url_params = new URLSearchParams(window.location.search || '') +// const url_param_app_id = url_params.get('app_id') +// if (url_param_app_id) { +// window.sessionStorage.setItem('app_id', url_param_app_id) +// } + +// if (is_academy) { +// app_id = 37228 +// } else { +// if (url_app_id) { +// app_id = url_app_id +// } else if (config_app_id) { +// app_id = config_app_id +// } else if (isStaging()) { +// window.localStorage.removeItem('config.default_app_id') +// app_id = domain_config.staging.app_id +// } else if (isBeta()) { +// window.localStorage.removeItem('config.default_app_id') +// app_id = domain_config.beta.app_id +// } else if (user_app_id.length) { +// window.localStorage.setItem('config.default_app_id', user_app_id) // it's being used in endpoint chrome extension - please do not remove +// app_id = user_app_id +// } else if (isLocalHost()) { +// app_id = domain_config.local.app_id +// } else { +// window.localStorage.removeItem('config.default_app_id') +// app_id = isProduction() ? prod_app_id : domain_config.test.app_id +// } +// } +// } +// return app_id +// } const getAppId = (): null | number | string => { let app_id = null const user_app_id = '' // you can insert Application ID of your registered application here + if (isBrowser()) { const url_params = new URLSearchParams(window.location.search || '') const url_param_app_id = url_params.get('app_id') + let storage_app_id = null + if (url_param_app_id) { window.sessionStorage.setItem('app_id', url_param_app_id) + storage_app_id = url_param_app_id + } else { + storage_app_id = window.sessionStorage.getItem('app_id') } - const url_app_id = window.sessionStorage.getItem('app_id') const config_app_id = window.localStorage.getItem('config.app_id') if (is_academy) { app_id = 37228 + } else if (storage_app_id) { + app_id = storage_app_id + } else if (config_app_id) { + app_id = config_app_id + } else if (isStaging()) { + window.localStorage.removeItem('config.default_app_id') + app_id = domain_config.staging.app_id + } else if (isBeta()) { + window.localStorage.removeItem('config.default_app_id') + app_id = domain_config.beta.app_id + } else if (user_app_id.length) { + window.localStorage.setItem('config.default_app_id', user_app_id) + app_id = user_app_id + } else if (isLocalHost()) { + app_id = domain_config.local.app_id } else { - if (url_app_id) { - app_id = url_app_id - } else if (config_app_id) { - app_id = config_app_id - } else if (isStaging()) { - window.localStorage.removeItem('config.default_app_id') - app_id = domain_config.staging.app_id - } else if (isBeta()) { - window.localStorage.removeItem('config.default_app_id') - app_id = domain_config.beta.app_id - } else if (user_app_id.length) { - window.localStorage.setItem('config.default_app_id', user_app_id) // it's being used in endpoint chrome extension - please do not remove - app_id = user_app_id - } else if (isLocalHost()) { - app_id = domain_config.local.app_id - } else { - window.localStorage.removeItem('config.default_app_id') - app_id = isProduction() ? prod_app_id : domain_config.test.app_id - } + window.localStorage.removeItem('config.default_app_id') + app_id = isProduction() ? prod_app_id : domain_config.test.app_id } } + return app_id } - const getSocketURL = () => { let server_url From 280638d941727180848386c240951668381c725a Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Thu, 29 Feb 2024 15:10:09 +0400 Subject: [PATCH 33/44] fix: issues in the design --- crowdin/messages.json | 2 +- src/common/websocket/config.ts | 85 +++++-------------- .../signup-academy-complete/password-form.tsx | 19 ++++- .../residence-form.tsx | 18 ++-- .../signup-academy.module.scss | 4 +- .../signup-academy/form-container/index.tsx | 2 +- 6 files changed, 51 insertions(+), 79 deletions(-) diff --git a/crowdin/messages.json b/crowdin/messages.json index 7f539e463c1..7ad018fd9b1 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -198,6 +198,7 @@ "201096446": "UNG.US", "202712649": "Fast and secure deposit and withdrawal options", "203271702": "Try again", + "203346919": "Already have a Deriv account? <0>Log in", "205183907": "What can I do when I find any unrecognised transactions on my Deriv cashier account?", "209516313": "The MT5 trading signals service allows you to copy the trades of more experienced traders to your MT5 account. Once you’ve subscribed to a signal, the provider’s deals will be automatically replicated on your Deriv MT5 trading account each time they place a trade.", "209799068": "A contract for difference (CFD) allows you to trade on the price movement of an asset, without buying the underlying asset.", @@ -3408,7 +3409,6 @@ "-2040322967": "Citizenship", "-1541554430": "Next", "-1770179687": "By clicking “Create account”, you confirm that you are 18 or older. You understand that we may use your email address to send you information about Deriv products and services as well as market news. You can always unsubscribe from these emails in your account settings. For more information, please take a look at Deriv’s <0>Security and privacy policy.", - "-577530018": "Already have a Deriv account?? <0>Log in", "-417711545": "Create account", "-1264882776": "Your go-to platform for exclusive trading courses", "-609665275": "Gain access to comprehensive modules on forex, Deriv MT5, and more.", diff --git a/src/common/websocket/config.ts b/src/common/websocket/config.ts index 74358d77655..92dc95cda3c 100644 --- a/src/common/websocket/config.ts +++ b/src/common/websocket/config.ts @@ -71,89 +71,46 @@ const isLive = () => isProduction() || isStaging() || isBeta() const isLocalHost = () => isBrowser() && domain_config.local.hostname === window.location.hostname const url = isBrowser() && window.location.href const is_academy = isBrowser() && url.includes('academy') - -// const getAppId = (): null | number | string => { -// let app_id = null -// const user_app_id = '' // you can insert Application ID of your registered application here -// const url_app_id = window.sessionStorage.getItem('app_id') -// const config_app_id = window.localStorage.getItem('config.app_id') - -// if (isBrowser()) { -// const url_params = new URLSearchParams(window.location.search || '') -// const url_param_app_id = url_params.get('app_id') -// if (url_param_app_id) { -// window.sessionStorage.setItem('app_id', url_param_app_id) -// } - -// if (is_academy) { -// app_id = 37228 -// } else { -// if (url_app_id) { -// app_id = url_app_id -// } else if (config_app_id) { -// app_id = config_app_id -// } else if (isStaging()) { -// window.localStorage.removeItem('config.default_app_id') -// app_id = domain_config.staging.app_id -// } else if (isBeta()) { -// window.localStorage.removeItem('config.default_app_id') -// app_id = domain_config.beta.app_id -// } else if (user_app_id.length) { -// window.localStorage.setItem('config.default_app_id', user_app_id) // it's being used in endpoint chrome extension - please do not remove -// app_id = user_app_id -// } else if (isLocalHost()) { -// app_id = domain_config.local.app_id -// } else { -// window.localStorage.removeItem('config.default_app_id') -// app_id = isProduction() ? prod_app_id : domain_config.test.app_id -// } -// } -// } -// return app_id -// } const getAppId = (): null | number | string => { let app_id = null const user_app_id = '' // you can insert Application ID of your registered application here - if (isBrowser()) { const url_params = new URLSearchParams(window.location.search || '') const url_param_app_id = url_params.get('app_id') - let storage_app_id = null - if (url_param_app_id) { window.sessionStorage.setItem('app_id', url_param_app_id) - storage_app_id = url_param_app_id - } else { - storage_app_id = window.sessionStorage.getItem('app_id') } + const url_app_id = window.sessionStorage.getItem('app_id') const config_app_id = window.localStorage.getItem('config.app_id') if (is_academy) { app_id = 37228 - } else if (storage_app_id) { - app_id = storage_app_id - } else if (config_app_id) { - app_id = config_app_id - } else if (isStaging()) { - window.localStorage.removeItem('config.default_app_id') - app_id = domain_config.staging.app_id - } else if (isBeta()) { - window.localStorage.removeItem('config.default_app_id') - app_id = domain_config.beta.app_id - } else if (user_app_id.length) { - window.localStorage.setItem('config.default_app_id', user_app_id) - app_id = user_app_id - } else if (isLocalHost()) { - app_id = domain_config.local.app_id } else { - window.localStorage.removeItem('config.default_app_id') - app_id = isProduction() ? prod_app_id : domain_config.test.app_id + if (url_app_id) { + app_id = url_app_id + } else if (config_app_id) { + app_id = config_app_id + } else if (isStaging()) { + window.localStorage.removeItem('config.default_app_id') + app_id = domain_config.staging.app_id + } else if (isBeta()) { + window.localStorage.removeItem('config.default_app_id') + app_id = domain_config.beta.app_id + } else if (user_app_id.length) { + window.localStorage.setItem('config.default_app_id', user_app_id) // it's being used in endpoint chrome extension - please do not remove + app_id = user_app_id + } else if (isLocalHost()) { + app_id = domain_config.local.app_id + } else { + window.localStorage.removeItem('config.default_app_id') + app_id = isProduction() ? prod_app_id : domain_config.test.app_id + } } } - return app_id } + const getSocketURL = () => { let server_url diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/signup-academy-complete/password-form.tsx index a8e64aa6896..2f8dd8887fb 100644 --- a/src/features/pages/signup-academy-complete/password-form.tsx +++ b/src/features/pages/signup-academy-complete/password-form.tsx @@ -9,6 +9,7 @@ import Typography from 'features/components/atoms/typography' import { Localize, localize } from 'components/localization' import { Button } from 'components/form' import apiManager from 'common/websocket' +import device from 'themes/device' type AcademyPasswordFormProps = { residence: string @@ -20,6 +21,12 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { const GoTrading = styled(Button)` border-radius: 4px; + font-family: 'Ubuntu'; + text-align: center; + + @media ${device.tabletL} { + width: 100%; + } ` const validPassword = (value: string) => passwordRegex.isPasswordValid.test(value) @@ -60,8 +67,8 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { } return ( - - + + @@ -74,7 +81,13 @@ const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { value={password} /> - + + @@ -130,7 +132,7 @@ const ResidenceForm = ({ @@ -161,7 +163,7 @@ const ResidenceForm = ({ diff --git a/src/features/pages/signup-academy-complete/signup-academy.module.scss b/src/features/pages/signup-academy-complete/signup-academy.module.scss index a45d6535046..324cc1b67bd 100644 --- a/src/features/pages/signup-academy-complete/signup-academy.module.scss +++ b/src/features/pages/signup-academy-complete/signup-academy.module.scss @@ -4,12 +4,12 @@ .next_btn { display: flex; justify-content: flex-end; - padding-block: 2.4rem; + padding-top: 1.6rem; } .trading_btn { display: flex; - justify-content: center; + padding-top: 1.6rem; @include breakpoints(tablet) { justify-content: flex-end; padding-top: 2.4rem; diff --git a/src/features/pages/signup-academy/form-container/index.tsx b/src/features/pages/signup-academy/form-container/index.tsx index a9392e89c35..55c2cce328a 100644 --- a/src/features/pages/signup-academy/form-container/index.tsx +++ b/src/features/pages/signup-academy/form-container/index.tsx @@ -65,7 +65,7 @@ const SignUpFormContainer = () => { Date: Thu, 29 Feb 2024 16:42:20 +0400 Subject: [PATCH 34/44] fix: dropdown is reverted to old one --- src/components/elements/dropdown-search.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/elements/dropdown-search.tsx b/src/components/elements/dropdown-search.tsx index c16a768b41a..b7b00741c84 100644 --- a/src/components/elements/dropdown-search.tsx +++ b/src/components/elements/dropdown-search.tsx @@ -61,10 +61,10 @@ const DropdownInput = styled.input` !props.is_alternate_style && css` @media ${device.tabletL} { - font-size: 1.4rem; + font-size: 1.75rem; } @media ${device.mobileL} { - font-size: 1.4rem; + font-size: 1.5rem; } `} ` @@ -83,7 +83,6 @@ const DropdownSearch = ({ }: DropdownProps) => { const [input_value, setInputValue] = useState('') const [dropdown_items, setDropdownItems] = useState([...items]) - const [has_input, setHasInput] = useState(false) const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility, setOpen] = useDropdown(onChange) @@ -118,7 +117,6 @@ const DropdownSearch = ({ const regex = new RegExp(input_value, 'gi') return !!regex.test(String(i.name)) }) - setDropdownItems(filtered_items) toggleListVisibility(e) if (e.key !== 'Escape') { @@ -153,6 +151,7 @@ const DropdownSearch = ({ value={input_value} is_active={is_open} is_alternate_style={is_alternate_style} + placeholder={label} /> From 228b74a7e2ba79965a40fb4b658aca140e03fa3f Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Fri, 1 Mar 2024 12:04:21 +0400 Subject: [PATCH 35/44] fix: dropdown issues --- crowdin/messages.json | 1 + src/components/elements/dropdown-search.tsx | 5 ++++- src/components/elements/dropdown.tsx | 1 + src/pages/signup-affiliates/components/_account-address.tsx | 1 + .../trader-tools/margin-calculator/_margin-calculator.tsx | 1 + 5 files changed, 8 insertions(+), 1 deletion(-) diff --git a/crowdin/messages.json b/crowdin/messages.json index 7ad018fd9b1..158a107478f 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -4315,6 +4315,7 @@ "-136976514": "Country of residence*", "-1474274516": "State/province*", "-1253349870": "Town/city*", + "-597462351": "${item.label}", "-1120954663": "First name*", "-1929304521": "Website/social media URL*", "-1113902570": "Details", diff --git a/src/components/elements/dropdown-search.tsx b/src/components/elements/dropdown-search.tsx index b7b00741c84..31e82a480ba 100644 --- a/src/components/elements/dropdown-search.tsx +++ b/src/components/elements/dropdown-search.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useState } from 'react' import styled, { css } from 'styled-components' +import { Placeholder } from 'gatsby-plugin-image' import { Arrow, BottomLabel, @@ -41,6 +42,7 @@ const DropdownInput = styled.input` display: flex; align-items: center; justify-content: flex-start; + ${(props) => props.has_short_name && css` @@ -79,6 +81,7 @@ const DropdownSearch = ({ selected_item, is_alternate_style, onClearInput, + placeholder, ...props }: DropdownProps) => { const [input_value, setInputValue] = useState('') @@ -151,7 +154,7 @@ const DropdownSearch = ({ value={input_value} is_active={is_open} is_alternate_style={is_alternate_style} - placeholder={label} + placeholder={placeholder} /> diff --git a/src/components/elements/dropdown.tsx b/src/components/elements/dropdown.tsx index 341a5b04f81..f673dd7d5ad 100644 --- a/src/components/elements/dropdown.tsx +++ b/src/components/elements/dropdown.tsx @@ -442,6 +442,7 @@ export type DropdownProps = { value?: string disabled?: boolean autocomplete?: string + placeholder?: string mb?: string is_alternate_style?: boolean onClearInput?: () => void diff --git a/src/pages/signup-affiliates/components/_account-address.tsx b/src/pages/signup-affiliates/components/_account-address.tsx index e1006d63c5f..8a001318e63 100644 --- a/src/pages/signup-affiliates/components/_account-address.tsx +++ b/src/pages/signup-affiliates/components/_account-address.tsx @@ -146,6 +146,7 @@ const AccountAddress = ({ error={form_errors[`${item.name}_error_msg`]} onChange={item.handler} style={{ marginTop: '16px' }} + placeholder={localize(`_t_${item.label}_t_`)} /> ) } else { diff --git a/src/pages/trader-tools/margin-calculator/_margin-calculator.tsx b/src/pages/trader-tools/margin-calculator/_margin-calculator.tsx index 0bda3a03222..4c795516fba 100644 --- a/src/pages/trader-tools/margin-calculator/_margin-calculator.tsx +++ b/src/pages/trader-tools/margin-calculator/_margin-calculator.tsx @@ -229,6 +229,7 @@ const MarginCalculator = () => { selected_item={values.symbol} onBlur={handleBlur} disabled={is_loading} + placeholder={localize('_t_Symbol_t_')} /> Date: Fri, 1 Mar 2024 12:22:17 +0400 Subject: [PATCH 36/44] fix: removed the button width for residence page --- src/features/pages/signup-academy-complete/residence-form.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/pages/signup-academy-complete/residence-form.tsx b/src/features/pages/signup-academy-complete/residence-form.tsx index 61d0c1cd30b..3f2e19cc892 100644 --- a/src/features/pages/signup-academy-complete/residence-form.tsx +++ b/src/features/pages/signup-academy-complete/residence-form.tsx @@ -23,7 +23,7 @@ export const NextButton = styled(Button)` font-family: 'Ubuntu'; text-align: center; height: 40px; - width: 65px; + @media ${device.tablet} { width: 100%; } From 068a99f30dca4a656a55c0bc7c70d16bf30e41cd Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Fri, 1 Mar 2024 15:47:27 +0400 Subject: [PATCH 37/44] fix: focus blur --- src/components/elements/dropdown-search.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/elements/dropdown-search.tsx b/src/components/elements/dropdown-search.tsx index 31e82a480ba..ddc12fcd8f8 100644 --- a/src/components/elements/dropdown-search.tsx +++ b/src/components/elements/dropdown-search.tsx @@ -1,6 +1,5 @@ -import React, { useEffect, useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import styled, { css } from 'styled-components' -import { Placeholder } from 'gatsby-plugin-image' import { Arrow, BottomLabel, @@ -86,8 +85,13 @@ const DropdownSearch = ({ }: DropdownProps) => { const [input_value, setInputValue] = useState('') const [dropdown_items, setDropdownItems] = useState([...items]) - const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility, setOpen] = + const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility, setOpen, closeFocus] = useDropdown(onChange) + const inputRef = useRef(null) + + useEffect(() => { + !is_open && inputRef.current.blur() + }, [is_open]) // Auto select default value useEffect(() => { @@ -144,6 +148,7 @@ const DropdownSearch = ({ Date: Mon, 4 Mar 2024 09:01:21 +0400 Subject: [PATCH 38/44] fix: added the dropdown search changes --- src/components/elements/dropdown-search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/elements/dropdown-search.tsx b/src/components/elements/dropdown-search.tsx index ddc12fcd8f8..7caa848e3cb 100644 --- a/src/components/elements/dropdown-search.tsx +++ b/src/components/elements/dropdown-search.tsx @@ -85,7 +85,7 @@ const DropdownSearch = ({ }: DropdownProps) => { const [input_value, setInputValue] = useState('') const [dropdown_items, setDropdownItems] = useState([...items]) - const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility, setOpen, closeFocus] = + const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility, setOpen] = useDropdown(onChange) const inputRef = useRef(null) From e2065bc8cefb5ae9077007210c188e76837208ae Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Mon, 4 Mar 2024 12:34:33 +0400 Subject: [PATCH 39/44] fix: changed the css file --- src/features/pages/signup-academy-complete/index.tsx | 2 +- src/features/pages/signup-academy-complete/password-form.tsx | 2 +- src/features/pages/signup-academy-complete/residence-form.tsx | 2 +- ...-academy.module.scss => signup-academy-complete.module.scss} | 0 src/features/pages/signup-academy/form-container/index.tsx | 2 +- .../pages/signup-academy/form-container/signup-page-form.tsx | 2 +- src/features/pages/signup-academy/index.tsx | 2 +- .../{signup.module.scss => signup-academy.module.scss} | 0 src/features/pages/signup-academy/signup.content.tsx | 2 +- 9 files changed, 7 insertions(+), 7 deletions(-) rename src/features/pages/signup-academy-complete/{signup-academy.module.scss => signup-academy-complete.module.scss} (100%) rename src/features/pages/signup-academy/{signup.module.scss => signup-academy.module.scss} (100%) diff --git a/src/features/pages/signup-academy-complete/index.tsx b/src/features/pages/signup-academy-complete/index.tsx index 9b8df717db3..08615a75552 100644 --- a/src/features/pages/signup-academy-complete/index.tsx +++ b/src/features/pages/signup-academy-complete/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { signup_wrapper, static_nav_logo } from '../signup-academy/signup.module.scss' +import { signup_wrapper, static_nav_logo } from '../signup-academy/signup-academy.module.scss' import Layout from 'features/components/templates/layout' import PopUpMenu from './pop-up-menu' import NavTemplate from 'features/components/templates/navigation/template' diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/signup-academy-complete/password-form.tsx index 2f8dd8887fb..226b31d6363 100644 --- a/src/features/pages/signup-academy-complete/password-form.tsx +++ b/src/features/pages/signup-academy-complete/password-form.tsx @@ -1,7 +1,7 @@ import React, { useState, useCallback } from 'react' import styled from 'styled-components' import { PasswordInput } from '@deriv-com/ui' -import { trading_btn, signup_form_line } from './signup-academy.module.scss' +import { trading_btn, signup_form_line } from './signup-academy-complete.module.scss' import { passwordRegex } from './password-validation' import { isBrowser } from 'common/utility' import Flex from 'features/components/atoms/flex-box' diff --git a/src/features/pages/signup-academy-complete/residence-form.tsx b/src/features/pages/signup-academy-complete/residence-form.tsx index 3f2e19cc892..97b2dedcb11 100644 --- a/src/features/pages/signup-academy-complete/residence-form.tsx +++ b/src/features/pages/signup-academy-complete/residence-form.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' import styled from 'styled-components' -import { next_btn } from './signup-academy.module.scss' +import { next_btn } from './signup-academy-complete.module.scss' import { DropdownSearch } from 'components/elements' import device from 'themes/device' import { localize, Localize } from 'components/localization' diff --git a/src/features/pages/signup-academy-complete/signup-academy.module.scss b/src/features/pages/signup-academy-complete/signup-academy-complete.module.scss similarity index 100% rename from src/features/pages/signup-academy-complete/signup-academy.module.scss rename to src/features/pages/signup-academy-complete/signup-academy-complete.module.scss diff --git a/src/features/pages/signup-academy/form-container/index.tsx b/src/features/pages/signup-academy/form-container/index.tsx index 55c2cce328a..8b7870b2146 100644 --- a/src/features/pages/signup-academy/form-container/index.tsx +++ b/src/features/pages/signup-academy/form-container/index.tsx @@ -6,7 +6,7 @@ import { sign_up_header, sign_up_content, signup_login_redirect, -} from '../signup.module.scss' +} from '../signup-academy.module.scss' import SignUpPageForm from './signup-page-form' import Flex from 'features/components/atoms/flex-box' import Typography from 'features/components/atoms/typography' diff --git a/src/features/pages/signup-academy/form-container/signup-page-form.tsx b/src/features/pages/signup-academy/form-container/signup-page-form.tsx index dcba2755e57..edc1dd493e4 100644 --- a/src/features/pages/signup-academy/form-container/signup-page-form.tsx +++ b/src/features/pages/signup-academy/form-container/signup-page-form.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { link_text, btn_signup } from '../signup.module.scss' +import { link_text, btn_signup } from '../signup-academy.module.scss' import Flex from 'features/components/atoms/flex-box' import { TString } from 'types/generics' import Button from 'features/components/atoms/button' diff --git a/src/features/pages/signup-academy/index.tsx b/src/features/pages/signup-academy/index.tsx index 681f85d8a92..f64e1c80ce7 100644 --- a/src/features/pages/signup-academy/index.tsx +++ b/src/features/pages/signup-academy/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react' import { Analytics } from '@deriv-com/analytics' import Layout from 'features/components/templates/layout' -import { signup_wrapper } from './signup.module.scss' +import { signup_wrapper } from './signup-academy.module.scss' import SignUpContent from './signup.content' import SignUpFormContainer from './form-container' import AcademyNav from 'features/components/templates/navigation/academy-nav' diff --git a/src/features/pages/signup-academy/signup.module.scss b/src/features/pages/signup-academy/signup-academy.module.scss similarity index 100% rename from src/features/pages/signup-academy/signup.module.scss rename to src/features/pages/signup-academy/signup-academy.module.scss diff --git a/src/features/pages/signup-academy/signup.content.tsx b/src/features/pages/signup-academy/signup.content.tsx index 4494d1b7841..347f8a9939b 100644 --- a/src/features/pages/signup-academy/signup.content.tsx +++ b/src/features/pages/signup-academy/signup.content.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { signup_content } from './signup.module.scss' +import { signup_content } from './signup-academy.module.scss' import Flex from 'features/components/atoms/flex-box' import Typography from 'features/components/atoms/typography' import { Localize } from 'components/localization' From 2fc70816bb3fe6c09cafdb558869651087b2cb2a Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Mon, 4 Mar 2024 13:41:10 +0400 Subject: [PATCH 40/44] fix: renamed the css file --- crowdin/messages.json | 18 +++++++-------- .../index.tsx | 4 ++-- .../password-form.tsx | 0 .../password-validation.tsx | 0 .../pop-up-menu.tsx | 0 .../residence-form.tsx | 0 .../signup-academy-complete.module.scss | 9 ++++++++ .../form-container/index.tsx | 16 ++++++------- .../form-container/signup-page-form.tsx | 0 .../index.tsx | 4 ++-- .../signup-academy.module.scss | 23 +++++++------------ .../signup.content.tsx | 6 ++--- src/pages/academy-complete-signup/index.tsx | 2 +- src/pages/academy-signup/index.tsx | 2 +- 14 files changed, 43 insertions(+), 41 deletions(-) rename src/features/pages/{signup-academy-complete => academy-complete}/index.tsx (81%) rename src/features/pages/{signup-academy-complete => academy-complete}/password-form.tsx (100%) rename src/features/pages/{signup-academy-complete => academy-complete}/password-validation.tsx (100%) rename src/features/pages/{signup-academy-complete => academy-complete}/pop-up-menu.tsx (100%) rename src/features/pages/{signup-academy-complete => academy-complete}/residence-form.tsx (100%) rename src/features/pages/{signup-academy-complete => academy-complete}/signup-academy-complete.module.scss (80%) rename src/features/pages/{signup-academy => academy-signup}/form-container/index.tsx (92%) rename src/features/pages/{signup-academy => academy-signup}/form-container/signup-page-form.tsx (100%) rename src/features/pages/{signup-academy => academy-signup}/index.tsx (92%) rename src/features/pages/{signup-academy => academy-signup}/signup-academy.module.scss (70%) rename src/features/pages/{signup-academy => academy-signup}/signup.content.tsx (83%) diff --git a/crowdin/messages.json b/crowdin/messages.json index 55b63657ae2..0df5037c158 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -3181,6 +3181,15 @@ "-115645240": "Please enter your mobile number.", "-381962759": "Please enter a valid email address.", "-1232661871": "Verification code is requried", + "-71049153": "Keep your account secure with a password", + "-981015173": "Go to Deriv Academy", + "-1193651304": "Country of residence", + "-2040322967": "Citizenship", + "-1541554430": "Next", + "-1770179687": "By clicking “Create account”, you confirm that you are 18 or older. You understand that we may use your email address to send you information about Deriv products and services as well as market news. You can always unsubscribe from these emails in your account settings. For more information, please take a look at Deriv’s <0>Security and privacy policy.", + "-417711545": "Create account", + "-1264882776": "Your go-to platform for exclusive trading courses", + "-609665275": "Gain access to comprehensive modules on forex, Deriv MT5, and more.", "-142727028": "The email is in your spam folder (sometimes things get lost there).", "-276906320": "If you don't see an email from us within a few minutes, a few things could have happened:", "-1878043830": "Re-enter your email and try again", @@ -3414,15 +3423,6 @@ "-955173076": "We provide clear, accessible information about our platforms and processes so we can build trust and strong client relationships. Through detailed product descriptions and open communication, we aim to make it easier for you to make informed trading decisions.", "-2032112598": "Be responsible", "-35673135": "We build our services and platforms on a foundation of trust, honesty, and ethical practices. By proactively implementing policies and controls to prevent unlawful activities, we ensure a fair and secure environment for our trading community.", - "-71049153": "Keep your account secure with a password", - "-981015173": "Go to Deriv Academy", - "-1193651304": "Country of residence", - "-2040322967": "Citizenship", - "-1541554430": "Next", - "-1770179687": "By clicking “Create account”, you confirm that you are 18 or older. You understand that we may use your email address to send you information about Deriv products and services as well as market news. You can always unsubscribe from these emails in your account settings. For more information, please take a look at Deriv’s <0>Security and privacy policy.", - "-417711545": "Create account", - "-1264882776": "Your go-to platform for exclusive trading courses", - "-609665275": "Gain access to comprehensive modules on forex, Deriv MT5, and more.", "-2125275828": "Unique trade types. Hundreds of instruments. Financial and derived markets.", "-154889447": "Ready to join over 2.5 million traders who have chosen Deriv as their trusted broker? Enter your email address to create a free demo account.", "-1957784093": "Easy And Free Sign Up | Online Trading | Deriv.com", diff --git a/src/features/pages/signup-academy-complete/index.tsx b/src/features/pages/academy-complete/index.tsx similarity index 81% rename from src/features/pages/signup-academy-complete/index.tsx rename to src/features/pages/academy-complete/index.tsx index 08615a75552..4f0469b328c 100644 --- a/src/features/pages/signup-academy-complete/index.tsx +++ b/src/features/pages/academy-complete/index.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { signup_wrapper, static_nav_logo } from '../signup-academy/signup-academy.module.scss' import Layout from 'features/components/templates/layout' +import { nav_logo } from './signup-academy-complete.module.scss' import PopUpMenu from './pop-up-menu' import NavTemplate from 'features/components/templates/navigation/template' import LogoImage from 'images/common/deriv_academy.svg' @@ -15,7 +15,7 @@ const SignupCompleteAcademy = () => { has_centered_logo renderLogo={() => ( - + )} /> diff --git a/src/features/pages/signup-academy-complete/password-form.tsx b/src/features/pages/academy-complete/password-form.tsx similarity index 100% rename from src/features/pages/signup-academy-complete/password-form.tsx rename to src/features/pages/academy-complete/password-form.tsx diff --git a/src/features/pages/signup-academy-complete/password-validation.tsx b/src/features/pages/academy-complete/password-validation.tsx similarity index 100% rename from src/features/pages/signup-academy-complete/password-validation.tsx rename to src/features/pages/academy-complete/password-validation.tsx diff --git a/src/features/pages/signup-academy-complete/pop-up-menu.tsx b/src/features/pages/academy-complete/pop-up-menu.tsx similarity index 100% rename from src/features/pages/signup-academy-complete/pop-up-menu.tsx rename to src/features/pages/academy-complete/pop-up-menu.tsx diff --git a/src/features/pages/signup-academy-complete/residence-form.tsx b/src/features/pages/academy-complete/residence-form.tsx similarity index 100% rename from src/features/pages/signup-academy-complete/residence-form.tsx rename to src/features/pages/academy-complete/residence-form.tsx diff --git a/src/features/pages/signup-academy-complete/signup-academy-complete.module.scss b/src/features/pages/academy-complete/signup-academy-complete.module.scss similarity index 80% rename from src/features/pages/signup-academy-complete/signup-academy-complete.module.scss rename to src/features/pages/academy-complete/signup-academy-complete.module.scss index 324cc1b67bd..d70eb7266fc 100644 --- a/src/features/pages/signup-academy-complete/signup-academy-complete.module.scss +++ b/src/features/pages/academy-complete/signup-academy-complete.module.scss @@ -1,6 +1,15 @@ @use 'features/styles/theme/theme-mixins' as *; @import 'features/styles/theme/variables'; +.wrapper { + min-block-size: calc(100svh - 7rem); +} + +.nav_logo { + inline-size: 19.9rem; + block-size: 3.19rem; +} + .next_btn { display: flex; justify-content: flex-end; diff --git a/src/features/pages/signup-academy/form-container/index.tsx b/src/features/pages/academy-signup/form-container/index.tsx similarity index 92% rename from src/features/pages/signup-academy/form-container/index.tsx rename to src/features/pages/academy-signup/form-container/index.tsx index 8b7870b2146..f7222bf0ee3 100644 --- a/src/features/pages/signup-academy/form-container/index.tsx +++ b/src/features/pages/academy-signup/form-container/index.tsx @@ -1,11 +1,11 @@ import React from 'react' import { Analytics } from '@deriv-com/analytics' import { - signup_form_container, + form_container, link_text, - sign_up_header, - sign_up_content, - signup_login_redirect, + header, + content, + login_redirect, } from '../signup-academy.module.scss' import SignUpPageForm from './signup-page-form' import Flex from 'features/components/atoms/flex-box' @@ -32,9 +32,9 @@ const SignUpFormContainer = () => { basis: '6-12', padding: '20x', }} - className={signup_form_container} + className={form_container} > - + @@ -45,7 +45,7 @@ const SignUpFormContainer = () => { /> - + { as="span" textcolor="brand" key={0} - className={signup_login_redirect} + className={login_redirect} onClick={(event) => { event.preventDefault() Analytics?.trackEvent('ce_virtual_signup_form', { diff --git a/src/features/pages/signup-academy/form-container/signup-page-form.tsx b/src/features/pages/academy-signup/form-container/signup-page-form.tsx similarity index 100% rename from src/features/pages/signup-academy/form-container/signup-page-form.tsx rename to src/features/pages/academy-signup/form-container/signup-page-form.tsx diff --git a/src/features/pages/signup-academy/index.tsx b/src/features/pages/academy-signup/index.tsx similarity index 92% rename from src/features/pages/signup-academy/index.tsx rename to src/features/pages/academy-signup/index.tsx index f64e1c80ce7..f05f34a6dfa 100644 --- a/src/features/pages/signup-academy/index.tsx +++ b/src/features/pages/academy-signup/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react' import { Analytics } from '@deriv-com/analytics' import Layout from 'features/components/templates/layout' -import { signup_wrapper } from './signup-academy.module.scss' +import { wrapper } from './signup-academy.module.scss' import SignUpContent from './signup.content' import SignUpFormContainer from './form-container' import AcademyNav from 'features/components/templates/navigation/academy-nav' @@ -30,7 +30,7 @@ const SignUpAcademy = () => { align: 'center', gap: '16x', }} - className={signup_wrapper} + className={wrapper} pt="30x" > diff --git a/src/features/pages/signup-academy/signup-academy.module.scss b/src/features/pages/academy-signup/signup-academy.module.scss similarity index 70% rename from src/features/pages/signup-academy/signup-academy.module.scss rename to src/features/pages/academy-signup/signup-academy.module.scss index 8debe43db84..a5d6613ccf8 100644 --- a/src/features/pages/signup-academy/signup-academy.module.scss +++ b/src/features/pages/academy-signup/signup-academy.module.scss @@ -1,40 +1,33 @@ @use 'features/styles/theme/theme-mixins' as *; @import 'features/styles/theme/variables'; -.signup_wrapper { +.wrapper { min-block-size: calc(100svh - 7rem); } -.signup_form_container { +.form_container { @include breakpoints(tablet) { box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.05); } } -.signup_form_line { +.form_line { block-size: 1px; background-color: $color-grey-7; } -.sign_up_header { +.header { font-size: 24px; } -.sign_up_content { +.content { font-size: 12px; } -.signup_login_redirect { +.login_redirect { cursor: pointer; } -.signup_fb_btn { - background-color: #1877f2; -} - -.signup_apple_btn { - background-color: #000000; -} .link_text { text-decoration: underline; &:hover { @@ -42,11 +35,11 @@ color: $text-color-primary; } } -.static_nav_logo { +.nav_logo { inline-size: 19.9rem; block-size: 3.19rem; } -.signup_content { +.content_new { max-width: 44rem; } .btn_signup { diff --git a/src/features/pages/signup-academy/signup.content.tsx b/src/features/pages/academy-signup/signup.content.tsx similarity index 83% rename from src/features/pages/signup-academy/signup.content.tsx rename to src/features/pages/academy-signup/signup.content.tsx index 347f8a9939b..8d8103368e6 100644 --- a/src/features/pages/signup-academy/signup.content.tsx +++ b/src/features/pages/academy-signup/signup.content.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { signup_content } from './signup-academy.module.scss' +import { content_new } from './signup-academy.module.scss' import Flex from 'features/components/atoms/flex-box' import Typography from 'features/components/atoms/typography' import { Localize } from 'components/localization' @@ -13,10 +13,10 @@ const SignUpContent = () => { align="center" gap="8x" > - + - + diff --git a/src/pages/academy-complete-signup/index.tsx b/src/pages/academy-complete-signup/index.tsx index ec2fb635e4d..765110c191d 100644 --- a/src/pages/academy-complete-signup/index.tsx +++ b/src/pages/academy-complete-signup/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import { TGatsbyHead } from 'features/types' import { WithIntl } from 'components/localization' import { SEO } from 'components/containers' -import SignupCompleteAcademy from 'features/pages/signup-academy-complete' +import SignupCompleteAcademy from 'features/pages/academy-complete' const CompleteSignupPage = () => { return diff --git a/src/pages/academy-signup/index.tsx b/src/pages/academy-signup/index.tsx index cfc397cdd51..d30a66c432f 100644 --- a/src/pages/academy-signup/index.tsx +++ b/src/pages/academy-signup/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import SignUpAcademy from 'features/pages/signup-academy' +import SignUpAcademy from 'features/pages/academy-signup' import { TGatsbyHead } from 'features/types' import { WithIntl } from 'components/localization' import { SEO } from 'components/containers' From 10899acd0f3d0a646676c87e144f46dd824ff2c0 Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Mon, 4 Mar 2024 17:34:02 +0400 Subject: [PATCH 41/44] fix: percy issues --- src/features/pages/academy-complete/password-form.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/features/pages/academy-complete/password-form.tsx b/src/features/pages/academy-complete/password-form.tsx index 226b31d6363..60b98591aa2 100644 --- a/src/features/pages/academy-complete/password-form.tsx +++ b/src/features/pages/academy-complete/password-form.tsx @@ -1,6 +1,5 @@ import React, { useState, useCallback } from 'react' import styled from 'styled-components' -import { PasswordInput } from '@deriv-com/ui' import { trading_btn, signup_form_line } from './signup-academy-complete.module.scss' import { passwordRegex } from './password-validation' import { isBrowser } from 'common/utility' @@ -10,6 +9,8 @@ import { Localize, localize } from 'components/localization' import { Button } from 'components/form' import apiManager from 'common/websocket' import device from 'themes/device' +// eslint-disable-next-line import/order +import { PasswordInput } from '@deriv-com/ui' type AcademyPasswordFormProps = { residence: string From 26d7a446211fcd8da95fa014c3a66855bf2edb0f Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Tue, 5 Mar 2024 12:10:18 +0400 Subject: [PATCH 42/44] fix: percy run issue --- package-lock.json | 36 ++--- package.json | 5 +- .../academy-complete/password-validation.tsx | 8 -- .../password/Input/HelperMessage.scss | 24 ++++ .../password/Input/HelperMessage.tsx | 31 +++++ .../password/Input/Input.scss | 128 ++++++++++++++++++ .../academy-complete/password/Input/index.tsx | 115 ++++++++++++++++ .../password/PasswordConstants.ts | 59 ++++++++ .../password/PasswordIcon.tsx | 18 +++ .../password/PasswordInput.scss | 33 +++++ .../password/PasswordMeter.scss | 45 ++++++ .../password/PasswordMeter.tsx | 24 ++++ .../password/PasswordUtils.ts | 40 ++++++ .../pages/academy-complete/password/index.tsx | 118 ++++++++++++++++ .../{ => password}/password-form.tsx | 7 +- .../pages/academy-complete/pop-up-menu.tsx | 2 +- 16 files changed, 657 insertions(+), 36 deletions(-) delete mode 100644 src/features/pages/academy-complete/password-validation.tsx create mode 100644 src/features/pages/academy-complete/password/Input/HelperMessage.scss create mode 100644 src/features/pages/academy-complete/password/Input/HelperMessage.tsx create mode 100644 src/features/pages/academy-complete/password/Input/Input.scss create mode 100644 src/features/pages/academy-complete/password/Input/index.tsx create mode 100644 src/features/pages/academy-complete/password/PasswordConstants.ts create mode 100644 src/features/pages/academy-complete/password/PasswordIcon.tsx create mode 100644 src/features/pages/academy-complete/password/PasswordInput.scss create mode 100644 src/features/pages/academy-complete/password/PasswordMeter.scss create mode 100644 src/features/pages/academy-complete/password/PasswordMeter.tsx create mode 100644 src/features/pages/academy-complete/password/PasswordUtils.ts create mode 100644 src/features/pages/academy-complete/password/index.tsx rename src/features/pages/academy-complete/{ => password}/password-form.tsx (94%) diff --git a/package-lock.json b/package-lock.json index 9c68bb718a8..e631917f0f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,6 @@ "@deriv-com/components": "^0.52.0", "@deriv-com/hooks": "^0.11.0", "@deriv-com/providers": "^0.12.0", - "@deriv-com/ui": "^1.8.8", "@deriv/deriv-api": "^1.0.13", "@deriv/quill-design": "^1.2.16", "@deriv/quill-icons": "^1.17.3", @@ -30,6 +29,8 @@ "@svgr/webpack": "^8.1.0", "@tanstack/react-table": "^8.10.7", "@vercel/gatsby-plugin-vercel-builder": "^0.1.2", + "@zxcvbn-ts/core": "^3.0.4", + "@zxcvbn-ts/language-common": "^3.0.4", "cli-select": "^1.1.2", "clsx": "^1.2.1", "commander": "^8.3.0", @@ -2827,14 +2828,6 @@ "resolved": "https://registry.npmjs.org/@deriv-com/providers/-/providers-0.12.0.tgz", "integrity": "sha512-BISxdJUrxOfdYGkzsbgpSjIiHErjsFak4Rm+Xv5EsMVGNT7B23Q6wVs3B2D7viaEX8683jmU7WOiE4jp3N05XA==" }, - "node_modules/@deriv-com/ui": { - "version": "1.8.8", - "resolved": "https://registry.npmjs.org/@deriv-com/ui/-/ui-1.8.8.tgz", - "integrity": "sha512-iUzbckz4tD4z0vKsTijGylld//dWgo3FrKGbmi9F5WoSSAXyhmpuO5ljyeBc3vkefYNwhX9lm+ehjuUeW4tYfA==", - "optionalDependencies": { - "@rollup/rollup-linux-x64-gnu": "^4.9.6" - } - }, "node_modules/@deriv/api-types": { "version": "1.0.156", "resolved": "https://registry.npmjs.org/@deriv/api-types/-/api-types-1.0.156.tgz", @@ -8981,18 +8974,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.12.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz", - "integrity": "sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==", - "cpu": [ - "x64" - ], - "optional": true, - "os": [ - "linux" - ] - }, "node_modules/@sideway/address": { "version": "4.1.4", "license": "BSD-3-Clause", @@ -16695,6 +16676,19 @@ "version": "4.2.2", "license": "Apache-2.0" }, + "node_modules/@zxcvbn-ts/core": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@zxcvbn-ts/core/-/core-3.0.4.tgz", + "integrity": "sha512-aQeiT0F09FuJaAqNrxynlAwZ2mW/1MdXakKWNmGM1Qp/VaY6CnB/GfnMS2T8gB2231Esp1/maCWd8vTG4OuShw==", + "dependencies": { + "fastest-levenshtein": "1.0.16" + } + }, + "node_modules/@zxcvbn-ts/language-common": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@zxcvbn-ts/language-common/-/language-common-3.0.4.tgz", + "integrity": "sha512-viSNNnRYtc7ULXzxrQIVUNwHAPSXRtoIwy/Tq4XQQdIknBzw4vz36lQLF6mvhMlTIlpjoN/Z1GFu/fwiAlUSsw==" + }, "node_modules/abab": { "version": "2.0.6", "dev": true, diff --git a/package.json b/package.json index 9b5abef25f0..89dc0a3b206 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,6 @@ "@deriv-com/components": "^0.52.0", "@deriv-com/hooks": "^0.11.0", "@deriv-com/providers": "^0.12.0", - "@deriv-com/ui": "^1.8.8", "@deriv/deriv-api": "^1.0.13", "@deriv/quill-design": "^1.2.16", "@deriv/quill-icons": "^1.17.3", @@ -82,7 +81,9 @@ "use-query-params": "^1.2.3", "usehooks-ts": "^2.9.1", "webpack": "^5.89.0", - "yup": "^1.3.2" + "yup": "^1.3.2", + "@zxcvbn-ts/core": "^3.0.4", + "@zxcvbn-ts/language-common": "^3.0.4" }, "devDependencies": { "@commitlint/cli": "^16.3.0", diff --git a/src/features/pages/academy-complete/password-validation.tsx b/src/features/pages/academy-complete/password-validation.tsx deleted file mode 100644 index f3e5c65abfe..00000000000 --- a/src/features/pages/academy-complete/password-validation.tsx +++ /dev/null @@ -1,8 +0,0 @@ -export const passwordRegex = { - hasLowerCase: /[a-z]/, - hasNumber: /\d/, - hasSymbol: /\W/, - hasUpperCase: /[A-Z]/, - isLengthValid: /^.{8,25}$/, - isPasswordValid: /^(?=.*[a-z])(?=.*\d)(?=.*[A-Z])[!-~]{8,25}$/, -} diff --git a/src/features/pages/academy-complete/password/Input/HelperMessage.scss b/src/features/pages/academy-complete/password/Input/HelperMessage.scss new file mode 100644 index 00000000000..a5f466dd6b1 --- /dev/null +++ b/src/features/pages/academy-complete/password/Input/HelperMessage.scss @@ -0,0 +1,24 @@ +$inactive_color: #999999; +$success_color: #4bb4b3; +$warning_color: #ffad3a; +$error_field: #ec3f3f; + +.deriv-helper-message { + font-size: 12px; + line-height: 1; + font-style: normal; + font-weight: 400; + color: $inactive_color; + &--general { + color: $inactive_color; + } + &--success { + color: $success_color; + } + &--warning { + color: $warning_color; + } + &--error { + color: $error_field; + } +} diff --git a/src/features/pages/academy-complete/password/Input/HelperMessage.tsx b/src/features/pages/academy-complete/password/Input/HelperMessage.tsx new file mode 100644 index 00000000000..419a9b71b90 --- /dev/null +++ b/src/features/pages/academy-complete/password/Input/HelperMessage.tsx @@ -0,0 +1,31 @@ +import React, { ReactNode } from 'react' +import clsx from 'clsx' +import { InputVariants } from '.' +import './HelperMessage.scss' + +export interface HelperMessageProps { + error?: boolean + message?: ReactNode + variant?: InputVariants + disabled?: boolean +} +type TMessageVariant = Exclude +const MessageVariant: Record = { + general: 'deriv-helper-message--general', + success: 'deriv-helper-message--success', + warning: 'deriv-helper-message--warning', + error: 'deriv-helper-message--error', +} + +const HelperMessage = ({ error, message, variant = 'general', disabled }: HelperMessageProps) => ( +

+ {message} +

+) + +export default HelperMessage diff --git a/src/features/pages/academy-complete/password/Input/Input.scss b/src/features/pages/academy-complete/password/Input/Input.scss new file mode 100644 index 00000000000..59a6ca0fb73 --- /dev/null +++ b/src/features/pages/academy-complete/password/Input/Input.scss @@ -0,0 +1,128 @@ +$disabled_color: #d6dadb; +$inactive_color: #999999; +$active_color: #85acb0; +$success_color: #4bb4b3; +$warning_color: #ffad3a; +$error_field: #ec3f3f; +$border: 1px solid; + +.deriv-input__container { + display: inline-block; + position: relative; + box-sizing: border-box; + margin: 0; + padding: 0; + width: 328px; + + &--full { + width: 100%; + } +} + +.deriv-input { + display: inline-flex; + position: relative; + border-radius: 4px; + width: 100%; + text-align: left; + padding: 10px 16px; + border: $border; + + &--general { + border-color: $disabled_color; + &:hover { + border-color: $inactive_color; + } + &:focus-within { + border-color: $active_color; + } + } + &--error { + border-color: $error_field; + } + &--success { + border-color: $success_color; + } + &--active { + border-color: $active_color; + } + &--disabled { + border-color: $disabled_color; + } + + &__field { + width: 100%; + outline: none; + &::placeholder { + visibility: hidden; + } + &:focus, + &:not(:placeholder-shown) { + & ~ label { + font-size: 10px; + transform: translate(0, -50%); + background-color: #ffffff; + padding: 0px 4px; + height: fit-content; + } + } + } + + &__label { + display: inline-block; + position: absolute; + top: 0; + bottom: 0; + padding: 0; + left: 16px; + display: flex; + align-items: center; + pointer-events: none; + transition: all 0.15s ease-out; + font-size: 14px; + &--general { + color: $inactive_color; + } + &--error { + color: $error_field; + } + &--success { + color: $success_color; + } + &--active { + color: $active_color; + } + + &--disabled { + color: $disabled_color; + } + } + + &__right-content { + margin-left: 16px; + } +} + +.deriv-input--general .deriv-input__field:disabled + .deriv-input__label, +.deriv-input--error .deriv-input__field:disabled + .deriv-input__label, +.deriv-input--success .deriv-input__field:disabled + .deriv-input__label { + color: $disabled_color; +} + +.deriv-input--general .deriv-input__field:focus + .deriv-input__label { + color: $active_color; +} + +.deriv-input--error .deriv-input__field:focus + .deriv-input__label { + color: $error_field; +} + +.deriv-input--success .deriv-input__field:focus + .deriv-input__label { + color: $success_color; +} + +.deriv-input__helper-message { + padding: 2px 0 0 16px; + height: 20px; + width: 100%; +} diff --git a/src/features/pages/academy-complete/password/Input/index.tsx b/src/features/pages/academy-complete/password/Input/index.tsx new file mode 100644 index 00000000000..ad3fcb3450c --- /dev/null +++ b/src/features/pages/academy-complete/password/Input/index.tsx @@ -0,0 +1,115 @@ +import React, { ComponentProps, ReactNode, Ref, forwardRef } from 'react' +import clsx from 'clsx' +import HelperMessage from './HelperMessage' +import './Input.scss' + +export type InputVariants = 'general' | 'success' | 'error' | 'warning' | 'disabled' +interface InputProps extends Omit, 'placeholder'> { + label?: string + leftPlaceholder?: ReactNode + rightPlaceholder?: ReactNode + error?: boolean + variant?: InputVariants + message?: ReactNode + wrapperClassName?: string + hideMessage?: boolean + isFullWidth?: boolean +} + +const InputVariant: Record = { + general: 'deriv-input--general', + success: 'deriv-input--success', + warning: 'deriv-input--general', + error: 'deriv-input--error', + disabled: 'deriv-input--disabled', +} + +const LabelVariant: Record = { + general: 'deriv-input__label--general', + success: 'deriv-input__label--success', + warning: 'deriv-input__label--general', + error: 'deriv-input__label--error', + disabled: 'deriv-input__label--disabled', +} + +export const Input = forwardRef( + ( + { + className, + disabled, + error, + hideMessage, + id, + isFullWidth = false, + label, + leftPlaceholder, + message, + rightPlaceholder, + variant = 'general', + wrapperClassName, + ...rest + }: InputProps, + ref: Ref, + ) => { + return ( +
+
+ {leftPlaceholder && ( +
{leftPlaceholder}
+ )} + + + {rightPlaceholder && ( +
{rightPlaceholder}
+ )} +
+
+ {!hideMessage && message && ( + + )} +
+
+ ) + }, +) +Input.displayName = 'input' diff --git a/src/features/pages/academy-complete/password/PasswordConstants.ts b/src/features/pages/academy-complete/password/PasswordConstants.ts new file mode 100644 index 00000000000..7a991276792 --- /dev/null +++ b/src/features/pages/academy-complete/password/PasswordConstants.ts @@ -0,0 +1,59 @@ +export type TScore = 0 | 1 | 2 | 3 | 4 + +export type passwordKeys = + | 'common' + | 'commonNames' + | 'dates' + | 'extendedRepeat' + | 'keyPattern' + | 'namesByThemselves' + | 'pwned' + | 'recentYears' + | 'sequences' + | 'similarToCommon' + | 'simpleRepeat' + | 'straightRow' + | 'topHundred' + | 'topTen' + | 'userInputs' + | 'wordByItself' + +export const passwordRegex = { + hasLowerCase: /[a-z]/, + hasNumber: /\d/, + hasSymbol: /\W/, + hasUpperCase: /[A-Z]/, + isLengthValid: /^.{8,25}$/, + isPasswordValid: /^(?=.*[a-z])(?=.*\d)(?=.*[A-Z])[!-~]{8,25}$/, +} + +export const passwordValues = { + longPassword: 12, + maxLength: 25, + minLength: 8, +} + +export const passwordErrorMessage = { + invalidLength: 'You should enter 8-25 characters.', + missingCharacter: 'Password should have lower and uppercase English letters with numbers.', + PasswordError: 'That password is incorrect. Please try again.', +} + +export const warningMessages: Record = { + common: 'This is a very common password.', + commonNames: 'Common names and surnames are easy to guess.', + dates: 'Dates are easy to guess.', + extendedRepeat: 'Repeated character patterns like "abcabcabc" are easy to guess.', + keyPattern: 'Short keyboard patterns are easy to guess.', + namesByThemselves: 'Single names or surnames are easy to guess.', + pwned: 'Your password was exposed by a data breach on the Internet.', + recentYears: 'Recent years are easy to guess.', + sequences: 'Common character sequences like "abc" are easy to guess.', + similarToCommon: 'This is similar to a commonly used password.', + simpleRepeat: 'Repeated characters like "aaa" are easy to guess.', + straightRow: 'Straight rows of keys on your keyboard are easy to guess.', + topHundred: 'This is a frequently used password.', + topTen: 'This is a heavily used password.', + userInputs: 'There should not be any personal or page related data.', + wordByItself: 'Single words are easy to guess.', +} diff --git a/src/features/pages/academy-complete/password/PasswordIcon.tsx b/src/features/pages/academy-complete/password/PasswordIcon.tsx new file mode 100644 index 00000000000..8bdcd85382f --- /dev/null +++ b/src/features/pages/academy-complete/password/PasswordIcon.tsx @@ -0,0 +1,18 @@ +import React from 'react' +export const EyeIcon = () => ( + + + +) + +export const EyeIconSlash = () => ( + + + +) diff --git a/src/features/pages/academy-complete/password/PasswordInput.scss b/src/features/pages/academy-complete/password/PasswordInput.scss new file mode 100644 index 00000000000..ab0c6515148 --- /dev/null +++ b/src/features/pages/academy-complete/password/PasswordInput.scss @@ -0,0 +1,33 @@ +$NEUTRAL: #e6e9e9; +$SUCCESS: #4bb4b3; +$ERROR: #ec3f3f; + +.deriv-password { + position: relative; + display: inline-block; + + &__wrapper { + z-index: 2; + } + + &--full { + width: 100%; + } + + &__meter { + position: absolute; + z-index: 1; + border-radius: 0px 0px 4px 4px; + width: 100%; + height: 4px; + background-color: $NEUTRAL; + bottom: calc(100% - 42px); + } + &__icon { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + cursor: pointer; + } +} diff --git a/src/features/pages/academy-complete/password/PasswordMeter.scss b/src/features/pages/academy-complete/password/PasswordMeter.scss new file mode 100644 index 00000000000..321dd9816d8 --- /dev/null +++ b/src/features/pages/academy-complete/password/PasswordMeter.scss @@ -0,0 +1,45 @@ +$NEUTRAL: #e6e9e9; +$SUCCESS: #4bb4b3; +$ERROR: #ec3f3f; + +.deriv-password__meter__bar { + height: 100%; + border-radius: 0px 0px 4px 4px; + transition: width 0.25s ease-in-out; + + &__initial { + background-color: $NEUTRAL; + width: 0%; + border-radius: 0px 0px 0px 4px; + } + + &--error { + background-color: $ERROR; + width: 0%; + border-radius: 0px 0px 0px 4px; + } + + &--weak { + background-color: $ERROR; + width: 25%; + border-radius: 0px 0px 0px 4px; + } + + &--moderate { + background-color: $ERROR; + width: 50%; + border-radius: 0px 0px 0px 4px; + } + + &--strong { + background-color: $SUCCESS; + width: 75%; + border-radius: 0px 0px 0px 4px; + } + + &--complete { + background-color: $SUCCESS; + width: 100%; + border-radius: 0px 0px 4px 4px; + } +} diff --git a/src/features/pages/academy-complete/password/PasswordMeter.tsx b/src/features/pages/academy-complete/password/PasswordMeter.tsx new file mode 100644 index 00000000000..9bdb728dc4d --- /dev/null +++ b/src/features/pages/academy-complete/password/PasswordMeter.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import clsx from 'clsx' +import { TScore } from './PasswordConstants' +import './PasswordMeter.scss' + +type PasswordMeterProps = { + score: TScore +} + +const PasswordStrengthClass: Record = { + 0: 'deriv-password__meter__bar--error', + 1: 'deriv-password__meter__bar--weak', + 2: 'deriv-password__meter__bar--moderate', + 3: 'deriv-password__meter__bar--strong', + 4: 'deriv-password__meter__bar--complete', +} + +export const PasswordMeter = ({ score }: PasswordMeterProps) => ( +
+
+
+) diff --git a/src/features/pages/academy-complete/password/PasswordUtils.ts b/src/features/pages/academy-complete/password/PasswordUtils.ts new file mode 100644 index 00000000000..f777f699fb8 --- /dev/null +++ b/src/features/pages/academy-complete/password/PasswordUtils.ts @@ -0,0 +1,40 @@ +import { passwordRegex, passwordValues } from './PasswordConstants' + +export const validPassword = (value: string) => passwordRegex.isPasswordValid.test(value) + +export const isPasswordValid = (password: string) => { + return ( + passwordRegex.isPasswordValid.test(password) && passwordRegex.isLengthValid.test(password) + ) +} + +export const isPasswordModerate = (password: string) => { + const hasMoreThanOneSymbol = (password.match(/\W/g) ?? []).length > 1 + return ( + isPasswordValid(password) && + hasMoreThanOneSymbol && + password.length >= passwordValues.minLength && + password.length < passwordValues.longPassword && + passwordRegex.isLengthValid + ) +} + +export const isPasswordStrong = (password: string) => { + const hasMoreThanOneSymbol = (password.match(/\W/g) ?? []).length > 1 + return ( + isPasswordValid(password) && + hasMoreThanOneSymbol && + password.length >= passwordValues.longPassword && + passwordRegex.isLengthValid + ) +} + +export const calculateScore = (password: string) => { + if (password.length === 0) return 0 + if (!isPasswordValid(password)) return 1 + if (!isPasswordStrong(password) && isPasswordValid(password) && !isPasswordModerate(password)) + return 2 + if (!isPasswordStrong(password) && isPasswordValid(password) && isPasswordModerate(password)) + return 3 + if (isPasswordStrong(password)) return 4 +} diff --git a/src/features/pages/academy-complete/password/index.tsx b/src/features/pages/academy-complete/password/index.tsx new file mode 100644 index 00000000000..b8067e09aa0 --- /dev/null +++ b/src/features/pages/academy-complete/password/index.tsx @@ -0,0 +1,118 @@ +import React, { + ChangeEvent, + ComponentProps, + FocusEvent, + useCallback, + useMemo, + useState, +} from 'react' +import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core' +import { dictionary } from '@zxcvbn-ts/language-common' +import clsx from 'clsx' +import { Input } from './Input' +import { calculateScore, isPasswordValid } from './PasswordUtils' +import { + TScore, + passwordErrorMessage, + passwordKeys, + passwordRegex, + warningMessages, +} from './PasswordConstants' +import { EyeIcon, EyeIconSlash } from './PasswordIcon' +import { PasswordMeter } from './PasswordMeter' +import './PasswordInput.scss' + +export const validatePassword = (password: string) => { + const score = calculateScore(password) + let errorMessage = '' + + const options = { dictionary: { ...dictionary } } + zxcvbnOptions.setOptions(options) + + const { feedback } = zxcvbn(password) + if (!passwordRegex.isLengthValid.test(password)) { + errorMessage = passwordErrorMessage.invalidLength + } else if (!isPasswordValid(password)) { + errorMessage = passwordErrorMessage.missingCharacter + } else { + errorMessage = warningMessages[feedback.warning as passwordKeys] ?? '' + } + return { errorMessage, score } +} + +type InputProps = ComponentProps + +interface PasswordInputProps extends Omit { + hidePasswordMeter?: boolean + hint?: string +} + +const PasswordVariant: Record = { + 0: 'error', + 1: 'error', + 2: 'warning', + 3: 'success', + 4: 'success', +} + +export const PasswordInput = ({ + hidePasswordMeter, + hint, + onBlur, + onChange, + value, + ...rest +}: PasswordInputProps) => { + const [isTouched, setIsTouched] = useState(false) + const [showPassword, setShowPassword] = useState(false) + + const { errorMessage, score } = useMemo(() => validatePassword(value as string), [value]) + + const handleChange = useCallback( + (e: ChangeEvent) => { + onChange?.(e) + if (!isTouched) { + setIsTouched(true) + } + }, + [isTouched, onChange], + ) + + const handleBlur = useCallback( + (e: FocusEvent) => { + onBlur?.(e) + if (!isTouched) { + setIsTouched(true) + } + }, + [isTouched, onBlur], + ) + + return ( +
+ setShowPassword(!showPassword)} + > + {showPassword ? : } + + } + {...rest} + /> + {!hidePasswordMeter && } +
+ ) +} diff --git a/src/features/pages/academy-complete/password-form.tsx b/src/features/pages/academy-complete/password/password-form.tsx similarity index 94% rename from src/features/pages/academy-complete/password-form.tsx rename to src/features/pages/academy-complete/password/password-form.tsx index 60b98591aa2..27c08d17d37 100644 --- a/src/features/pages/academy-complete/password-form.tsx +++ b/src/features/pages/academy-complete/password/password-form.tsx @@ -1,7 +1,8 @@ import React, { useState, useCallback } from 'react' import styled from 'styled-components' -import { trading_btn, signup_form_line } from './signup-academy-complete.module.scss' -import { passwordRegex } from './password-validation' +import { trading_btn, signup_form_line } from '../signup-academy-complete.module.scss' +import { passwordRegex } from './PasswordConstants' +import { PasswordInput } from '.' import { isBrowser } from 'common/utility' import Flex from 'features/components/atoms/flex-box' import Typography from 'features/components/atoms/typography' @@ -9,8 +10,6 @@ import { Localize, localize } from 'components/localization' import { Button } from 'components/form' import apiManager from 'common/websocket' import device from 'themes/device' -// eslint-disable-next-line import/order -import { PasswordInput } from '@deriv-com/ui' type AcademyPasswordFormProps = { residence: string diff --git a/src/features/pages/academy-complete/pop-up-menu.tsx b/src/features/pages/academy-complete/pop-up-menu.tsx index 0bb7edd70f6..ea87b6bfbb4 100644 --- a/src/features/pages/academy-complete/pop-up-menu.tsx +++ b/src/features/pages/academy-complete/pop-up-menu.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import styled from 'styled-components' import ResidenceForm from './residence-form' -import PasswordForm from './password-form' +import PasswordForm from './password/password-form' import device from 'themes/device' import { useResidenceList } from 'features/hooks/use-residence-list' From 36e7a0c36ca46cfe3af59901104fd65e1a172cab Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Tue, 5 Mar 2024 12:21:39 +0400 Subject: [PATCH 43/44] fix: renamed the password files --- src/features/pages/academy-complete/password/index.tsx | 10 +++++----- .../{PasswordConstants.ts => password-constants.ts} | 0 .../pages/academy-complete/password/password-form.tsx | 2 +- .../password/{PasswordIcon.tsx => password-icon.tsx} | 0 .../{PasswordInput.scss => password-input.scss} | 0 .../{PasswordMeter.scss => password-meter.scss} | 3 +++ .../password/{PasswordMeter.tsx => password-meter.tsx} | 4 ++-- .../password/{PasswordUtils.ts => password-utils.ts} | 2 +- 8 files changed, 12 insertions(+), 9 deletions(-) rename src/features/pages/academy-complete/password/{PasswordConstants.ts => password-constants.ts} (100%) rename src/features/pages/academy-complete/password/{PasswordIcon.tsx => password-icon.tsx} (100%) rename src/features/pages/academy-complete/password/{PasswordInput.scss => password-input.scss} (100%) rename src/features/pages/academy-complete/password/{PasswordMeter.scss => password-meter.scss} (94%) rename src/features/pages/academy-complete/password/{PasswordMeter.tsx => password-meter.tsx} (89%) rename src/features/pages/academy-complete/password/{PasswordUtils.ts => password-utils.ts} (95%) diff --git a/src/features/pages/academy-complete/password/index.tsx b/src/features/pages/academy-complete/password/index.tsx index b8067e09aa0..53ef0b48815 100644 --- a/src/features/pages/academy-complete/password/index.tsx +++ b/src/features/pages/academy-complete/password/index.tsx @@ -10,17 +10,17 @@ import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core' import { dictionary } from '@zxcvbn-ts/language-common' import clsx from 'clsx' import { Input } from './Input' -import { calculateScore, isPasswordValid } from './PasswordUtils' +import { calculateScore, isPasswordValid } from './password-utils' import { TScore, passwordErrorMessage, passwordKeys, passwordRegex, warningMessages, -} from './PasswordConstants' -import { EyeIcon, EyeIconSlash } from './PasswordIcon' -import { PasswordMeter } from './PasswordMeter' -import './PasswordInput.scss' +} from './password-constants' +import { EyeIcon, EyeIconSlash } from './password-icon' +import { PasswordMeter } from './password-meter' +import './password-input.scss' export const validatePassword = (password: string) => { const score = calculateScore(password) diff --git a/src/features/pages/academy-complete/password/PasswordConstants.ts b/src/features/pages/academy-complete/password/password-constants.ts similarity index 100% rename from src/features/pages/academy-complete/password/PasswordConstants.ts rename to src/features/pages/academy-complete/password/password-constants.ts diff --git a/src/features/pages/academy-complete/password/password-form.tsx b/src/features/pages/academy-complete/password/password-form.tsx index 27c08d17d37..5adc8e9ac63 100644 --- a/src/features/pages/academy-complete/password/password-form.tsx +++ b/src/features/pages/academy-complete/password/password-form.tsx @@ -1,7 +1,7 @@ import React, { useState, useCallback } from 'react' import styled from 'styled-components' import { trading_btn, signup_form_line } from '../signup-academy-complete.module.scss' -import { passwordRegex } from './PasswordConstants' +import { passwordRegex } from './password-constants' import { PasswordInput } from '.' import { isBrowser } from 'common/utility' import Flex from 'features/components/atoms/flex-box' diff --git a/src/features/pages/academy-complete/password/PasswordIcon.tsx b/src/features/pages/academy-complete/password/password-icon.tsx similarity index 100% rename from src/features/pages/academy-complete/password/PasswordIcon.tsx rename to src/features/pages/academy-complete/password/password-icon.tsx diff --git a/src/features/pages/academy-complete/password/PasswordInput.scss b/src/features/pages/academy-complete/password/password-input.scss similarity index 100% rename from src/features/pages/academy-complete/password/PasswordInput.scss rename to src/features/pages/academy-complete/password/password-input.scss diff --git a/src/features/pages/academy-complete/password/PasswordMeter.scss b/src/features/pages/academy-complete/password/password-meter.scss similarity index 94% rename from src/features/pages/academy-complete/password/PasswordMeter.scss rename to src/features/pages/academy-complete/password/password-meter.scss index 321dd9816d8..7c5768bff44 100644 --- a/src/features/pages/academy-complete/password/PasswordMeter.scss +++ b/src/features/pages/academy-complete/password/password-meter.scss @@ -43,3 +43,6 @@ $ERROR: #ec3f3f; border-radius: 0px 0px 4px 4px; } } +.deriv-password__meter { + z-index: 2 !important; +} diff --git a/src/features/pages/academy-complete/password/PasswordMeter.tsx b/src/features/pages/academy-complete/password/password-meter.tsx similarity index 89% rename from src/features/pages/academy-complete/password/PasswordMeter.tsx rename to src/features/pages/academy-complete/password/password-meter.tsx index 9bdb728dc4d..d5af44e3de2 100644 --- a/src/features/pages/academy-complete/password/PasswordMeter.tsx +++ b/src/features/pages/academy-complete/password/password-meter.tsx @@ -1,7 +1,7 @@ import React from 'react' import clsx from 'clsx' -import { TScore } from './PasswordConstants' -import './PasswordMeter.scss' +import { TScore } from './password-constants' +import './password-meter.scss' type PasswordMeterProps = { score: TScore diff --git a/src/features/pages/academy-complete/password/PasswordUtils.ts b/src/features/pages/academy-complete/password/password-utils.ts similarity index 95% rename from src/features/pages/academy-complete/password/PasswordUtils.ts rename to src/features/pages/academy-complete/password/password-utils.ts index f777f699fb8..5e6975f9d73 100644 --- a/src/features/pages/academy-complete/password/PasswordUtils.ts +++ b/src/features/pages/academy-complete/password/password-utils.ts @@ -1,4 +1,4 @@ -import { passwordRegex, passwordValues } from './PasswordConstants' +import { passwordRegex, passwordValues } from './password-constants' export const validPassword = (value: string) => passwordRegex.isPasswordValid.test(value) From b660c11955e8658a1265658dae34987ee20efcdb Mon Sep 17 00:00:00 2001 From: aswathy-deriv Date: Wed, 6 Mar 2024 12:28:21 +0400 Subject: [PATCH 44/44] fix: sonarcloud issues --- src/features/hooks/use-residence-list/index.tsx | 2 +- .../password/{password-form.tsx => academy-password-form.tsx} | 0 src/features/pages/academy-complete/pop-up-menu.tsx | 4 ++-- 3 files changed, 3 insertions(+), 3 deletions(-) rename src/features/pages/academy-complete/password/{password-form.tsx => academy-password-form.tsx} (100%) diff --git a/src/features/hooks/use-residence-list/index.tsx b/src/features/hooks/use-residence-list/index.tsx index 0521e347890..01747db3f57 100644 --- a/src/features/hooks/use-residence-list/index.tsx +++ b/src/features/hooks/use-residence-list/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState } from 'react' +import { useEffect, useMemo } from 'react' import useWS from 'components/hooks/useWS' export type ResidenceType = { diff --git a/src/features/pages/academy-complete/password/password-form.tsx b/src/features/pages/academy-complete/password/academy-password-form.tsx similarity index 100% rename from src/features/pages/academy-complete/password/password-form.tsx rename to src/features/pages/academy-complete/password/academy-password-form.tsx diff --git a/src/features/pages/academy-complete/pop-up-menu.tsx b/src/features/pages/academy-complete/pop-up-menu.tsx index ea87b6bfbb4..24867374265 100644 --- a/src/features/pages/academy-complete/pop-up-menu.tsx +++ b/src/features/pages/academy-complete/pop-up-menu.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react' import styled from 'styled-components' import ResidenceForm from './residence-form' -import PasswordForm from './password/password-form' +import PasswordForm from './password/academy-password-form' import device from 'themes/device' import { useResidenceList } from 'features/hooks/use-residence-list' @@ -53,7 +53,7 @@ const PopUpMenu = () => { {!is_password && ( setIsPassword(true)} selected_value={selected_value} setSelectedValue={setSelectedValue}