Custom Header/Footer slots

[ericclemmons]

Closes #259, #498, #257

Customizing text via I18n isn't enough. Slots are needed to prepend, append, & replace entire elements.

• Vue: Add new Slots #647
• Header & Footer Slots #695
• feat(angular,vue): header and footer slot + style #661
• Clean up of Sign In and Sign Up Pages #690
• Updated docs

---

These largely exist in the internal implementation, but need to be exposed & documented.

Slot Names (React)

Here I mocked up the React documentation with where the slots would go:

Slot Implementation (React)

This example implementation does the following:

• Adds a Logo above the entire Authenticator in the Header
• Adds a legal text below the entire Authenticator in the Footer
• Appends the SignIn.Header with a subtitle
• Injects a custom SignIn.Footer below the form

const customComponents = {
  Header() {
    return <img src="logo.png" />
  },
  Footer() {
    return <p>Copyright 2021</p>
  },
  SignIn: {
    Header() {
  	  return (
		<>
		  <Authenticator.SignIn.Header />
		  <h3>Internal Use Only!</h3>
		</>
	  )
    },
    Footer() {
      return <p>Call 1-800-help-desk for support</p>
    }
  }
}

function App() {
  return (
    <Authenticator components={customComponents}>
	  {({ user }) => <h1>Howdy {user.username}</h1>}
	</Authenticator>
  )
}

[ericclemmons]

Closed via #695