diff --git a/crowdin/messages.json b/crowdin/messages.json index ccb639fbac1..162d88c36b8 100644 --- a/crowdin/messages.json +++ b/crowdin/messages.json @@ -27,7 +27,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).", @@ -40,7 +39,6 @@ "39595561": "See how your bot is performing as it executes each trade and receive notifications via Telegram.", "41078219": "Get into the Deriv Trader experience", "41570825": "Are High/Low Ticks options available on Deriv Trader?", - "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?", @@ -84,8 +82,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", "156487821": "DEX 1500 DOWN Index", @@ -205,6 +202,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.", @@ -308,6 +306,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:", @@ -367,7 +366,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.", @@ -408,7 +406,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.", @@ -491,8 +488,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.", @@ -567,7 +562,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.", @@ -607,6 +601,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", @@ -678,7 +673,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", @@ -751,7 +745,6 @@ "706717249": "5 - 800", "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.", @@ -807,7 +800,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", @@ -849,7 +841,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:", @@ -882,7 +873,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", @@ -1208,7 +1198,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.", "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.", "1155971726": "Click <0>here to close your account.", @@ -1249,7 +1238,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", @@ -1391,7 +1379,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%.", @@ -1483,7 +1470,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", @@ -1494,6 +1480,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", @@ -1747,6 +1734,7 @@ "1631620531": "Years of industry experience", "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)", "1636039779": "Road Town, British Virgin Islands – Our team | Deriv", @@ -1799,7 +1787,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.", - "1674363165": "traders worldwide", + "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", @@ -1861,7 +1849,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", @@ -2332,7 +2319,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", @@ -3193,6 +3179,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", @@ -3428,6 +3423,7 @@ "-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.", "-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", @@ -3739,7 +3735,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", @@ -4338,6 +4333,7 @@ "-136976514": "Country of residence*", "-1474274516": "State/province*", "-1253349870": "Town/city*", + "-597462351": "${item.label}", "-1120954663": "First name*", "-1929304521": "Website/social media URL*", "-1113902570": "Details", @@ -4374,7 +4370,6 @@ "-1085862265": "Subscription plan", "-990526713": "Step 5 : Terms of use (5 of 5)", "-204765990": "Terms of use", - "-1541554430": "Next", "-26610045": "Add an affiliate account", "-435672026": "Wrong email", "-37998160": "Please enter 3-20 Latin characters, numbers.", @@ -4705,30 +4700,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/package-lock.json b/package-lock.json index 87711b9bb5f..e631917f0f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,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", @@ -16674,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 715e3c9aff2..89dc0a3b206 100644 --- a/package.json +++ b/package.json @@ -81,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/common/login.ts b/src/common/login.ts index 85b8ccf1f6c..217c681596c 100644 --- a/src/common/login.ts +++ b/src/common/login.ts @@ -2,12 +2,15 @@ import Cookies from 'js-cookie' 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 url = isBrowser() && window.location.href + const is_academy = isBrowser() && url.includes('academy') + const redirectToLogin = () => { if (isStorageSupported(sessionStorage)) { window.location.href = loginUrl() @@ -31,9 +34,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 (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}` + } + 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/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/components/elements/dropdown-search.tsx b/src/components/elements/dropdown-search.tsx index 2fd3ed7d693..7caa848e3cb 100644 --- a/src/components/elements/dropdown-search.tsx +++ b/src/components/elements/dropdown-search.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import styled, { css } from 'styled-components' import { Arrow, @@ -41,6 +41,7 @@ const DropdownInput = styled.input` display: flex; align-items: center; justify-content: flex-start; + ${(props) => props.has_short_name && css` @@ -78,12 +79,19 @@ const DropdownSearch = ({ onChange, selected_item, is_alternate_style, + onClearInput, + placeholder, ...props }: DropdownProps) => { const [input_value, setInputValue] = useState('') const [dropdown_items, setDropdownItems] = useState([...items]) const [is_open, dropdown_ref, nodes, handleChange, toggleListVisibility, setOpen] = useDropdown(onChange) + const inputRef = useRef(null) + + useEffect(() => { + !is_open && inputRef.current.blur() + }, [is_open]) // Auto select default value useEffect(() => { @@ -99,6 +107,7 @@ const DropdownSearch = ({ const handleInputChange = (e) => { setInputValue(e.target.value) toggleListVisibility(e) + onClearInput?.() } const handleSelectItem = (option: SelectedType, handled_error: FormikErrorsType) => { @@ -139,6 +148,7 @@ const DropdownSearch = ({ diff --git a/src/components/elements/dropdown.tsx b/src/components/elements/dropdown.tsx index 0d3b9a611ae..f673dd7d5ad 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; } `} @@ -439,8 +442,10 @@ export type DropdownProps = { value?: string disabled?: boolean autocomplete?: string + placeholder?: string mb?: string is_alternate_style?: boolean + onClearInput?: () => void } & Pick const Dropdown = ({ 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..f714a6526d5 --- /dev/null +++ b/src/features/components/templates/navigation/academy-nav/academy-nav.module.scss @@ -0,0 +1,11 @@ +@use 'features/styles/theme/theme-mixins' as *; + +.static_nav_logo { + inline-size: 19.9rem; + block-size: 3.19rem; + + @include breakpoints(tablet) { + 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..679246f3dd9 --- /dev/null +++ b/src/features/components/templates/navigation/academy-nav/index.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import NavTemplate from '../template' +import { static_nav_logo } from './academy-nav.module.scss' +import LogoImage from 'images/common/academy.svg' +import Link from 'features/components/atoms/link' +import Image from 'features/components/atoms/image' + +const AcademyNav = () => { + return ( + ( + + + + )} + /> + ) +} + +export default AcademyNav diff --git a/src/features/hooks/use-residence-list/index.tsx b/src/features/hooks/use-residence-list/index.tsx index 79bd5a0080e..01747db3f57 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,6 +43,7 @@ export const useResidenceList = ({ restricted_countries?: ['Iran', 'North Korea', 'Myanmar (Burma)', 'Syria', 'Cuba'] } = {}) => { const { send, data } = useWS('residence_list') + useEffect(() => { send() }, [send]) diff --git a/src/features/pages/academy-complete/index.tsx b/src/features/pages/academy-complete/index.tsx new file mode 100644 index 00000000000..4f0469b328c --- /dev/null +++ b/src/features/pages/academy-complete/index.tsx @@ -0,0 +1,26 @@ +import React from 'react' +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' +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/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/academy-password-form.tsx b/src/features/pages/academy-complete/password/academy-password-form.tsx new file mode 100644 index 00000000000..5adc8e9ac63 --- /dev/null +++ b/src/features/pages/academy-complete/password/academy-password-form.tsx @@ -0,0 +1,108 @@ +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-constants' +import { PasswordInput } from '.' +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' +import { Button } from 'components/form' +import apiManager from 'common/websocket' +import device from 'themes/device' + +type AcademyPasswordFormProps = { + residence: string +} + +const AcademyPasswordForm = ({ residence }: AcademyPasswordFormProps) => { + const [password, setPassword] = useState('') + const [submit_status, setSubmitStatus] = useState() + + 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) + + const handleInput = useCallback((e: React.ChangeEvent) => { + e.preventDefault() + const { value } = e.target + setPassword(value) + }, []) + + const params = new URLSearchParams(isBrowser() && location.search) + const codeValue = params.get('code') + + const GetDerivAcademy = () => { + apiManager + .augmentedSend('new_account_virtual', { + new_account_virtual: 1, + type: 'trading', + client_password: password, + residence: residence, + verification_code: codeValue, + }) + .then((response) => { + 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}` + } + }) + } + + return ( + + + + + + + + + + + + + +
+ + + +
+ + ) +} + +export default AcademyPasswordForm 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..53ef0b48815 --- /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 './password-utils' +import { + TScore, + passwordErrorMessage, + passwordKeys, + passwordRegex, + warningMessages, +} 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) + 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/password-constants.ts b/src/features/pages/academy-complete/password/password-constants.ts new file mode 100644 index 00000000000..7a991276792 --- /dev/null +++ b/src/features/pages/academy-complete/password/password-constants.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/password-icon.tsx b/src/features/pages/academy-complete/password/password-icon.tsx new file mode 100644 index 00000000000..8bdcd85382f --- /dev/null +++ b/src/features/pages/academy-complete/password/password-icon.tsx @@ -0,0 +1,18 @@ +import React from 'react' +export const EyeIcon = () => ( + + + +) + +export const EyeIconSlash = () => ( + + + +) diff --git a/src/features/pages/academy-complete/password/password-input.scss b/src/features/pages/academy-complete/password/password-input.scss new file mode 100644 index 00000000000..ab0c6515148 --- /dev/null +++ b/src/features/pages/academy-complete/password/password-input.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/password-meter.scss b/src/features/pages/academy-complete/password/password-meter.scss new file mode 100644 index 00000000000..7c5768bff44 --- /dev/null +++ b/src/features/pages/academy-complete/password/password-meter.scss @@ -0,0 +1,48 @@ +$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; + } +} +.deriv-password__meter { + z-index: 2 !important; +} diff --git a/src/features/pages/academy-complete/password/password-meter.tsx b/src/features/pages/academy-complete/password/password-meter.tsx new file mode 100644 index 00000000000..d5af44e3de2 --- /dev/null +++ b/src/features/pages/academy-complete/password/password-meter.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import clsx from 'clsx' +import { TScore } from './password-constants' +import './password-meter.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/password-utils.ts b/src/features/pages/academy-complete/password/password-utils.ts new file mode 100644 index 00000000000..5e6975f9d73 --- /dev/null +++ b/src/features/pages/academy-complete/password/password-utils.ts @@ -0,0 +1,40 @@ +import { passwordRegex, passwordValues } from './password-constants' + +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/pop-up-menu.tsx b/src/features/pages/academy-complete/pop-up-menu.tsx new file mode 100644 index 00000000000..24867374265 --- /dev/null +++ b/src/features/pages/academy-complete/pop-up-menu.tsx @@ -0,0 +1,71 @@ +import React, { useState } from 'react' +import styled from 'styled-components' +import ResidenceForm from './residence-form' +import PasswordForm from './password/academy-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: rgba(0, 0, 0, 0.72); + z-index: 10; +` +const PopUpMenu = () => { + const [residence_list] = useResidenceList({}) + const [is_password, setIsPassword] = useState(false) + const [selected_value, setSelectedValue] = useState({ + country: null, + citizenship: null, + }) + + return ( + <> + + + {!is_password && ( + setIsPassword(true)} + selected_value={selected_value} + setSelectedValue={setSelectedValue} + /> + )} + {is_password && } + + + + + + ) +} + +export default PopUpMenu diff --git a/src/features/pages/academy-complete/residence-form.tsx b/src/features/pages/academy-complete/residence-form.tsx new file mode 100644 index 00000000000..97b2dedcb11 --- /dev/null +++ b/src/features/pages/academy-complete/residence-form.tsx @@ -0,0 +1,188 @@ +import React, { useState } from 'react' +import styled from 'styled-components' +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' +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; +` +export const NextButton = styled(Button)` + border-radius: 4px; + font-family: 'Ubuntu'; + text-align: center; + height: 40px; + + @media ${device.tablet} { + width: 100%; + } +` +type CountryType = { + name: string + display_name: string + value: string + disabled: 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 [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 = [ + { + 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_', + ), + error_message: '_t_Unfortunately, Deriv is not available in this country._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 ( + <> + handleSelection(country)} + style={{ marginTop: '16px' }} + onClearInput={() => + setSelectedValue({ ...selected_value, country: '' }) + } + /> + {errors && ( + + + + )} + {!errors && ( + + + + )} + + ) + } else { + return ( + <> + { + setSelectedValue((prevState) => ({ + ...prevState, + citizenship: citizenship, + })) + }} + style={{ marginTop: '16px' }} + onClearInput={() => + setSelectedValue({ ...selected_value, citizenship: '' }) + } + /> + + + + + ) + } + })} +
+ + + +
+ + + + ) +} +export default ResidenceForm diff --git a/src/features/pages/academy-complete/signup-academy-complete.module.scss b/src/features/pages/academy-complete/signup-academy-complete.module.scss new file mode 100644 index 00000000000..d70eb7266fc --- /dev/null +++ b/src/features/pages/academy-complete/signup-academy-complete.module.scss @@ -0,0 +1,35 @@ +@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; + padding-top: 1.6rem; +} + +.trading_btn { + display: flex; + padding-top: 1.6rem; + @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/academy-signup/form-container/index.tsx b/src/features/pages/academy-signup/form-container/index.tsx new file mode 100644 index 00000000000..f7222bf0ee3 --- /dev/null +++ b/src/features/pages/academy-signup/form-container/index.tsx @@ -0,0 +1,92 @@ +import React from 'react' +import { Analytics } from '@deriv-com/analytics' +import { + form_container, + link_text, + header, + content, + login_redirect, +} 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' +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() + + const security_pdf_link = `/tnc${is_eu ? '/eu' : ''}/security-and-privacy.pdf` + + return ( + + + + + + + ]} + /> + + + + , + ]} + /> + + + + { + 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 SignUpFormContainer diff --git a/src/features/pages/academy-signup/form-container/signup-page-form.tsx b/src/features/pages/academy-signup/form-container/signup-page-form.tsx new file mode 100644 index 00000000000..edc1dd493e4 --- /dev/null +++ b/src/features/pages/academy-signup/form-container/signup-page-form.tsx @@ -0,0 +1,67 @@ +import React from 'react' +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' +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/academy-signup/index.tsx b/src/features/pages/academy-signup/index.tsx new file mode 100644 index 00000000000..f05f34a6dfa --- /dev/null +++ b/src/features/pages/academy-signup/index.tsx @@ -0,0 +1,43 @@ +import React, { useEffect } from 'react' +import { Analytics } from '@deriv-com/analytics' +import Layout from 'features/components/templates/layout' +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' +import Flex from 'features/components/atoms/flex-box' +import { isBrowser } from 'common/utility' + +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/academy-signup/signup-academy.module.scss b/src/features/pages/academy-signup/signup-academy.module.scss new file mode 100644 index 00000000000..a5d6613ccf8 --- /dev/null +++ b/src/features/pages/academy-signup/signup-academy.module.scss @@ -0,0 +1,47 @@ +@use 'features/styles/theme/theme-mixins' as *; +@import 'features/styles/theme/variables'; + +.wrapper { + min-block-size: calc(100svh - 7rem); +} + +.form_container { + @include breakpoints(tablet) { + box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.05); + } +} + +.form_line { + block-size: 1px; + background-color: $color-grey-7; +} + +.header { + font-size: 24px; +} + +.content { + font-size: 12px; +} + +.login_redirect { + cursor: pointer; +} + +.link_text { + text-decoration: underline; + &:hover { + text-decoration-color: #000000; + color: $text-color-primary; + } +} +.nav_logo { + inline-size: 19.9rem; + block-size: 3.19rem; +} +.content_new { + max-width: 44rem; +} +.btn_signup { + text-align: center; +} diff --git a/src/features/pages/academy-signup/signup.content.tsx b/src/features/pages/academy-signup/signup.content.tsx new file mode 100644 index 00000000000..8d8103368e6 --- /dev/null +++ b/src/features/pages/academy-signup/signup.content.tsx @@ -0,0 +1,26 @@ +import React from 'react' +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' + +const SignUpContent = () => { + return ( + + + + + + + + + ) +} + +export default SignUpContent 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 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..765110c191d --- /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/academy-complete' + +const CompleteSignupPage = () => { + return +} + +export default WithIntl()(CompleteSignupPage) + +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..d30a66c432f --- /dev/null +++ b/src/pages/academy-signup/index.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import SignUpAcademy from 'features/pages/academy-signup' +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) => ( + +) 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_')} />