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

feat: separate login lobby from workspace

Browse Source
This commit is contained in:
user
2026-04-27 14:20:18 +09:00
parent 918fe04591
commit c8e7b7f537
3 changed files with 73 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,9 @@ const state = {
}; };
const els = { const els = {
loginView: document.querySelector("#login-view"),
workspaceView: document.querySelector("#workspace-view"),
loginError: document.querySelector("#login-error"),
sessionForm: document.querySelector("#session-form"), sessionForm: document.querySelector("#session-form"),
answerForm: document.querySelector("#answer-form"), answerForm: document.querySelector("#answer-form"),
answerText: document.querySelector("#answer-text"), answerText: document.querySelector("#answer-text"),
@@ -25,7 +28,6 @@ const els = {
status: document.querySelector("#status-line"), status: document.querySelector("#status-line"),
error: document.querySelector("#error-line"), error: document.querySelector("#error-line"),
title: document.querySelector("#session-title"), title: document.querySelector("#session-title"),
gSignIn: document.querySelector(".g_id_signin"),
userInfo: document.querySelector("#user-info"), userInfo: document.querySelector("#user-info"),
logoutButton: document.querySelector("#logout-button"), logoutButton: document.querySelector("#logout-button"),
}; };
@@ -370,10 +372,9 @@ window.handleCredentialResponse = async (response) => {
}); });
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));
setStatus(`Signed in as ${res.user.email}`);
renderAuth(); renderAuth();
} catch (err) { } catch (err) {
showError(err.message); if (els.loginError) els.loginError.textContent = err.message;
} }
}; };
@@ -381,14 +382,13 @@ 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");
if (user && token) { if (user && token) {
els.gSignIn.style.display = "none"; els.loginView.style.display = "none";
els.userInfo.style.display = "block"; els.workspaceView.style.display = "grid";
els.userInfo.textContent = user.email; els.userInfo.textContent = user.email;
els.logoutButton.style.display = "inline-block"; setStatus(`Signed in as ${user.email}`);
} else { } else {
els.gSignIn.style.display = "block"; els.loginView.style.display = "flex";
els.userInfo.style.display = "none"; els.workspaceView.style.display = "none";
els.logoutButton.style.display = "none";
} }
} }

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

@@ -8,17 +8,29 @@
</head> </head>
<body> <body>
<script src="https://accounts.google.com/gsi/client" async defer></script> <script src="https://accounts.google.com/gsi/client" async defer></script>
<main class="workspace">
<section id="login-view" class="login-view">
<div class="login-card">
<p class="eyebrow">Tutor Platform</p>
<h1>Interview practice</h1>
<p class="lede">Prove you are becoming more interview-ready after each short practice loop.</p>
<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 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>
<p id="login-error" class="error-line" role="alert"></p>
</div>
</section>
<main id="workspace-view" class="workspace" style="display:none;">
<aside class="setup-pane" aria-label="Diagnostic setup"> <aside class="setup-pane" aria-label="Diagnostic setup">
<p class="eyebrow">Tutor Platform</p> <p class="eyebrow">Tutor Platform</p>
<h1>Interview practice</h1> <h1>Interview practice</h1>
<p class="lede">Start a focused backend interview loop and turn one answer into evidence.</p> <p class="lede">Start a focused backend interview loop and turn one answer into evidence.</p>
<div id="auth-area" class="auth-area"> <div class="user-bar">
<div id="g_id_onload" data-client_id="13671390758-bp1ed6psn43bl86r8a9kv81o40nkea90.apps.googleusercontent.com" data-callback="handleCredentialResponse"></div> <div id="user-info" class="user-info"></div>
<div class="g_id_signin" data-type="standard"></div> <button id="logout-button" class="small-button" type="button">Sign out</button>
<div id="user-info" class="user-info" style="display:none;"></div>
<button id="logout-button" class="small-button" type="button" style="display:none;">Sign out</button>
</div> </div>
<form id="session-form" class="stacked-form"> <form id="session-form" class="stacked-form">

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

@@ -458,6 +458,52 @@ button.is-loading .btn-spinner {
color: var(--text); color: var(--text);
} }
.login-view {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 28px;
background: var(--bg);
}
.login-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 12px;
padding: 44px 36px;
max-width: 420px;
width: 100%;
text-align: center;
}
.login-card h1 {
font-size: clamp(32px, 5vw, 52px);
margin: 14px 0 18px;
}
.login-card .lede {
margin: 0 auto 28px;
max-width: 34ch;
}
.user-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
padding: 10px 12px;
background: var(--surface-muted);
border-radius: 6px;
}
.user-info {
font-size: 13px;
font-weight: 650;
color: var(--text);
}
@media (max-width: 980px) { @media (max-width: 980px) {
.workspace { .workspace {
grid-template-columns: 1fr; grid-template-columns: 1fr;