Compare commits

..

10 Commits

Author SHA1 Message Date
josh 035d4f0385 Merge pull request 'Rename AI Tycoon to Token Empire across entire codebase' (#10) from feature/auth-invites into main
Balance Check / balance-simulation (push) Successful in 41s
Balance Check / multi-run-balance (push) Successful in 14m22s
CI / build-and-push (push) Successful in 1m23s
Reviewed-on: #10
2026-04-27 21:08:36 -04:00
josh 5e4007160c Merge pull request 'Fix empty VITE_API_URL falling back to localhost in production' (#9) from feature/auth-invites into main
CI / build-and-push (push) Successful in 36s
Reviewed-on: #9
2026-04-27 20:51:19 -04:00
josh eca244f9d4 Merge pull request 'Fix double /api prefix causing invite gate bypass and broken API calls' (#8) from feature/auth-invites into main
CI / build-and-push (push) Successful in 37s
Reviewed-on: #8
2026-04-27 20:47:40 -04:00
josh 95b43dceec Merge pull request 'Fix health check 404: add /api/health route, remove nginx /health proxy' (#7) from feature/auth-invites into main
CI / build-and-push (push) Successful in 1m13s
Reviewed-on: #7
2026-04-27 20:29:51 -04:00
josh 01d9703aec Merge pull request 'Improve API error messages: show HTTP status, catch network errors' (#6) from feature/auth-invites into main
CI / build-and-push (push) Successful in 37s
Reviewed-on: #6
2026-04-27 20:14:13 -04:00
josh 8e5dca471e Merge pull request 'Add nginx reverse proxy for /api and /health to backend server' (#5) from feature/auth-invites into main
CI / build-and-push (push) Successful in 1m4s
Reviewed-on: #5
2026-04-27 20:00:16 -04:00
josh cc27c00991 Merge pull request 'Add backend health check, fetch timeouts, stale token cleanup, and error screen' (#4) from feature/auth-invites into main
CI / build-and-push (push) Successful in 39s
Reviewed-on: #4
2026-04-27 19:56:53 -04:00
josh c0965cb7d7 Merge pull request 'Add auto-migration on server startup' (#3) from feature/auth-invites into main
CI / build-and-push (push) Successful in 45s
Reviewed-on: #3
2026-04-27 19:43:38 -04:00
josh 5f7b728463 Merge pull request 'Fix Docker production build: move tsx to dependencies, reinstall in production stage' (#2) from feature/auth-invites into main
CI / build-and-push (push) Successful in 1m19s
Reviewed-on: #2
2026-04-27 19:34:39 -04:00
josh b0c552562a Merge pull request 'Add auth system with invite-only registration and admin roles' (#1) from feature/auth-invites into main
CI / build-and-push (push) Successful in 1m21s
Reviewed-on: #1
2026-04-27 19:26:15 -04:00
19 changed files with 44 additions and 964 deletions
@@ -1 +0,0 @@
ALTER TABLE "users" ADD COLUMN "token_version" integer DEFAULT 0 NOT NULL;
-477
View File
@@ -1,477 +0,0 @@
{
"id": "9324fe22-280a-4276-ace3-820f55654ec7",
"prevId": "8cfe4136-b228-464d-bf2c-e4f2e8c73ce1",
"version": "7",
"dialect": "postgresql",
"tables": {
"public.achievements": {
"name": "achievements",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "uuid",
"primaryKey": true,
"notNull": true,
"default": "gen_random_uuid()"
},
"user_id": {
"name": "user_id",
"type": "uuid",
"primaryKey": false,
"notNull": true
},
"achievement_id": {
"name": "achievement_id",
"type": "text",
"primaryKey": false,
"notNull": true
},
"unlocked_at": {
"name": "unlocked_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true,
"default": "now()"
}
},
"indexes": {
"achievements_user_id_idx": {
"name": "achievements_user_id_idx",
"columns": [
{
"expression": "user_id",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
}
},
"foreignKeys": {
"achievements_user_id_users_id_fk": {
"name": "achievements_user_id_users_id_fk",
"tableFrom": "achievements",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.invitations": {
"name": "invitations",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "uuid",
"primaryKey": true,
"notNull": true,
"default": "gen_random_uuid()"
},
"code": {
"name": "code",
"type": "text",
"primaryKey": false,
"notNull": true
},
"created_by": {
"name": "created_by",
"type": "uuid",
"primaryKey": false,
"notNull": true
},
"used_by": {
"name": "used_by",
"type": "uuid",
"primaryKey": false,
"notNull": false
},
"created_at": {
"name": "created_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true,
"default": "now()"
},
"expires_at": {
"name": "expires_at",
"type": "timestamp",
"primaryKey": false,
"notNull": false
}
},
"indexes": {},
"foreignKeys": {
"invitations_created_by_users_id_fk": {
"name": "invitations_created_by_users_id_fk",
"tableFrom": "invitations",
"tableTo": "users",
"columnsFrom": [
"created_by"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
},
"invitations_used_by_users_id_fk": {
"name": "invitations_used_by_users_id_fk",
"tableFrom": "invitations",
"tableTo": "users",
"columnsFrom": [
"used_by"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {
"invitations_code_unique": {
"name": "invitations_code_unique",
"nullsNotDistinct": false,
"columns": [
"code"
]
}
},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.leaderboard": {
"name": "leaderboard",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "uuid",
"primaryKey": true,
"notNull": true,
"default": "gen_random_uuid()"
},
"user_id": {
"name": "user_id",
"type": "uuid",
"primaryKey": false,
"notNull": true
},
"company_name": {
"name": "company_name",
"type": "text",
"primaryKey": false,
"notNull": true
},
"category": {
"name": "category",
"type": "text",
"primaryKey": false,
"notNull": true
},
"score": {
"name": "score",
"type": "integer",
"primaryKey": false,
"notNull": true
},
"era": {
"name": "era",
"type": "text",
"primaryKey": false,
"notNull": true
},
"tick_count": {
"name": "tick_count",
"type": "integer",
"primaryKey": false,
"notNull": true
},
"submitted_at": {
"name": "submitted_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true,
"default": "now()"
}
},
"indexes": {
"leaderboard_category_score_idx": {
"name": "leaderboard_category_score_idx",
"columns": [
{
"expression": "category",
"isExpression": false,
"asc": true,
"nulls": "last"
},
{
"expression": "score",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
}
},
"foreignKeys": {
"leaderboard_user_id_users_id_fk": {
"name": "leaderboard_user_id_users_id_fk",
"tableFrom": "leaderboard",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.saves": {
"name": "saves",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "uuid",
"primaryKey": true,
"notNull": true,
"default": "gen_random_uuid()"
},
"user_id": {
"name": "user_id",
"type": "uuid",
"primaryKey": false,
"notNull": true
},
"company_name": {
"name": "company_name",
"type": "text",
"primaryKey": false,
"notNull": true
},
"save_version": {
"name": "save_version",
"type": "integer",
"primaryKey": false,
"notNull": true
},
"game_data": {
"name": "game_data",
"type": "jsonb",
"primaryKey": false,
"notNull": true
},
"tick_count": {
"name": "tick_count",
"type": "integer",
"primaryKey": false,
"notNull": true,
"default": 0
},
"era": {
"name": "era",
"type": "text",
"primaryKey": false,
"notNull": true,
"default": "'startup'"
},
"created_at": {
"name": "created_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true,
"default": "now()"
},
"updated_at": {
"name": "updated_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true,
"default": "now()"
}
},
"indexes": {
"saves_user_id_idx": {
"name": "saves_user_id_idx",
"columns": [
{
"expression": "user_id",
"isExpression": false,
"asc": true,
"nulls": "last"
}
],
"isUnique": false,
"concurrently": false,
"method": "btree",
"with": {}
}
},
"foreignKeys": {
"saves_user_id_users_id_fk": {
"name": "saves_user_id_users_id_fk",
"tableFrom": "saves",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"onDelete": "no action",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
},
"public.users": {
"name": "users",
"schema": "",
"columns": {
"id": {
"name": "id",
"type": "uuid",
"primaryKey": true,
"notNull": true,
"default": "gen_random_uuid()"
},
"anon_token": {
"name": "anon_token",
"type": "uuid",
"primaryKey": false,
"notNull": true,
"default": "gen_random_uuid()"
},
"username": {
"name": "username",
"type": "text",
"primaryKey": false,
"notNull": false
},
"email": {
"name": "email",
"type": "text",
"primaryKey": false,
"notNull": false
},
"password_hash": {
"name": "password_hash",
"type": "text",
"primaryKey": false,
"notNull": false
},
"role": {
"name": "role",
"type": "text",
"primaryKey": false,
"notNull": true,
"default": "'user'"
},
"must_reset_password": {
"name": "must_reset_password",
"type": "boolean",
"primaryKey": false,
"notNull": true,
"default": false
},
"token_version": {
"name": "token_version",
"type": "integer",
"primaryKey": false,
"notNull": true,
"default": 0
},
"created_at": {
"name": "created_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true,
"default": "now()"
},
"last_seen_at": {
"name": "last_seen_at",
"type": "timestamp",
"primaryKey": false,
"notNull": true,
"default": "now()"
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {
"users_anon_token_unique": {
"name": "users_anon_token_unique",
"nullsNotDistinct": false,
"columns": [
"anon_token"
]
},
"users_username_unique": {
"name": "users_username_unique",
"nullsNotDistinct": false,
"columns": [
"username"
]
},
"users_email_unique": {
"name": "users_email_unique",
"nullsNotDistinct": false,
"columns": [
"email"
]
}
},
"policies": {},
"checkConstraints": {},
"isRLSEnabled": false
}
},
"enums": {},
"schemas": {},
"sequences": {},
"roles": {},
"policies": {},
"views": {},
"_meta": {
"columns": {},
"schemas": {},
"tables": {}
}
}
-7
View File
@@ -8,13 +8,6 @@
"when": 1777333216602, "when": 1777333216602,
"tag": "0000_tearful_hedge_knight", "tag": "0000_tearful_hedge_knight",
"breakpoints": true "breakpoints": true
},
{
"idx": 1,
"version": "7",
"when": 1777417629552,
"tag": "0001_certain_aaron_stack",
"breakpoints": true
} }
] ]
} }
-1
View File
@@ -8,7 +8,6 @@ export const users = pgTable('users', {
passwordHash: text('password_hash'), passwordHash: text('password_hash'),
role: text('role').notNull().default('user'), role: text('role').notNull().default('user'),
mustResetPassword: boolean('must_reset_password').notNull().default(false), mustResetPassword: boolean('must_reset_password').notNull().default(false),
tokenVersion: integer('token_version').notNull().default(0),
createdAt: timestamp('created_at').defaultNow().notNull(), createdAt: timestamp('created_at').defaultNow().notNull(),
lastSeenAt: timestamp('last_seen_at').defaultNow().notNull(), lastSeenAt: timestamp('last_seen_at').defaultNow().notNull(),
}); });
+1 -1
View File
@@ -7,7 +7,7 @@ export async function seedAdmin() {
const [existing] = await db const [existing] = await db
.select() .select()
.from(users) .from(users)
.where(eq(users.role, 'admin')) .where(eq(users.username, 'admin'))
.limit(1); .limit(1);
if (existing) { if (existing) {
+1 -4
View File
@@ -14,11 +14,10 @@ export async function createToken(
role: string, role: string,
username: string | null, username: string | null,
mustResetPassword: boolean, mustResetPassword: boolean,
tokenVersion: number = 0,
): Promise<string> { ): Promise<string> {
const now = Math.floor(Date.now() / 1000); const now = Math.floor(Date.now() / 1000);
return sign( return sign(
{ sub: userId, email, role, username, mustResetPassword, tokenVersion, iat: now, exp: now + JWT_EXPIRY_SECONDS }, { sub: userId, email, role, username, mustResetPassword, iat: now, exp: now + JWT_EXPIRY_SECONDS },
getJwtSecret(), getJwtSecret(),
); );
} }
@@ -29,7 +28,6 @@ export async function verifyToken(token: string): Promise<{
role: string; role: string;
username: string | null; username: string | null;
mustResetPassword: boolean; mustResetPassword: boolean;
tokenVersion: number;
}> { }> {
const payload = await verify(token, getJwtSecret(), 'HS256'); const payload = await verify(token, getJwtSecret(), 'HS256');
return { return {
@@ -38,6 +36,5 @@ export async function verifyToken(token: string): Promise<{
role: (payload.role as string) ?? 'user', role: (payload.role as string) ?? 'user',
username: (payload.username as string) ?? null, username: (payload.username as string) ?? null,
mustResetPassword: (payload.mustResetPassword as boolean) ?? false, mustResetPassword: (payload.mustResetPassword as boolean) ?? false,
tokenVersion: (payload.tokenVersion as number) ?? 0,
}; };
} }
-5
View File
@@ -27,10 +27,6 @@ export const authMiddleware = createMiddleware<AppEnv>(async (c, next) => {
return c.json({ error: 'Invalid token' }, 401); return c.json({ error: 'Invalid token' }, 401);
} }
if (payload.tokenVersion !== user.tokenVersion) {
return c.json({ error: 'Token has been revoked' }, 401);
}
await db await db
.update(users) .update(users)
.set({ lastSeenAt: new Date() }) .set({ lastSeenAt: new Date() })
@@ -44,7 +40,6 @@ export const authMiddleware = createMiddleware<AppEnv>(async (c, next) => {
email: user.email, email: user.email,
role: user.role, role: user.role,
mustResetPassword: user.mustResetPassword, mustResetPassword: user.mustResetPassword,
tokenVersion: user.tokenVersion,
}); });
await next(); await next();
} catch { } catch {
+11 -87
View File
@@ -1,5 +1,5 @@
import { Hono } from 'hono'; import { Hono } from 'hono';
import { eq, or, sql } from 'drizzle-orm'; import { eq, or } from 'drizzle-orm';
import bcrypt from 'bcryptjs'; import bcrypt from 'bcryptjs';
import { db } from '../db'; import { db } from '../db';
import { users } from '../db/schema'; import { users } from '../db/schema';
@@ -15,7 +15,7 @@ auth.post('/anonymous', async (c) => {
.values({}) .values({})
.returning(); .returning();
const token = await createToken(user.id, null, 'user', null, false, 0); const token = await createToken(user.id, null, 'user', null, false);
return c.json({ userId: user.id, token }); return c.json({ userId: user.id, token });
}); });
@@ -80,7 +80,7 @@ auth.post('/register', authMiddleware, async (c) => {
.where(eq(users.id, userId)) .where(eq(users.id, userId))
.returning(); .returning();
const token = await createToken(updated.id, updated.email, updated.role, updated.username, false, updated.tokenVersion); const token = await createToken(updated.id, updated.email, updated.role, updated.username, false);
return c.json({ userId: updated.id, token }); return c.json({ userId: updated.id, token });
}); });
@@ -106,7 +106,7 @@ auth.post('/login', async (c) => {
return c.json({ error: 'Invalid credentials' }, 401); return c.json({ error: 'Invalid credentials' }, 401);
} }
const token = await createToken(user.id, user.email, user.role, user.username, user.mustResetPassword, user.tokenVersion); const token = await createToken(user.id, user.email, user.role, user.username, user.mustResetPassword);
return c.json({ userId: user.id, token }); return c.json({ userId: user.id, token });
}); });
@@ -141,20 +141,19 @@ auth.post('/change-password', authMiddleware, async (c) => {
} }
const passwordHash = await bcrypt.hash(newPassword, 10); const passwordHash = await bcrypt.hash(newPassword, 10);
const [updated] = await db await db
.update(users) .update(users)
.set({ passwordHash, mustResetPassword: false, tokenVersion: sql`${users.tokenVersion} + 1` }) .set({ passwordHash, mustResetPassword: false })
.where(eq(users.id, user.id)) .where(eq(users.id, user.id));
.returning({ tokenVersion: users.tokenVersion });
const token = await createToken(user.id, user.email, user.role, user.username, false, updated.tokenVersion); const token = await createToken(user.id, user.email, user.role, user.username, false);
return c.json({ success: true, token }); return c.json({ success: true, token });
}); });
auth.post('/change-username', authMiddleware, async (c) => { auth.post('/change-username', authMiddleware, async (c) => {
const user = c.get('user'); const user = c.get('user');
if (!user.email && user.role !== 'admin') { if (user.role !== 'admin') {
return c.json({ error: 'Must be registered to change username' }, 403); return c.json({ error: 'Forbidden' }, 403);
} }
const { username } = await c.req.json<{ username: string }>(); const { username } = await c.req.json<{ username: string }>();
@@ -177,83 +176,8 @@ auth.post('/change-username', authMiddleware, async (c) => {
.set({ username }) .set({ username })
.where(eq(users.id, user.id)); .where(eq(users.id, user.id));
const token = await createToken(user.id, user.email, user.role, username, user.mustResetPassword, user.tokenVersion); const token = await createToken(user.id, user.email, user.role, username, user.mustResetPassword);
return c.json({ success: true, token }); return c.json({ success: true, token });
}); });
auth.post('/change-email', authMiddleware, async (c) => {
const user = c.get('user');
if (!user.email && user.role !== 'admin') {
return c.json({ error: 'Must be registered to change email' }, 403);
}
const { email, currentPassword } = await c.req.json<{
email: string;
currentPassword: string;
}>();
if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
return c.json({ error: 'Valid email required' }, 400);
}
if (!currentPassword) {
return c.json({ error: 'Current password required' }, 400);
}
const [dbUser] = await db
.select({ passwordHash: users.passwordHash })
.from(users)
.where(eq(users.id, user.id))
.limit(1);
if (!dbUser?.passwordHash) {
return c.json({ error: 'No password set' }, 400);
}
const valid = await bcrypt.compare(currentPassword, dbUser.passwordHash);
if (!valid) {
return c.json({ error: 'Current password is incorrect' }, 401);
}
const existing = await db
.select()
.from(users)
.where(eq(users.email, email))
.limit(1);
if (existing.length > 0 && existing[0].id !== user.id) {
return c.json({ error: 'Email already in use' }, 409);
}
await db
.update(users)
.set({ email })
.where(eq(users.id, user.id));
const token = await createToken(user.id, email, user.role, user.username, user.mustResetPassword, user.tokenVersion);
return c.json({ success: true, token });
});
auth.post('/logout', authMiddleware, async (c) => {
const user = c.get('user');
await db
.update(users)
.set({ tokenVersion: sql`${users.tokenVersion} + 1` })
.where(eq(users.id, user.id));
return c.json({ success: true });
});
auth.get('/me', authMiddleware, async (c) => {
const user = c.get('user');
return c.json({
id: user.id,
username: user.username,
email: user.email,
role: user.role,
});
});
export { auth }; export { auth };
-22
View File
@@ -141,26 +141,4 @@ invitesRouter.get('/', authMiddleware, requireAdmin, async (c) => {
return c.json({ invitations: enriched }); return c.json({ invitations: enriched });
}); });
invitesRouter.delete('/:id', authMiddleware, requireAdmin, async (c) => {
const inviteId = c.req.param('id');
const [invite] = await db
.select({ id: invitations.id, usedBy: invitations.usedBy })
.from(invitations)
.where(eq(invitations.id, inviteId))
.limit(1);
if (!invite) {
return c.json({ error: 'Invitation not found' }, 404);
}
if (invite.usedBy) {
return c.json({ error: 'Cannot revoke a used invitation' }, 400);
}
await db.delete(invitations).where(eq(invitations.id, inviteId));
return c.json({ deleted: true });
});
export { invitesRouter }; export { invitesRouter };
-13
View File
@@ -28,19 +28,6 @@ savesRouter.get('/', async (c) => {
return c.json({ saves: userSaves }); return c.json({ saves: userSaves });
}); });
savesRouter.get('/latest', async (c) => {
const userId = c.get('userId') as string;
const [save] = await db
.select()
.from(saves)
.where(eq(saves.userId, userId))
.orderBy(desc(saves.updatedAt))
.limit(1);
return c.json({ save: save ?? null });
});
savesRouter.get('/:id', async (c) => { savesRouter.get('/:id', async (c) => {
const userId = c.get('userId') as string; const userId = c.get('userId') as string;
const saveId = c.req.param('id'); const saveId = c.req.param('id');
-1
View File
@@ -8,7 +8,6 @@ export type AppEnv = {
email: string | null; email: string | null;
role: string; role: string;
mustResetPassword: boolean; mustResetPassword: boolean;
tokenVersion: number;
}; };
}; };
}; };
+2 -4
View File
@@ -6,7 +6,6 @@ import { OfflineCatchUp } from '@/components/game/OfflineCatchUp';
import { InviteGateScreen } from '@/components/game/InviteGateScreen'; import { InviteGateScreen } from '@/components/game/InviteGateScreen';
import { useGameLoop } from '@/hooks/useGameLoop'; import { useGameLoop } from '@/hooks/useGameLoop';
import { useAuthGate } from '@/hooks/useAuthGate'; import { useAuthGate } from '@/hooks/useAuthGate';
import { useCloudSave } from '@/hooks/useCloudSave';
import { TICK_INTERVAL_MS } from '@token-empire/shared'; import { TICK_INTERVAL_MS } from '@token-empire/shared';
import { Sparkles, RefreshCw, WifiOff } from 'lucide-react'; import { Sparkles, RefreshCw, WifiOff } from 'lucide-react';
@@ -54,7 +53,7 @@ function BackendErrorScreen({ error, onRetry }: { error: string; onRetry: () =>
} }
export function App() { export function App() {
const { loading: authLoading, backendError, needsInvite, needsPasswordReset, cloudSave, loadCloudSave, setRegistered, setNeedsPasswordReset, retry } = useAuthGate(); const { loading: authLoading, backendError, needsInvite, needsPasswordReset, setRegistered, setNeedsPasswordReset, retry } = useAuthGate();
const companyName = useGameStore((s) => s.meta.companyName); const companyName = useGameStore((s) => s.meta.companyName);
const lastTickTimestamp = useGameStore((s) => s.meta.lastTickTimestamp); const lastTickTimestamp = useGameStore((s) => s.meta.lastTickTimestamp);
const [catchUpTicks, setCatchUpTicks] = useState<number | null>(null); const [catchUpTicks, setCatchUpTicks] = useState<number | null>(null);
@@ -72,7 +71,6 @@ export function App() {
}, [companyName, lastTickTimestamp, catchUpDone]); }, [companyName, lastTickTimestamp, catchUpDone]);
useGameLoop(!catchUpDone || authLoading || !!backendError || needsInvite || needsPasswordReset); useGameLoop(!catchUpDone || authLoading || !!backendError || needsInvite || needsPasswordReset);
useCloudSave();
if (authLoading) { if (authLoading) {
return <LoadingScreen />; return <LoadingScreen />;
@@ -94,7 +92,7 @@ export function App() {
} }
if (!companyName) { if (!companyName) {
return <NewGameScreen cloudSave={cloudSave} onContinue={loadCloudSave} />; return <NewGameScreen />;
} }
if (catchUpTicks !== null && !catchUpDone) { if (catchUpTicks !== null && !catchUpDone) {
+3 -68
View File
@@ -1,7 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import { Sparkles, Cloud, Play } from 'lucide-react'; import { Sparkles } from 'lucide-react';
import { useGameStore } from '@/store'; import { useGameStore } from '@/store';
import type { CloudSaveInfo } from '@/hooks/useAuthGate';
const SUGGESTED_NAMES = [ const SUGGESTED_NAMES = [
'Nexus AI', 'Cortex Labs', 'Synapse Technologies', 'Nexus AI', 'Cortex Labs', 'Synapse Technologies',
@@ -9,32 +8,8 @@ const SUGGESTED_NAMES = [
'Neural Forge', 'DeepMind+', 'Cerebral Systems', 'Neural Forge', 'DeepMind+', 'Cerebral Systems',
]; ];
const ERA_LABELS: Record<string, string> = { export function NewGameScreen() {
startup: 'Startup',
scaleup: 'Scale-Up',
bigtech: 'Big Tech',
agi: 'AGI',
};
function formatTimeAgo(dateStr: string): string {
const diff = Date.now() - new Date(dateStr).getTime();
const minutes = Math.floor(diff / 60_000);
if (minutes < 1) return 'just now';
if (minutes < 60) return `${minutes}m ago`;
const hours = Math.floor(minutes / 60);
if (hours < 24) return `${hours}h ago`;
const days = Math.floor(hours / 24);
return `${days}d ago`;
}
interface Props {
cloudSave?: CloudSaveInfo | null;
onContinue?: () => Promise<void>;
}
export function NewGameScreen({ cloudSave, onContinue }: Props) {
const [name, setName] = useState(''); const [name, setName] = useState('');
const [loading, setLoading] = useState(false);
const startNewGame = useGameStore((s) => s.startNewGame); const startNewGame = useGameStore((s) => s.startNewGame);
const handleStart = () => { const handleStart = () => {
@@ -42,16 +17,6 @@ export function NewGameScreen({ cloudSave, onContinue }: Props) {
startNewGame(companyName); startNewGame(companyName);
}; };
const handleContinue = async () => {
if (!onContinue) return;
setLoading(true);
try {
await onContinue();
} finally {
setLoading(false);
}
};
return ( return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-surface-950 to-surface-900"> <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-surface-950 to-surface-900">
<div className="max-w-md w-full mx-4"> <div className="max-w-md w-full mx-4">
@@ -67,37 +32,7 @@ export function NewGameScreen({ cloudSave, onContinue }: Props) {
</p> </p>
</div> </div>
{cloudSave && onContinue && (
<div className="bg-surface-900 border border-accent/30 rounded-xl p-6 mb-4 space-y-4">
<div className="flex items-center gap-2 text-accent-light">
<Cloud size={18} />
<h3 className="font-semibold text-sm">Continue Your Game</h3>
</div>
<div className="space-y-1">
<div className="text-lg font-semibold text-surface-100">{cloudSave.companyName}</div>
<div className="flex items-center gap-3 text-xs text-surface-400">
<span className="px-2 py-0.5 rounded-full bg-surface-800 border border-surface-700">
{ERA_LABELS[cloudSave.era] ?? cloudSave.era}
</span>
<span>Tick {cloudSave.tickCount.toLocaleString()}</span>
<span>Saved {formatTimeAgo(cloudSave.updatedAt)}</span>
</div>
</div>
<button
onClick={handleContinue}
disabled={loading}
className="w-full inline-flex items-center justify-center gap-2 bg-accent hover:bg-accent-dark text-white font-semibold py-3 rounded-lg transition-colors disabled:opacity-50"
>
<Play size={16} />
{loading ? 'Loading...' : 'Continue'}
</button>
</div>
)}
<div className="bg-surface-900 border border-surface-700 rounded-xl p-6 space-y-6"> <div className="bg-surface-900 border border-surface-700 rounded-xl p-6 space-y-6">
{cloudSave && onContinue && (
<div className="text-xs text-surface-500 uppercase tracking-wider font-medium">Or start fresh</div>
)}
<div> <div>
<label className="block text-sm font-medium text-surface-300 mb-2"> <label className="block text-sm font-medium text-surface-300 mb-2">
Name your AI company Name your AI company
@@ -109,7 +44,7 @@ export function NewGameScreen({ cloudSave, onContinue }: Props) {
onKeyDown={(e) => e.key === 'Enter' && handleStart()} onKeyDown={(e) => e.key === 'Enter' && handleStart()}
placeholder={SUGGESTED_NAMES[0]} placeholder={SUGGESTED_NAMES[0]}
className="w-full bg-surface-800 border border-surface-600 rounded-lg px-4 py-3 text-surface-100 placeholder:text-surface-500 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent" className="w-full bg-surface-800 border border-surface-600 rounded-lg px-4 py-3 text-surface-100 placeholder:text-surface-500 focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent"
autoFocus={!cloudSave} autoFocus
maxLength={30} maxLength={30}
/> />
</div> </div>
+1 -6
View File
@@ -5,7 +5,7 @@ import {
PanelLeftClose, PanelLeftOpen, Mail, UserPlus, Copy, Check, PanelLeftClose, PanelLeftOpen, Mail, UserPlus, Copy, Check,
} from 'lucide-react'; } from 'lucide-react';
import { useGameStore, type ActivePage } from '@/store'; import { useGameStore, type ActivePage } from '@/store';
import { isAdmin as checkIsAdmin, isRegistered as checkIsRegistered, getTokenPayload, api } from '@/lib/api'; import { isAdmin as checkIsAdmin, isRegistered as checkIsRegistered, api } from '@/lib/api';
const NAV_ITEMS: { page: ActivePage; label: string; icon: typeof LayoutDashboard; era?: string; adminOnly?: boolean }[] = [ const NAV_ITEMS: { page: ActivePage; label: string; icon: typeof LayoutDashboard; era?: string; adminOnly?: boolean }[] = [
{ page: 'dashboard', label: 'Dashboard', icon: LayoutDashboard }, { page: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
@@ -166,11 +166,6 @@ export function Sidebar() {
)} )}
<div className={`${collapsed ? 'px-2 py-3 text-center' : 'p-4'} border-t border-surface-700 text-xs text-surface-500`}> <div className={`${collapsed ? 'px-2 py-3 text-center' : 'p-4'} border-t border-surface-700 text-xs text-surface-500`}>
{!collapsed && (() => {
const payload = getTokenPayload();
const displayName = payload?.username || payload?.email || 'Guest';
return <div className="truncate mb-1 text-surface-400">{displayName}</div>;
})()}
{collapsed ? 'v0.1' : 'Token Empire v0.1'} {collapsed ? 'v0.1' : 'Token Empire v0.1'}
</div> </div>
</aside> </aside>
+1 -48
View File
@@ -1,16 +1,7 @@
import { useState, useCallback } from 'react'; import { useState, useCallback } from 'react';
import { api, getTokenPayload, isRegistered as checkRegistered, needsPasswordReset as checkNeedsReset, validateStoredToken } from '@/lib/api'; import { api, getTokenPayload, isRegistered as checkRegistered, needsPasswordReset as checkNeedsReset, validateStoredToken } from '@/lib/api';
import { useGameStore } from '@/store';
import { ensureAuth } from './useCloudSave'; import { ensureAuth } from './useCloudSave';
export interface CloudSaveInfo {
id: string;
companyName: string;
era: string;
tickCount: number;
updatedAt: string;
}
interface AuthGateState { interface AuthGateState {
loading: boolean; loading: boolean;
backendError: string | null; backendError: string | null;
@@ -19,8 +10,6 @@ interface AuthGateState {
registered: boolean; registered: boolean;
isAdmin: boolean; isAdmin: boolean;
config: { requireInvite: boolean; userInvitations: number } | null; config: { requireInvite: boolean; userInvitations: number } | null;
cloudSave: CloudSaveInfo | null;
loadCloudSave: () => Promise<void>;
setRegistered: (value: boolean) => void; setRegistered: (value: boolean) => void;
setNeedsPasswordReset: (value: boolean) => void; setNeedsPasswordReset: (value: boolean) => void;
retry: () => void; retry: () => void;
@@ -33,7 +22,6 @@ export function useAuthGate(): AuthGateState {
const [registered, setRegistered] = useState(false); const [registered, setRegistered] = useState(false);
const [passwordReset, setPasswordReset] = useState(false); const [passwordReset, setPasswordReset] = useState(false);
const [admin, setAdmin] = useState(false); const [admin, setAdmin] = useState(false);
const [cloudSave, setCloudSave] = useState<CloudSaveInfo | null>(null);
const [initCount, setInitCount] = useState(0); const [initCount, setInitCount] = useState(0);
const init = useCallback(async () => { const init = useCallback(async () => {
@@ -64,30 +52,9 @@ export function useAuthGate(): AuthGateState {
} }
const payload = getTokenPayload(); const payload = getTokenPayload();
const isReg = checkRegistered(); setRegistered(checkRegistered());
setRegistered(isReg);
setPasswordReset(checkNeedsReset()); setPasswordReset(checkNeedsReset());
setAdmin(payload?.role === 'admin'); setAdmin(payload?.role === 'admin');
if (isReg) {
try {
const { save } = await api.saves.latest();
if (save && save.tickCount > 0) {
setCloudSave({
id: save.id,
companyName: save.companyName,
era: save.era,
tickCount: save.tickCount,
updatedAt: save.updatedAt,
});
} else {
setCloudSave(null);
}
} catch {
setCloudSave(null);
}
}
setLoading(false); setLoading(false);
}, []); }, []);
@@ -99,18 +66,6 @@ export function useAuthGate(): AuthGateState {
init(); init();
}, [init]); }, [init]);
const loadCloudSave = useCallback(async () => {
try {
const { save } = await api.saves.latest();
if (save?.gameData) {
const gameData = save.gameData as Record<string, unknown>;
useGameStore.setState(gameData);
}
} catch {
// Fall through to new game if cloud load fails
}
}, []);
const handleSetRegistered = useCallback((value: boolean) => { const handleSetRegistered = useCallback((value: boolean) => {
setRegistered(value); setRegistered(value);
const payload = getTokenPayload(); const payload = getTokenPayload();
@@ -134,8 +89,6 @@ export function useAuthGate(): AuthGateState {
registered, registered,
isAdmin: admin, isAdmin: admin,
config, config,
cloudSave,
loadCloudSave,
setRegistered: handleSetRegistered, setRegistered: handleSetRegistered,
setNeedsPasswordReset: handleSetPasswordReset, setNeedsPasswordReset: handleSetPasswordReset,
retry, retry,
+3 -20
View File
@@ -3,27 +3,22 @@ import { useGameStore } from '@/store';
import { api, getAuthToken, setAuthToken, clearAuthToken, decodeTokenPayload } from '@/lib/api'; import { api, getAuthToken, setAuthToken, clearAuthToken, decodeTokenPayload } from '@/lib/api';
import { AUTO_SAVE_INTERVAL_TICKS } from '@token-empire/shared'; import { AUTO_SAVE_INTERVAL_TICKS } from '@token-empire/shared';
const MAX_CONSECUTIVE_FAILURES = 3;
export function useCloudSave() { export function useCloudSave() {
const tickCount = useGameStore((s) => s.meta.tickCount); const tickCount = useGameStore((s) => s.meta.tickCount);
const companyName = useGameStore((s) => s.meta.companyName); const companyName = useGameStore((s) => s.meta.companyName);
const lastSaveTick = useRef(0); const lastSaveTick = useRef(0);
const failureCount = useRef(0);
useEffect(() => { useEffect(() => {
if (!companyName) return; if (!companyName) return;
if (tickCount - lastSaveTick.current < AUTO_SAVE_INTERVAL_TICKS) return; if (tickCount - lastSaveTick.current < AUTO_SAVE_INTERVAL_TICKS * 5) return;
const token = getAuthToken(); const token = getAuthToken();
if (!token) return; if (!token) return;
if (failureCount.current >= MAX_CONSECUTIVE_FAILURES) return;
lastSaveTick.current = tickCount; lastSaveTick.current = tickCount;
const state = useGameStore.getState(); const state = useGameStore.getState();
const { activePage, notifications, infraNav, modelsTab, ...gameState } = state; const { activePage, notifications, ...gameState } = state;
api.saves.put({ api.saves.put({
companyName: state.meta.companyName, companyName: state.meta.companyName,
@@ -31,19 +26,7 @@ export function useCloudSave() {
gameData: gameState, gameData: gameState,
tickCount: state.meta.tickCount, tickCount: state.meta.tickCount,
era: state.meta.currentEra, era: state.meta.currentEra,
}).then(() => { }).catch(() => {});
failureCount.current = 0;
}).catch(() => {
failureCount.current++;
if (failureCount.current === MAX_CONSECUTIVE_FAILURES) {
useGameStore.getState().addNotification({
title: 'Cloud Save Failed',
message: 'Unable to save to cloud. Your progress is still saved locally.',
type: 'danger',
tick: useGameStore.getState().meta.tickCount,
});
}
});
}, [tickCount, companyName]); }, [tickCount, companyName]);
} }
-19
View File
@@ -14,7 +14,6 @@ export function getAuthToken() {
export function clearAuthToken() { export function clearAuthToken() {
authToken = null; authToken = null;
localStorage.removeItem('token-empire-auth-token'); localStorage.removeItem('token-empire-auth-token');
localStorage.removeItem('token-empire-refresh-token');
} }
export interface TokenPayload { export interface TokenPayload {
@@ -64,8 +63,6 @@ export function needsPasswordReset(): boolean {
return payload?.mustResetPassword === true; return payload?.mustResetPassword === true;
} }
const AUTH_PATHS = ['/api/auth/anonymous', '/api/auth/login', '/api/auth/logout', '/api/health'];
async function request<T>(path: string, options: RequestInit & { timeoutMs?: number } = {}): Promise<T> { async function request<T>(path: string, options: RequestInit & { timeoutMs?: number } = {}): Promise<T> {
const { timeoutMs = 10_000, ...fetchOptions } = options; const { timeoutMs = 10_000, ...fetchOptions } = options;
@@ -89,11 +86,6 @@ async function request<T>(path: string, options: RequestInit & { timeoutMs?: num
}); });
if (!res.ok) { if (!res.ok) {
if (res.status === 401 && authToken && !AUTH_PATHS.includes(path)) {
clearAuthToken();
localStorage.removeItem('token-empire-save');
window.location.reload();
}
const body = await res.json().catch(() => null); const body = await res.json().catch(() => null);
throw new Error(body?.error || `HTTP ${res.status} ${res.statusText}`); throw new Error(body?.error || `HTTP ${res.status} ${res.statusText}`);
} }
@@ -143,15 +135,6 @@ export const api = {
method: 'POST', method: 'POST',
body: JSON.stringify({ username }), body: JSON.stringify({ username }),
}), }),
changeEmail: (email: string, currentPassword: string) =>
request<{ success: boolean; token: string }>('/api/auth/change-email', {
method: 'POST',
body: JSON.stringify({ email, currentPassword }),
}),
logout: () =>
request<{ success: boolean }>('/api/auth/logout', { method: 'POST' }),
me: () =>
request<{ id: string; username: string | null; email: string | null; role: string }>('/api/auth/me'),
}, },
config: { config: {
get: () => request<{ requireInvite: boolean; userInvitations: number }>('/api/config'), get: () => request<{ requireInvite: boolean; userInvitations: number }>('/api/config'),
@@ -171,12 +154,10 @@ export const api = {
}>; }>;
}>('/api/invites'), }>('/api/invites'),
remaining: () => request<{ remaining: number }>('/api/invites/remaining'), remaining: () => request<{ remaining: number }>('/api/invites/remaining'),
revoke: (id: string) => request<{ deleted: boolean }>(`/api/invites/${id}`, { method: 'DELETE' }),
}, },
saves: { saves: {
list: () => request<{ saves: Array<{ id: string; companyName: string; era: string; tickCount: number; updatedAt: string }> }>('/api/saves'), list: () => request<{ saves: Array<{ id: string; companyName: string; era: string; tickCount: number; updatedAt: string }> }>('/api/saves'),
get: (id: string) => request<{ save: { id: string; gameData: unknown } }>(`/api/saves/${id}`), get: (id: string) => request<{ save: { id: string; gameData: unknown } }>(`/api/saves/${id}`),
latest: () => request<{ save: { id: string; companyName: string; era: string; tickCount: number; updatedAt: string; gameData: unknown } | null }>('/api/saves/latest'),
put: (data: { companyName: string; saveVersion: number; gameData: unknown; tickCount: number; era: string }) => put: (data: { companyName: string; saveVersion: number; gameData: unknown; tickCount: number; era: string }) =>
request<{ id: string }>('/api/saves', { method: 'PUT', body: JSON.stringify(data) }), request<{ id: string }>('/api/saves', { method: 'PUT', body: JSON.stringify(data) }),
delete: (id: string) => request<{ deleted: boolean }>(`/api/saves/${id}`, { method: 'DELETE' }), delete: (id: string) => request<{ deleted: boolean }>(`/api/saves/${id}`, { method: 'DELETE' }),
+9 -32
View File
@@ -1,5 +1,5 @@
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect, useCallback } from 'react';
import { Copy, Check, Plus, RefreshCw, Trash2 } from 'lucide-react'; import { Copy, Check, Plus, RefreshCw } from 'lucide-react';
import { api } from '@/lib/api'; import { api } from '@/lib/api';
interface Invitation { interface Invitation {
@@ -31,7 +31,6 @@ export function InvitationsPage() {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [generating, setGenerating] = useState(false); const [generating, setGenerating] = useState(false);
const [copiedCode, setCopiedCode] = useState<string | null>(null); const [copiedCode, setCopiedCode] = useState<string | null>(null);
const [revoking, setRevoking] = useState<string | null>(null);
const fetchInvitations = useCallback(async () => { const fetchInvitations = useCallback(async () => {
try { try {
@@ -54,7 +53,7 @@ export function InvitationsPage() {
await navigator.clipboard.writeText(url); await navigator.clipboard.writeText(url);
setCopiedCode(result.code); setCopiedCode(result.code);
setTimeout(() => setCopiedCode(null), 2000); setTimeout(() => setCopiedCode(null), 2000);
await fetchInvitations(); fetchInvitations();
} catch { } catch {
// silent // silent
} finally { } finally {
@@ -62,18 +61,6 @@ export function InvitationsPage() {
} }
} }
async function handleRevoke(id: string) {
setRevoking(id);
try {
await api.invites.revoke(id);
await fetchInvitations();
} catch {
// silent
} finally {
setRevoking(null);
}
}
async function handleCopyCode(code: string) { async function handleCopyCode(code: string) {
const url = `${window.location.origin}?invite=${code}`; const url = `${window.location.origin}?invite=${code}`;
await navigator.clipboard.writeText(url); await navigator.clipboard.writeText(url);
@@ -145,23 +132,13 @@ export function InvitationsPage() {
</td> </td>
<td className="px-4 py-3"> <td className="px-4 py-3">
{!inv.used && ( {!inv.used && (
<div className="flex items-center gap-2"> <button
<button onClick={() => handleCopyCode(inv.code)}
onClick={() => handleCopyCode(inv.code)} className="text-surface-400 hover:text-surface-200 transition-colors"
className="text-surface-400 hover:text-surface-200 transition-colors" title="Copy invite link"
title="Copy invite link" >
> {copiedCode === inv.code ? <Check size={14} className="text-accent" /> : <Copy size={14} />}
{copiedCode === inv.code ? <Check size={14} className="text-accent" /> : <Copy size={14} />} </button>
</button>
<button
onClick={() => handleRevoke(inv.id)}
disabled={revoking === inv.id}
className="text-surface-400 hover:text-danger transition-colors disabled:opacity-50"
title="Revoke invitation"
>
<Trash2 size={14} />
</button>
</div>
)} )}
</td> </td>
</tr> </tr>
+12 -148
View File
@@ -1,8 +1,7 @@
import { useRef, useState } from 'react'; import { useRef, useState } from 'react';
import { Pencil, Check, X, LogOut } from 'lucide-react';
import { useGameStore } from '@/store'; import { useGameStore } from '@/store';
import { ConfirmModal } from '@/components/common/ConfirmModal'; import { ConfirmModal } from '@/components/common/ConfirmModal';
import { api, setAuthToken, getTokenPayload, isRegistered, isAdmin, clearAuthToken } from '@/lib/api'; import { getTokenPayload, isRegistered, isAdmin } from '@/lib/api';
export function SettingsPage() { export function SettingsPage() {
const settings = useGameStore((s) => s.meta.settings); const settings = useGameStore((s) => s.meta.settings);
@@ -13,60 +12,6 @@ export function SettingsPage() {
const [showResetConfirm, setShowResetConfirm] = useState(false); const [showResetConfirm, setShowResetConfirm] = useState(false);
const [importData, setImportData] = useState<{ data: unknown; name: string } | null>(null); const [importData, setImportData] = useState<{ data: unknown; name: string } | null>(null);
const [editingUsername, setEditingUsername] = useState(false);
const [usernameValue, setUsernameValue] = useState('');
const [usernameError, setUsernameError] = useState('');
const [usernameSaving, setUsernameSaving] = useState(false);
const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
const [editingEmail, setEditingEmail] = useState(false);
const [emailValue, setEmailValue] = useState('');
const [emailPassword, setEmailPassword] = useState('');
const [emailError, setEmailError] = useState('');
const [emailSaving, setEmailSaving] = useState(false);
async function handleSaveUsername() {
setUsernameError('');
if (!usernameValue || usernameValue.length < 2) {
setUsernameError('Username must be at least 2 characters');
return;
}
setUsernameSaving(true);
try {
const result = await api.auth.changeUsername(usernameValue);
setAuthToken(result.token);
setEditingUsername(false);
} catch (e) {
setUsernameError(e instanceof Error ? e.message : 'Failed to change username');
} finally {
setUsernameSaving(false);
}
}
async function handleSaveEmail() {
setEmailError('');
if (!emailValue || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue)) {
setEmailError('Valid email required');
return;
}
if (!emailPassword) {
setEmailError('Current password required');
return;
}
setEmailSaving(true);
try {
const result = await api.auth.changeEmail(emailValue, emailPassword);
setAuthToken(result.token);
setEditingEmail(false);
setEmailPassword('');
} catch (e) {
setEmailError(e instanceof Error ? e.message : 'Failed to change email');
} finally {
setEmailSaving(false);
}
}
const toggleSound = () => { const toggleSound = () => {
updateState({ meta: { ...useGameStore.getState().meta, settings: { ...settings, soundEnabled: !settings.soundEnabled } } }); updateState({ meta: { ...useGameStore.getState().meta, settings: { ...settings, soundEnabled: !settings.soundEnabled } } });
}; };
@@ -130,76 +75,23 @@ export function SettingsPage() {
<div className="bg-surface-900 border border-surface-700 rounded-xl p-4 space-y-4"> <div className="bg-surface-900 border border-surface-700 rounded-xl p-4 space-y-4">
<h3 className="font-semibold">Account</h3> <h3 className="font-semibold">Account</h3>
{registered ? ( {registered ? (
<div className="space-y-3"> <div className="space-y-2">
{payload?.email != null && ( {payload?.email && (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex-1"> <div>
<div className="text-sm">Email</div> <div className="text-sm">Email</div>
{editingEmail ? ( <div className="text-xs text-surface-400">{payload.email}</div>
<div className="mt-1 space-y-2">
<div className="flex items-center gap-2">
<input
type="email"
value={emailValue}
onChange={(e) => setEmailValue(e.target.value)}
className="bg-surface-800 border border-surface-600 rounded px-2 py-1 text-sm w-56"
placeholder="New email"
autoFocus
/>
<button onClick={handleSaveEmail} disabled={emailSaving}
className="text-accent hover:text-accent-light disabled:opacity-50"><Check size={16} /></button>
<button onClick={() => { setEditingEmail(false); setEmailError(''); setEmailPassword(''); }}
className="text-surface-400 hover:text-surface-200"><X size={16} /></button>
</div>
<input
type="password"
value={emailPassword}
onChange={(e) => setEmailPassword(e.target.value)}
className="bg-surface-800 border border-surface-600 rounded px-2 py-1 text-sm w-56"
placeholder="Current password"
/>
{emailError && <p className="text-xs text-danger">{emailError}</p>}
</div>
) : (
<div className="text-xs text-surface-400">{payload.email}</div>
)}
</div> </div>
{!editingEmail && (
<button onClick={() => { setEmailValue(payload.email ?? ''); setEditingEmail(true); }}
className="text-surface-400 hover:text-surface-200"><Pencil size={14} /></button>
)}
</div> </div>
)} )}
<div className="flex items-center justify-between"> {payload?.username && (
<div className="flex-1"> <div className="flex items-center justify-between">
<div className="text-sm">Username</div> <div>
{editingUsername ? ( <div className="text-sm">Username</div>
<div className="mt-1 space-y-1"> <div className="text-xs text-surface-400">{payload.username}</div>
<div className="flex items-center gap-2"> </div>
<input
type="text"
value={usernameValue}
onChange={(e) => setUsernameValue(e.target.value)}
className="bg-surface-800 border border-surface-600 rounded px-2 py-1 text-sm w-48"
placeholder="Username"
autoFocus
/>
<button onClick={handleSaveUsername} disabled={usernameSaving}
className="text-accent hover:text-accent-light disabled:opacity-50"><Check size={16} /></button>
<button onClick={() => { setEditingUsername(false); setUsernameError(''); }}
className="text-surface-400 hover:text-surface-200"><X size={16} /></button>
</div>
{usernameError && <p className="text-xs text-danger">{usernameError}</p>}
</div>
) : (
<div className="text-xs text-surface-400">{payload?.username ?? 'Not set'}</div>
)}
</div> </div>
{!editingUsername && ( )}
<button onClick={() => { setUsernameValue(payload?.username ?? ''); setEditingUsername(true); }}
className="text-surface-400 hover:text-surface-200"><Pencil size={14} /></button>
)}
</div>
{admin && ( {admin && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-xs px-2 py-0.5 rounded-full bg-accent/20 text-accent font-medium">Admin</span> <span className="text-xs px-2 py-0.5 rounded-full bg-accent/20 text-accent font-medium">Admin</span>
@@ -209,16 +101,6 @@ export function SettingsPage() {
) : ( ) : (
<div className="text-sm text-surface-400">Playing as guest.</div> <div className="text-sm text-surface-400">Playing as guest.</div>
)} )}
<div className="pt-2 border-t border-surface-700">
<button
onClick={() => setShowLogoutConfirm(true)}
className="inline-flex items-center gap-2 px-4 py-2 rounded bg-surface-800 hover:bg-surface-700 border border-surface-600 text-sm text-surface-300 hover:text-surface-100 transition-colors"
>
<LogOut size={14} />
{registered ? 'Log Out' : 'Sign Out'}
</button>
</div>
</div> </div>
<div className="bg-surface-900 border border-surface-700 rounded-xl p-4 space-y-4"> <div className="bg-surface-900 border border-surface-700 rounded-xl p-4 space-y-4">
@@ -302,24 +184,6 @@ export function SettingsPage() {
onCancel={() => setImportData(null)} onCancel={() => setImportData(null)}
/> />
)} )}
{showLogoutConfirm && (
<ConfirmModal
title={registered ? 'Log Out' : 'Sign Out'}
message={registered
? 'You will be logged out. Your game progress is saved to the cloud and will be available when you log back in.'
: 'You will be signed out. As a guest, your local progress will be lost. Consider registering first to save your progress.'}
confirmLabel={registered ? 'Log Out' : 'Sign Out'}
danger={!registered}
onConfirm={async () => {
try { await api.auth.logout(); } catch {}
clearAuthToken();
localStorage.removeItem('token-empire-save');
window.location.reload();
}}
onCancel={() => setShowLogoutConfirm(false)}
/>
)}
</div> </div>
); );
} }