diff --git a/app/components/join-steps/step-three.hbs b/app/components/join-steps/step-three.hbs index 845cc966..c8f8f873 100644 --- a/app/components/join-steps/step-three.hbs +++ b/app/components/join-steps/step-three.hbs @@ -15,7 +15,7 @@ {{#if this.errorMessage.whyRds}}
{{this.errorMessage.whyRds}}
{{/if}} - +
+
{{#if this.errorMessage.numberOfHours}}
{{this.errorMessage.numberOfHours}}
{{/if}} diff --git a/app/components/stepper-signup.hbs b/app/components/stepper-signup.hbs index de16fd89..f78495a1 100644 --- a/app/components/stepper-signup.hbs +++ b/app/components/stepper-signup.hbs @@ -109,7 +109,11 @@ @onClick={{this.applicationHandler}} @test="submit" @type="button" + @disabled={{unless this.isAllFieldsFilled true false}} /> +{{#unless this.isAllFieldsFilled}} +

Please fill in all the required fields

+{{/unless}} {{else}} (this.isValid = newVal); - setIsPreValid = (newVal) => (this.preValid = newVal); + + @action setIsValid(newVal) { + this.isValid = newVal; + } + + @action setIsPreValid(newVal) { + this.preValid = newVal; + } constructor() { super(...arguments); @@ -44,6 +52,23 @@ export default class StepperSignupComponent extends Component { return this.onboarding.applicationData?.feedback; } + get isAllFieldsFilled() { + return ( + this.isValid && + this.stepOneData.city && + this.stepOneData.state && + this.stepOneData.country && + this.stepTwoData.introduction && + this.stepTwoData.skills && + this.stepTwoData.college && + this.stepTwoData.forFun && + this.stepTwoData.funFact && + this.stepThreeData.whyRds && + this.stepThreeData.numberOfHours && + this.stepThreeData.foundFrom + ); + } + @action decrementStep() { if (this.currentStep > MIN_STEP) { this.currentStep -= 1; @@ -85,7 +110,8 @@ export default class StepperSignupComponent extends Component { this.router.transitionTo('join', { queryParams }); } - @action async applicationHandler() { + @action + async applicationHandler() { const firstName = this.login.userData.first_name; const lastName = this.login.userData.last_name; const data = JSON.stringify({ @@ -114,7 +140,8 @@ export default class StepperSignupComponent extends Component { } } - @action async joinDiscordHandler() { + @action + async joinDiscordHandler() { const inviteLink = await this.onboarding.discordInvite(); if (inviteLink) { window.open(`https://${inviteLink}`, '_blank'); diff --git a/app/constants/join.js b/app/constants/join.js index e573c74d..4b5b09fb 100644 --- a/app/constants/join.js +++ b/app/constants/join.js @@ -1,4 +1,4 @@ -export const JOIN_DEBOUNCE_TIME = 1000; +export const JOIN_DEBOUNCE_TIME = 200; export const STEP_ONE_LIMITS = { city: 1, state: 1, diff --git a/app/styles/input.module.css b/app/styles/input.module.css index 6173a8b6..25aba6f1 100644 --- a/app/styles/input.module.css +++ b/app/styles/input.module.css @@ -85,3 +85,15 @@ transform: translateX(-4px); } } + +@media (width <=1024px) { + .input-box__time { + padding-left: 4rem; + } +} + +@media (width <=480px) { + .input-box__time { + padding-left: 0; + } +} diff --git a/app/styles/onboarding-card.module.css b/app/styles/onboarding-card.module.css index 3db0a300..64d2c345 100644 --- a/app/styles/onboarding-card.module.css +++ b/app/styles/onboarding-card.module.css @@ -147,6 +147,12 @@ text-align: center; } +.error-message { + color: var(--text-red); + padding: 1rem; + font-weight: 600; +} + @media (width <=1024px) { .btn-generateUsername { width: 5rem; diff --git a/tests/integration/components/stepper-signup-test.js b/tests/integration/components/stepper-signup-test.js index 3dad3e56..6c2dd400 100644 --- a/tests/integration/components/stepper-signup-test.js +++ b/tests/integration/components/stepper-signup-test.js @@ -6,10 +6,21 @@ import { hbs } from 'ember-cli-htmlbars'; module('Integration | Component | stepper-signup', function (hooks) { setupRenderingTest(hooks); - test('stepper-signup page render', async function (assert) { + test('stepper-signup page renders without error message', async function (assert) { assert.expect(1); await render(hbs``); - assert.dom('[data-test-onboarding-card-modal]').exists(); + + assert.dom('[data-test-error-message]').doesNotExist(); + }); + + test('stepper-signup page renders with error message', async function (assert) { + assert.expect(1); + await render(hbs` + +

Please fill in all the required fields

+ `); + + assert.dom('[data-test-error-message]').exists(); }); });