From 356fe49230ee1d4e6caff1a6731c103fc0ff1a4d Mon Sep 17 00:00:00 2001 From: tejaskh3 Date: Tue, 22 Oct 2024 01:09:48 +0530 Subject: [PATCH 1/5] fix: navbar & css & phone validation --- app/components/header.hbs | 3 --- app/components/join-section.hbs | 3 +++ app/constants/regex.js | 2 ++ app/controllers/subscribe.js | 13 +++++----- app/styles/join-section.module.css | 39 +++++++++++++++++++++++++++--- app/styles/subscribe.module.css | 6 ++++- 6 files changed, 51 insertions(+), 15 deletions(-) create mode 100644 app/constants/regex.js diff --git a/app/components/header.hbs b/app/components/header.hbs index 38e5b411..54224285 100644 --- a/app/components/header.hbs +++ b/app/components/header.hbs @@ -52,9 +52,6 @@ href={{this.STATUS_URL}} >Status {{#if @dev}} -
  • - Subscribe -
  • {{! TODO - remove query for dev when it goes to production }} +
    + Join the Squad +
    {{else}}
    diff --git a/app/constants/regex.js b/app/constants/regex.js new file mode 100644 index 00000000..59c5b265 --- /dev/null +++ b/app/constants/regex.js @@ -0,0 +1,2 @@ +export const phoneNumberRegex = + /^[+]{1}(?:[0-9\-\\(\\)\\/.]\s?){6,15}[0-9]{1}$/; diff --git a/app/controllers/subscribe.js b/app/controllers/subscribe.js index bcd7a3ee..2dcbb98b 100644 --- a/app/controllers/subscribe.js +++ b/app/controllers/subscribe.js @@ -4,6 +4,7 @@ import { action } from '@ember/object'; import { inject as service } from '@ember/service'; import { RDS_TWITTER, APPS } from '../constants/urls'; import { TOAST_OPTIONS } from '../constants/toast-options'; +import { phoneNumberRegex } from '../constants/regex'; export default class SubscribeController extends Controller { @service login; @@ -13,6 +14,7 @@ export default class SubscribeController extends Controller { @tracked userData = null; @tracked isLoading = false; @tracked showSubscribedMessage = false; + @service toast; RDS_TWITTER = RDS_TWITTER; @@ -30,7 +32,8 @@ export default class SubscribeController extends Controller { } get isSubmitDisabled() { - return !this.email || (this.phone && !/^\+?\d*$/.test(this.phone)); + const isPhoneValid = !this.phone || phoneNumberRegex.test(this.phone); + return !this.email || !isPhoneValid; } @action @@ -45,11 +48,7 @@ export default class SubscribeController extends Controller { @action updatePhone(event) { - const input = event.target.value; - const isValidPhone = /^\+?\d*$/.test(input); - if (isValidPhone) { - this.phone = input; - } + this.phone = event.target.value; } @action @@ -80,7 +79,7 @@ export default class SubscribeController extends Controller { this.login.userData.isSubscribed = true; this.isFormOpen = false; this.showSubscribedMessage = true; - this.toast.info('🎉 You are already subscribed!', '', TOAST_OPTIONS); + this.toast.success('🎉 Thankyou for subscribing!', '', TOAST_OPTIONS); } } catch (error) { console.log(error); diff --git a/app/styles/join-section.module.css b/app/styles/join-section.module.css index a63cda06..754bf1b2 100644 --- a/app/styles/join-section.module.css +++ b/app/styles/join-section.module.css @@ -41,7 +41,15 @@ line-height: 175%; } -.join__link { +.links__container { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.join__link, +.subscribe__link { display: inline-block; margin-top: 2rem; text-decoration: none; @@ -54,11 +62,24 @@ padding: 1.25rem 3rem; } -.join__link:hover { +.subscribe__link { + display: flex; + justify-content: center; + align-items: center; + gap: 5px; + padding: 1.125rem 3.75rem; +} + +.join__link:hover, +.subscribe__link:hover { background-color: var(--color-pink); transition-duration: 250ms; } +.subscribe__link span { + font-size: 1.125rem; +} + .join__link--new { background-color: var(--color-button-disabled); cursor: not-allowed; @@ -121,11 +142,16 @@ font-size: 1.1rem; } - .join__link { + .join__link, + .subscribe__link { border-radius: 0.75rem; font-size: 1.25rem; padding: 1rem 2.5rem; } + + .subscribe__link span { + font-size: 0.75px; + } } @media (width <=425px) { @@ -141,10 +167,15 @@ font-size: 1rem; } - .join__link { + .join__link, + .subscribe__link { border-radius: 0.5rem; margin-top: 1rem; font-size: 1rem; padding: 0.75rem 2rem; } + + .subscribe__link span { + font-size: 0.75px; + } } diff --git a/app/styles/subscribe.module.css b/app/styles/subscribe.module.css index 50d41e23..d011ed89 100644 --- a/app/styles/subscribe.module.css +++ b/app/styles/subscribe.module.css @@ -146,6 +146,10 @@ color: #374151; } +.input__group input::placeholder { + color: #6b7280; +} + .input__group input { padding: 0.75rem; border: 1px solid #d1d5db; @@ -155,7 +159,7 @@ font-weight: 400; line-height: 17.5px; text-align: left; - color: #6b7280; + color: #000; } .submit__btn { From 808e168b08532a138ccd5e5e2e4befc81be4e551 Mon Sep 17 00:00:00 2001 From: tejaskh3 Date: Wed, 23 Oct 2024 23:22:30 +0530 Subject: [PATCH 2/5] fix: PR comments --- app/components/join-section.hbs | 2 +- app/controllers/subscribe.js | 2 ++ app/styles/join-section.module.css | 16 ++++++---------- app/templates/subscribe.hbs | 4 ++-- 4 files changed, 11 insertions(+), 13 deletions(-) diff --git a/app/components/join-section.hbs b/app/components/join-section.hbs index 1950fcbe..a3d48685 100644 --- a/app/components/join-section.hbs +++ b/app/components/join-section.hbs @@ -12,7 +12,7 @@ to value everyone's time and efforts.

    - + Join the Squad
    diff --git a/app/controllers/subscribe.js b/app/controllers/subscribe.js index 2dcbb98b..278adef8 100644 --- a/app/controllers/subscribe.js +++ b/app/controllers/subscribe.js @@ -15,6 +15,7 @@ export default class SubscribeController extends Controller { @tracked isLoading = false; @tracked showSubscribedMessage = false; @service toast; + @tracked isPhoneValid = true; RDS_TWITTER = RDS_TWITTER; @@ -49,6 +50,7 @@ export default class SubscribeController extends Controller { @action updatePhone(event) { this.phone = event.target.value; + this.isPhoneValid = !this.phone || phoneNumberRegex.test(this.phone); } @action diff --git a/app/styles/join-section.module.css b/app/styles/join-section.module.css index 754bf1b2..203185e5 100644 --- a/app/styles/join-section.module.css +++ b/app/styles/join-section.module.css @@ -48,8 +48,7 @@ width: 100%; } -.join__link, -.subscribe__link { +.join__link { display: inline-block; margin-top: 2rem; text-decoration: none; @@ -70,8 +69,7 @@ padding: 1.125rem 3.75rem; } -.join__link:hover, -.subscribe__link:hover { +.join__link:hover { background-color: var(--color-pink); transition-duration: 250ms; } @@ -142,15 +140,14 @@ font-size: 1.1rem; } - .join__link, - .subscribe__link { + .join__link { border-radius: 0.75rem; font-size: 1.25rem; padding: 1rem 2.5rem; } .subscribe__link span { - font-size: 0.75px; + font-size: 0.75rem; } } @@ -167,8 +164,7 @@ font-size: 1rem; } - .join__link, - .subscribe__link { + .join__link { border-radius: 0.5rem; margin-top: 1rem; font-size: 1rem; @@ -176,6 +172,6 @@ } .subscribe__link span { - font-size: 0.75px; + font-size: 0.75rem; } } diff --git a/app/templates/subscribe.hbs b/app/templates/subscribe.hbs index e64ae511..79879d1a 100644 --- a/app/templates/subscribe.hbs +++ b/app/templates/subscribe.hbs @@ -16,7 +16,7 @@
    - +
    @@ -26,7 +26,7 @@ id="phone" value={{this.phone}} {{on "input" this.updatePhone}} - placeholder="eg: +91 1234567890" + placeholder="Please enter with the country code (e.g., +91 1234567890)." >
    From cd5eed94976383dee877f87fb87c7da73adec065 Mon Sep 17 00:00:00 2001 From: tejaskh3 Date: Thu, 24 Oct 2024 00:56:40 +0530 Subject: [PATCH 3/5] feat: add error to in valid input --- app/styles/subscribe.module.css | 5 +++++ app/templates/subscribe.hbs | 21 ++++++++++----------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/app/styles/subscribe.module.css b/app/styles/subscribe.module.css index d011ed89..b610d4d8 100644 --- a/app/styles/subscribe.module.css +++ b/app/styles/subscribe.module.css @@ -162,6 +162,11 @@ color: #000; } +.invalid-input { + border-color: #dc2626; + color: red; +} + .submit__btn { padding: 1rem; background-color: #1e429f; diff --git a/app/templates/subscribe.hbs b/app/templates/subscribe.hbs index 79879d1a..4dd3ce8a 100644 --- a/app/templates/subscribe.hbs +++ b/app/templates/subscribe.hbs @@ -19,17 +19,16 @@ -
    - - -
    - +
    + + +
    From 5247dc389711379ecbf1a43e826bad1d857792ad Mon Sep 17 00:00:00 2001 From: tejaskh3 Date: Thu, 24 Oct 2024 01:46:02 +0530 Subject: [PATCH 4/5] fix: lint --- app/templates/subscribe.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/subscribe.hbs b/app/templates/subscribe.hbs index 4dd3ce8a..1eb4eda5 100644 --- a/app/templates/subscribe.hbs +++ b/app/templates/subscribe.hbs @@ -22,7 +22,7 @@
    Date: Thu, 24 Oct 2024 20:37:53 +0530 Subject: [PATCH 5/5] rename: phoneNumber body to phone --- app/controllers/subscribe.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/controllers/subscribe.js b/app/controllers/subscribe.js index 278adef8..8fef9c36 100644 --- a/app/controllers/subscribe.js +++ b/app/controllers/subscribe.js @@ -64,7 +64,7 @@ export default class SubscribeController extends Controller { method: 'POST', body: JSON.stringify({ email: this.email, - phoneNumber: this.phone, + phone: this.phone, }), headers: { 'Content-Type': 'application/json',