Age Verfication

[aclai4067]

Developer Story

As a user, I want to enter my age to verify if I am 21+

AC

WHEN the page loads THEN pop a model asking for the visitors date of birth AND update the over21 state to reflect the users age (this will be used in the routes ticket to keep under 21 users from visiting pages selling alcohol)

Dev Notes

• [x] Install react-semantic-ui
• [x] Create a new component with a modal that pops on, using load https://codesandbox.io/s/ks2nv?module=/example.js&file=/example.js:464-571 -- user should not be able to click off the modal to exit -- modal will include a mandatory date input to enter their DOB
• [x] Create a state on the App level for over21 and set to false
• [x] Create a state on the App level for AgeVerificationComplete and set to false. This is to confirm whether the age question has been answered, regardless of the user's age, to keep the modal from popping again on every new page
• [x] Calculate age based on the date entered -- if 21+, set state on over21 to true -- if under 21 set state of over21 to false
• [x] once age has been submitted, set state on AgeVerificationComplete to true

this code has been adjusted to open on load and will not close on esc or dimmer click, however, the modal content still needs to be filled in & we need to add a conditional to keep the modal from popping once this questions has been answered (something like If AgeVerificationComplete setState Open: False)

import React, { Component } from 'react'
import { Button, Modal } from 'semantic-ui-react'

class ModalExampleCloseConfig extends Component {
  state = { open: true }

  closeConfigShow = (closeOnEscape, closeOnDimmerClick) => () => {
    this.setState({ closeOnEscape: false, closeOnDimmerClick: false, open: true })
  }

  close = () => this.setState({ open: false })

  render() {
    const { open, closeOnEscape, closeOnDimmerClick } = this.state

    return (
      <div>
\        <Modal
          open={open}
          closeOnEscape={closeOnEscape}
          closeOnDimmerClick={closeOnDimmerClick}
        >
          <Modal.Header>Delete Your Account</Modal.Header>
          <Modal.Content>
            <p>Are you sure you want to delete your account</p>
          </Modal.Content>
          <Modal.Actions>
            <Button onClick={this.close} negative>
              No
            </Button>
            <Button
              onClick={this.close}
              positive
              labelPosition='right'
              icon='checkmark'
              content='Yes'
            />
          </Modal.Actions>
        </Modal>
      </div>
    )
  }
}

export default ModalExampleCloseConfig

Updates

*