@codesandbox/api
Version:
The CodeSandbox API
20 lines • 5.08 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
import { useState } from "preact/hooks";
export function LoginProviders({ onLogin, }) {
const [isLoggingIn, setIsLoggingIn] = useState(false);
const login = (provider) => {
setIsLoggingIn(true);
onLogin(provider);
};
const signInWithGitHub = (_jsxs("button", { class: "csb-api-hJQayb csb-api-iMjrFU csb-api-gFqsi", "data-loading": "false", disabled: isLoggingIn, onClick: () => login({
type: "github",
}), type: "button", children: [_jsx("svg", { class: "csb-api-gDXMLZ", height: "16", viewBox: "0 0 16 16", width: "16", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { "clip-rule": "evenodd", d: "M8.00004 1.33337C4.31671 1.33337 1.33337 4.39217 1.33337 8.16867C1.33337 11.1933 3.24171 13.748 5.89171 14.6537C6.22504 14.7135 6.35004 14.5084 6.35004 14.329C6.35004 14.1666 6.34171 13.6284 6.34171 13.0559C4.66671 13.372 4.23337 12.6372 4.10004 12.2528C4.02504 12.0562 3.70004 11.4496 3.41671 11.2873C3.18337 11.1591 2.85004 10.843 3.40837 10.8344C3.93337 10.8259 4.30837 11.33 4.43337 11.535C5.03337 12.5689 5.99171 12.2784 6.37504 12.099C6.43337 11.6547 6.60837 11.3556 6.80004 11.1847C5.31671 11.0139 3.76671 10.4243 3.76671 7.80981C3.76671 7.06648 4.02504 6.4513 4.45004 5.97283C4.38337 5.80195 4.15004 5.10133 4.51671 4.16148C4.51671 4.16148 5.07504 3.98205 6.35004 4.86209C6.88337 4.7083 7.45004 4.6314 8.01671 4.6314C8.58337 4.6314 9.15004 4.7083 9.68337 4.86209C10.9584 3.97351 11.5167 4.16148 11.5167 4.16148C11.8834 5.10133 11.65 5.80195 11.5834 5.97283C12.0084 6.4513 12.2667 7.05793 12.2667 7.80981C12.2667 10.4329 10.7084 11.0139 9.22504 11.1847C9.46671 11.3983 9.67504 11.8085 9.67504 12.4493C9.67504 13.3635 9.66671 14.0983 9.66671 14.329C9.66671 14.5084 9.79171 14.722 10.125 14.6537C11.4485 14.1956 12.5985 13.3235 13.4132 12.1602C14.228 10.9968 14.6664 9.60083 14.6667 8.16867C14.6667 4.39217 11.6834 1.33337 8.00004 1.33337Z", fill: "currentColor", "fill-rule": "evenodd" }) }), _jsx("span", { class: "csb-api-gDXMLZ csb-api-bGdKhk csb-api-boqSVd", children: "Sign in with GitHub" })] }));
const signInWithGoogle = (_jsxs("button", { class: "csb-api-hJQayb csb-api-gKSYze csb-api-qLSHt", "data-loading": "false", disabled: isLoggingIn, onClick: () => login({
type: "google",
}), type: "button", children: [_jsx("svg", { fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", children: _jsx("path", { "clip-rule": "evenodd", d: "M8.12112 7.14231V9.20025H11.5931C11.4521 10.0836 10.5431 11.7877 8.12112 11.7877C6.03125 11.7877 4.3262 10.0912 4.3262 8.00022C4.3262 5.90951 6.03125 4.21296 8.12112 4.21296C9.30964 4.21296 10.1061 4.71012 10.5607 5.13841L12.2229 3.57031C11.1564 2.59105 9.77419 2 8.12202 2C4.73812 2 2 4.68355 2 8C2 11.3164 4.73812 14 8.12202 14C11.6544 14 14 11.5649 14 8.13798C14 7.74424 13.9571 7.44438 13.9042 7.14432L8.12202 7.14188L8.12112 7.14233V7.14231Z", fill: "currentColor", "fill-rule": "evenodd" }) }), _jsx("span", { class: "csb-api-gDXMLZ csb-api-iRVciZ csb-api-ikXgsJ", children: "Sign in with Google" })] }));
const signInWithApple = (_jsxs("button", { class: "csb-api-hJQayb csb-api-gKSYze csb-api-kBXWKy", "data-loading": "false", disabled: isLoggingIn, onClick: () => login({
type: "apple",
}), type: "button", children: [_jsx("svg", { fill: "none", height: "16", viewBox: "0 0 16 16", width: "16", children: _jsx("path", { d: "M12.6487 4.77308C12.5703 4.83608 11.1867 5.64396 11.1867 7.44034C11.1867 9.51815 12.9473 10.2532 13 10.2714C12.9919 10.3162 12.7203 11.2781 12.0717 12.2582C11.4934 13.1207 10.8894 13.9818 9.97064 13.9818C9.05184 13.9818 8.81538 13.4287 7.7547 13.4287C6.72104 13.4287 6.35352 14 5.51308 14C4.67264 14 4.08623 13.2019 3.41199 12.2218C2.631 11.0709 2 9.28293 2 7.58596C2 4.86409 3.7079 3.42054 5.38877 3.42054C6.28191 3.42054 7.02641 4.0282 7.58715 4.0282C8.12087 4.0282 8.9532 3.38414 9.96929 3.38414C10.3544 3.38414 11.738 3.42054 12.6487 4.77308V4.77308ZM9.48692 2.23182C9.90714 1.71517 10.2044 0.9983 10.2044 0.281428C10.2044 0.182018 10.1963 0.0812081 10.1787 0C9.49503 0.0266027 8.68161 0.471847 8.19113 1.06131C7.80604 1.51495 7.44663 2.23182 7.44663 2.9585C7.44663 3.06771 7.46419 3.17692 7.4723 3.21192C7.51554 3.22032 7.5858 3.23012 7.65606 3.23012C8.2695 3.23012 9.04103 2.80448 9.48692 2.23182Z", fill: "currentColor" }) }), _jsx("span", { class: "csb-api-gDXMLZ csb-api-iRVciZ csb-api-IWxWu", children: "Sign in with Apple" })] }));
return (_jsxs(_Fragment, { children: [_jsx("h1", { class: "csb-api-gDXMLZ csb-api-fTbnP csb-api-dxXsIr", children: "Sign in to CodeSandbox" }), _jsx("span", { class: "csb-api-gDXMLZ csb-api-iqUtWS csb-api-bGcgTK", children: "Login or register to start building your projects today." }), _jsxs("div", { class: "csb-api-gDXMLZ csb-api-czzOfk", children: [signInWithGitHub, _jsxs("div", { class: "csb-api-gDXMLZ csb-api-jgbWPj csb-api-fROAUe", children: [signInWithGoogle, signInWithApple] })] })] }));
}
//# sourceMappingURL=LoginProviders.js.map