import Button from 'antd/es/button';
/**
* Google's own mark, inlined as SVG (#345).
*
* Their identity guidelines specify the four colours and the geometry, and a
* hand-drawn approximation of somebody else's trademark is a compliance problem
* rather than a style choice. These are the published values.
*
* Inlined rather than fetched, for the reason every other asset in this app is:
* a second origin is a second thing that can be down, blocked, or slow, and
* this one sits on the sign-in path.
*/
function GoogleMark() {
return (
);
}
type Props = Readonly<{
/** Where to send the customer back to. Validated again on the server. */
returnTo: string;
/**
* Which tab this sits on, which changes only the wording.
*
* One endpoint serves both: it signs in a known identity, links a verified
* address, or creates an account. The customer does not know or care which
* of those will happen, so the label matches what they came to the tab to
* do rather than what the server ends up doing.
*
* Both spellings are in Google identity guidelines alongside the mark.
*/
intent?: 'sign-in' | 'sign-up';
}>;
/**
* Signing in with Google (#345).
*
* A navigation rather than a fetch, which is what makes this different from
* every other control on the auth form. The flow leaves this application
* entirely, so there is no promise to await and no error to catch here — the
* server's callback decides what happens and redirects accordingly.
*
* `returnTo` is sent as a query parameter and **validated on the server**, not
* here. It has to be, since anyone can type the URL, and doing it in one place
* beats doing it in two languages. See `google/returnTo.ts`.
*/
export default function GoogleSignInButton({ returnTo, intent = 'sign-in' }: Props) {
return (
}
onClick={() => {
// assign rather than the router: this is a full page departure to
// another origin, and react-router would try to match it as a route.
window.location.assign(`/api/auth/google/start?returnTo=${encodeURIComponent(returnTo)}`);
}}
>
{intent === 'sign-up' ? 'Sign up with Google' : 'Sign in with Google'}
);
}