forked from bcgov/cthub
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Itvr 242 - household login (bcgov#67)
* -moves login scss into its own page and out of eligibility.scss -adds spouse login -moves whats needed into its own component -adds some conditional text to bottom banner * -moves household component into page -moves whatsneededtoapply component into the eligibility page and the household page, * -adds useSearchParams for grabbing application id for household form -adds page for household form -redirects to that page after bceid login
- Loading branch information
Showing
9 changed files
with
227 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from 'react'; | ||
| import jwt_decode from 'jwt-decode'; | ||
| import Form from '../components/Form'; | ||
| import { useKeycloak } from '@react-keycloak/web'; | ||
| import Layout from '../components/Layout'; | ||
| import { useSearchParams } from 'react-router-dom'; | ||
|
|
||
| const HouseholdFormPage = () => { | ||
| const [searchParams, setSearchParams] = useSearchParams(); | ||
| const householdApplicationId = searchParams.get('householdApplication'); | ||
| const { keycloak } = useKeycloak(); | ||
| // we can validate the token server side | ||
| const decoded = jwt_decode(keycloak.token); | ||
|
|
||
| return ( | ||
| <div> | ||
| Hello BCeID {decoded.preferred_username} | ||
| <Layout> | ||
| application id {householdApplicationId} | ||
| <Form /> | ||
| </Layout> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default HouseholdFormPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import React from 'react'; | ||
| import BottomBanner from '../components/BottomBanner'; | ||
| import Layout from '../components/Layout'; | ||
| import { useSearchParams } from 'react-router-dom'; | ||
|
|
||
| const HouseholdPage = () => { | ||
| const [searchParams, setSearchParams] = useSearchParams(); | ||
| const householdApplicationId = searchParams.get('householdApplication'); | ||
|
|
||
| const title = ( | ||
| <> | ||
| <h3>Complete your rebate application for your household</h3> | ||
| <h5>What you will need to complete this application</h5> | ||
| </> | ||
| ); | ||
| const applicationText = ( | ||
| <div> | ||
| <ul> | ||
| <li>A Basic BCeID.</li> | ||
| <li>An image of your B.C. Driver's Licence or B.C. Services Card.</li> | ||
| <li>An image of a secondary piece of ID.</li> | ||
| <li> | ||
| Your Social Insurance Number and CRA income disclosure consent to | ||
| confirm your income. | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| ); | ||
|
|
||
| return ( | ||
| <Layout> | ||
| <div> | ||
| <div className="whats-needed-spouse"> | ||
| {title} | ||
| {applicationText} | ||
| </div> | ||
| <BottomBanner | ||
| eligible={true} | ||
| text="Complete your rebate application" | ||
| type="spouse" | ||
| householdApplicationId={householdApplicationId} | ||
| /> | ||
| </div> | ||
| </Layout> | ||
| ); | ||
| }; | ||
|
|
||
| export default HouseholdPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from 'react'; | ||
|
|
||
| import HouseholdPage from '../pages/Household'; | ||
|
|
||
| export default { | ||
| title: 'ITVR/Household', | ||
| component: HouseholdPage | ||
| }; | ||
|
|
||
| const Template = (args) => <HouseholdPage {...args} />; | ||
| export const Default = Template.bind({}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| .whats-needed { | ||
| &-individual, | ||
| &-spouse { | ||
| padding: 2rem 8rem 2rem 8rem; | ||
| margin-top: 2rem; | ||
| } | ||
| &-individual { | ||
| background: $background-grey-light; | ||
| } | ||
| &-spouse { | ||
| background: $white; | ||
| } | ||
| } | ||
|
|
||
| .start-application { | ||
| &-individual, | ||
| &-spouse { | ||
| margin-top: -2rem; | ||
| background-image: url('./images/body-graphic.svg'); | ||
|
|
||
| background-repeat: no-repeat; | ||
| background-position: top center; | ||
| background-size: cover; | ||
| padding-left: 6rem; | ||
| padding-top: 6rem; | ||
| min-height: 75vh; | ||
| } | ||
| &-individual { | ||
| background-color: $background-grey-light; | ||
| } | ||
| &-spouse { | ||
| background-color: $white; | ||
| } | ||
|
|
||
| #start-text { | ||
| margin-top: 2rem; | ||
| margin-bottom: 2rem; | ||
| } | ||
| } | ||
| @media (max-width: 820px) { | ||
| #whats-needed { | ||
| padding: 0; | ||
| } | ||
| #start-application { | ||
| background-image: none; | ||
| margin: 0; | ||
| padding: 2rem 0 0.5rem; | ||
| min-height: 30vh; | ||
| #start-text { | ||
| margin-top: 0; | ||
| color: $text-heading-blue; | ||
| } | ||
| #bceid-login-square { | ||
| width: 15rem; | ||
| height: 15rem; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| #BceidLoginTitle { | ||
| color: $white; | ||
| margin-bottom: 0.5rem; | ||
| } | ||
| .button { | ||
| font-size: 1.5rem; | ||
| margin-top: 0.5rem; | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.