Contact Form

[LiamMahoney]

Original message:

Then at the bottom have a contact form labeled, “Work With Us” (If possible)

Personal Information (subheader text) First Name Email

Business Information Business Name Website

TODO:

• [x] control inputs
• [x] input validation
• [x] submit input details to back-end
  • [x] validate required inputs are provided
• [x] send email from back-end
• [x] fix color on focus
• [x] button spinner when submitting
• [x] verification that submission worked properly
• [x] some kind of styling when selected?
• [x] add required inputs
  • should check on submit?

[LiamMahoney]

I think I want to try and crate a dynamic form component. Form would keep track of all the input children, handle submissions.

• how do I keep track of all the input children's state (value) in the form (parent)?
  • will need to keep track of a variable number of children's state
• will also need to check each input's value is valid (if a validation function is passed in)

[LiamMahoney]

Possible states of a form's input:

1. no input provided 2.partial (invalid) input provided before form has been submitted
2. valid input provided before / with submission
3. invalid input provided with submission
4. partial / invalid input fixed (no longer invalid) before nth submission

missing any?

[LiamMahoney]

Actually I need to stop being dumb and try to use HTML forms

• html form validation: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
• :isinvalid css pseudo-class: https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid

[LiamMahoney]

Left off working on implementing form notifications.

TODO:

• [x] store notifications in state
• [x] populate notifications from state
• [x] ability to delete notification
• [ ] animation for appearing / disappearing

[LiamMahoney]

Sending Email

Google API Console

• never been here before, pretty impressive

Service Account generated

Believe I have nodemailer setup properly but getting the following error when trying to send an email.

Error: Missing credentials for "PLAIN"
    at SMTPConnection._formatError (/Users/liam/Documents/code/web/websites/online_impact/node_modules/nodemailer/lib/smtp-connection/index.js:790:19)

Turns out I had been providing the wrong value for the type of the auth object in the nodemailer Transport object..

        let transporter = nodemailer.createTransport({
            host: 'smtp.gmail.com',
            port: 465,
            secure: true,
            auth: {
                type: "OAuth2",
                user: process.env.USER_EMAIL,
                serviceClient: process.env.SVC_ACCT_CLIENT,
                privateKey: fs.readFileSync(process.env.SVC_ACCT_PRIV_KEY)
            }
        });

But now getting authentication error -

Error: unauthorized_client: Client is unauthorized to retrieve access tokens using this method, or client not authorized for any of the scopes requested.

[LiamMahoney]

Took me way longer than it should've. Ended up with what feels like a janky solution but it should work fine.

1. generate app password (https://support.google.com/accounts/answer/185833?sjid=11737995041473616078-NA)
2. use node mailer with app password