Google 로그인을 단일 버튼으로 정리
This commit is contained in:
parent
7994175a3d
commit
471eb9621a
15 changed files with 78 additions and 85 deletions
|
|
@ -131,16 +131,11 @@ export default function Login() {
|
|||
!isLocalRedirectUri(authConfig.redirect_uri);
|
||||
const oauthReady =
|
||||
authConfig?.google_oauth_configured === true && !devOAuthUnavailable;
|
||||
const primaryAccountLabel = devOAuthUnavailable
|
||||
const accountLabel = devOAuthUnavailable
|
||||
? "로컬은 테스트 계정 사용"
|
||||
: oauthChecking
|
||||
? "도메인 확인 중"
|
||||
: "모든 Google 계정";
|
||||
const secondaryAccountLabel = devOAuthUnavailable
|
||||
? "공개 주소에서 사용"
|
||||
: oauthChecking
|
||||
? "계정 정책 확인 중"
|
||||
: "이메일 확인 후 바로 시작";
|
||||
const oauthStatusMessage = devOAuthUnavailable
|
||||
? LOCAL_OAUTH_UNAVAILABLE_MESSAGE
|
||||
: oauthChecking
|
||||
|
|
@ -182,8 +177,7 @@ export default function Login() {
|
|||
<LoginPanel
|
||||
oauth={{
|
||||
ready: oauthReady,
|
||||
primaryAccountLabel,
|
||||
secondaryAccountLabel,
|
||||
accountLabel,
|
||||
statusIcon: authConfigError ? "alert" : "info",
|
||||
statusMessage: oauthStatusMessage,
|
||||
onStart: startOAuth,
|
||||
|
|
|
|||
|
|
@ -11,8 +11,7 @@ export interface LoginRoleOption {
|
|||
|
||||
interface LoginOAuthView {
|
||||
ready: boolean;
|
||||
primaryAccountLabel: string;
|
||||
secondaryAccountLabel: string;
|
||||
accountLabel: string;
|
||||
statusIcon: Extract<IconName, "alert" | "info">;
|
||||
statusMessage: string;
|
||||
onStart: () => void;
|
||||
|
|
@ -38,33 +37,27 @@ interface LoginPanelProps {
|
|||
error: LoginErrorView;
|
||||
}
|
||||
|
||||
function LoginProviderButton({
|
||||
variant,
|
||||
icon,
|
||||
label,
|
||||
function GoogleLoginButton({
|
||||
subLabel,
|
||||
disabled,
|
||||
onClick,
|
||||
}: {
|
||||
variant: "primary" | "secondary";
|
||||
icon: Extract<IconName, "google" | "school">;
|
||||
label: string;
|
||||
subLabel: string;
|
||||
disabled: boolean;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
className={surfaceClassName(`lg-obtn ${variant}`, { variant: "interactive", flat: true })}
|
||||
className={surfaceClassName("lg-obtn primary", { variant: "interactive", flat: true })}
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
<span className="ic">
|
||||
<Icon name={icon} size={19} strokeWidth={1.8} />
|
||||
<Icon name="google" size={19} strokeWidth={1.8} />
|
||||
</span>
|
||||
<span className="txt">
|
||||
{label}
|
||||
Google 계정으로 로그인
|
||||
<span className="sub">{subLabel}</span>
|
||||
</span>
|
||||
<Icon name="chevron-right" size={18} strokeWidth={2} />
|
||||
|
|
@ -140,19 +133,8 @@ export function LoginPanel({ oauth, devAccess, error }: LoginPanelProps) {
|
|||
</p>
|
||||
|
||||
<div className="lg-actions">
|
||||
<LoginProviderButton
|
||||
variant="primary"
|
||||
icon="school"
|
||||
label="Google 계정으로 계속"
|
||||
subLabel={oauth.primaryAccountLabel}
|
||||
disabled={!oauth.ready}
|
||||
onClick={oauth.onStart}
|
||||
/>
|
||||
<LoginProviderButton
|
||||
variant="secondary"
|
||||
icon="google"
|
||||
label="다른 Google 계정 선택"
|
||||
subLabel={oauth.secondaryAccountLabel}
|
||||
<GoogleLoginButton
|
||||
subLabel={oauth.accountLabel}
|
||||
disabled={!oauth.ready}
|
||||
onClick={oauth.onStart}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -221,14 +221,6 @@
|
|||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.lg-obtn.secondary {
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
.lg-obtn.secondary:hover {
|
||||
border-color: color-mix(in srgb, var(--accent) 42%, var(--glass-inset-border));
|
||||
}
|
||||
|
||||
.lg-obtn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
|
|
@ -261,10 +253,6 @@
|
|||
color: var(--accent-deep);
|
||||
}
|
||||
|
||||
.lg-obtn.secondary .ic {
|
||||
background: var(--bg-surface-2);
|
||||
}
|
||||
|
||||
.lg-obtn .txt {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue