ulgerang/tutor-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: redesign login lobby, fix auth view transition timing

Browse Source
This commit is contained in:
user
2026-04-27 14:28:09 +09:00
parent c8e7b7f537
commit e8b2c64564
4 changed files with 111 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.gitignore vendored
View File

Binary file not shown.

25
internal/webapp/static/app.js
View File

@@ -364,28 +364,45 @@ function evidenceBlock(evidence = []) {
return `<section><h2>Evidence</h2><ul class="small-list">${evidence.map((item) => `<li>${escapeHTML(item.quote || item.id)}</li>`).join("")}</ul></section>`; return `<section><h2>Evidence</h2><ul class="small-list">${evidence.map((item) => `<li>${escapeHTML(item.quote || item.id)}</li>`).join("")}</ul></section>`;
} }
window.handleCredentialResponse = async (response) => { window._tutorGoogleCallback = async (response) => {
console.log("[auth] Google callback fired");
try { try {
const res = await request("/api/v1/auth/google", { const res = await request("/api/v1/auth/google", {
method: "POST", method: "POST",
body: JSON.stringify({ id_token: response.credential }), body: JSON.stringify({ id_token: response.credential }),
}); });
console.log("[auth] Backend login success", res.user?.email);
localStorage.setItem("tutor_token", res.token); localStorage.setItem("tutor_token", res.token);
localStorage.setItem("tutor_user", JSON.stringify(res.user)); localStorage.setItem("tutor_user", JSON.stringify(res.user));
if (els.loginError) {
els.loginError.textContent = "";
els.loginError.classList.remove("visible");
}
renderAuth(); renderAuth();
} catch (err) { } catch (err) {
if (els.loginError) els.loginError.textContent = err.message; console.error("[auth] Backend login failed", err);
if (els.loginError) {
els.loginError.textContent = err.message;
els.loginError.classList.add("visible");
}
} }
}; };
if (window._tutorPendingGoogleResponse) {
window._tutorGoogleCallback(window._tutorPendingGoogleResponse);
window._tutorPendingGoogleResponse = null;
}
function renderAuth() { function renderAuth() {
const user = JSON.parse(localStorage.getItem("tutor_user") || "null"); const user = JSON.parse(localStorage.getItem("tutor_user") || "null");
const token = localStorage.getItem("tutor_token"); const token = localStorage.getItem("tutor_token");
console.log("[auth] renderAuth", { hasUser: !!user, hasToken: !!token });
if (user && token) { if (user && token) {
els.loginView.style.display = "none"; els.loginView.style.display = "none";
els.workspaceView.style.display = "grid"; els.workspaceView.style.display = "grid";
els.userInfo.textContent = user.email; els.userInfo.textContent = user.email || user.name || "User";
setStatus(`Signed in as ${user.email}`); setStatus(`Signed in as ${user.email || user.name}`);
if (els.loginError) els.loginError.classList.remove("visible");
} else { } else {
els.loginView.style.display = "flex"; els.loginView.style.display = "flex";
els.workspaceView.style.display = "none"; els.workspaceView.style.display = "none";

15
internal/webapp/static/index.html
View File

@@ -7,6 +7,17 @@
<link rel="stylesheet" href="/assets/styles.css" /> <link rel="stylesheet" href="/assets/styles.css" />
</head> </head>
<body> <body>
<script>
window._tutorGoogleCallback = null;
window._tutorPendingGoogleResponse = null;
window.handleCredentialResponse = function(response) {
if (window._tutorGoogleCallback) {
window._tutorGoogleCallback(response);
} else {
window._tutorPendingGoogleResponse = response;
}
};
</script>
<script src="https://accounts.google.com/gsi/client" async defer></script> <script src="https://accounts.google.com/gsi/client" async defer></script>
<section id="login-view" class="login-view"> <section id="login-view" class="login-view">
@@ -14,11 +25,13 @@
<p class="eyebrow">Tutor Platform</p> <p class="eyebrow">Tutor Platform</p>
<h1>Interview practice</h1> <h1>Interview practice</h1>
<p class="lede">Prove you are becoming more interview-ready after each short practice loop.</p> <p class="lede">Prove you are becoming more interview-ready after each short practice loop.</p>
<div class="login-divider" data-label="Account"></div>
<div id="auth-area" class="auth-area"> <div id="auth-area" class="auth-area">
<div id="g_id_onload" data-client_id="13671390758-bp1ed6psn43bl86r8a9kv81o40nkea90.apps.googleusercontent.com" data-callback="handleCredentialResponse" data-auto_prompt="false"></div> <div id="g_id_onload" data-client_id="13671390758-bp1ed6psn43bl86r8a9kv81o40nkea90.apps.googleusercontent.com" data-callback="handleCredentialResponse" data-auto_prompt="false"></div>
<div class="g_id_signin" data-type="standard" data-size="large" data-theme="outline" data-text="sign_in_with" data-shape="rectangular" data-logo_alignment="left"></div> <div class="g_id_signin" data-type="standard" data-size="large" data-theme="outline" data-text="sign_in_with" data-shape="rectangular" data-logo_alignment="left"></div>
</div> </div>
<p id="login-error" class="error-line" role="alert"></p> <p id="login-error" class="login-error" role="alert"></p>
<p class="login-legal">By signing in, you agree to our <a href="#">Terms</a> and <a href="#">Privacy Policy</a>.</p>
</div> </div>
</section> </section>

85
internal/webapp/static/styles.css
View File

@@ -44,7 +44,7 @@ select {
} }
.workspace { .workspace {
display: grid; display: none;
grid-template-columns: minmax(260px, 320px) minmax(360px, 1fr) minmax(280px, 360px); grid-template-columns: minmax(260px, 320px) minmax(360px, 1fr) minmax(280px, 360px);
gap: 1px; gap: 1px;
min-height: 100vh; min-height: 100vh;
@@ -464,27 +464,94 @@ button.is-loading .btn-spinner {
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
padding: 28px; padding: 28px;
background: var(--bg); background: linear-gradient(160deg, #f5f7f4 0%, #e8efe5 100%);
} }
.login-card { .login-card {
background: var(--surface); background: var(--surface);
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 12px; border-radius: 18px;
padding: 44px 36px; padding: 52px 40px 44px;
max-width: 420px; max-width: 440px;
width: 100%; width: 100%;
text-align: center; text-align: center;
box-shadow: 0 12px 40px rgba(24, 32, 27, 0.07);
}
.login-card .eyebrow {
display: inline-block;
letter-spacing: 0.14em;
font-size: 11px;
text-transform: uppercase;
color: var(--accent);
font-weight: 750;
margin-bottom: 10px;
}
html[lang="ko"] .login-card .eyebrow {
text-transform: none;
letter-spacing: 0.04em;
} }
.login-card h1 { .login-card h1 {
font-size: clamp(32px, 5vw, 52px); font-size: clamp(34px, 5.5vw, 56px);
margin: 14px 0 18px; margin: 8px 0 18px;
line-height: 1.05;
} }
.login-card .lede { .login-card .lede {
margin: 0 auto 28px; margin: 0 auto 32px;
max-width: 34ch; max-width: 32ch;
color: var(--muted);
font-size: 15px;
line-height: 1.55;
}
.login-divider {
height: 1px;
background: var(--line);
margin: 28px 0 24px;
position: relative;
}
.login-divider::before {
content: attr(data-label);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--surface);
padding: 0 12px;
color: var(--muted);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.login-legal {
margin-top: 18px;
font-size: 12px;
color: var(--muted);
line-height: 1.5;
}
.login-legal a {
color: var(--muted);
text-decoration: underline;
text-underline-offset: 2px;
}
.login-error {
margin-top: 14px;
padding: 10px 14px;
border-radius: 8px;
background: var(--weak-bg);
color: var(--weak);
font-size: 13px;
display: none;
}
.login-error.visible {
display: block;
} }
.user-bar { .user-bar {