Polish UI, harden company creation, and add error pages

job-tracker-ui/src/pages/LoginPage.tsx

@@ -8,6 +8,7 @@ import { api } from "../api";
 import { setAuthToken } from "../auth";
 import GoogleAuthCard from "../components/GoogleAuthCard";
 import { useToast } from "../toast";
+import { useI18n } from "../i18n/I18nProvider";
 
 type AuthConfig = {
   requireAuth: boolean;
@@ -18,6 +19,7 @@ type AuthConfig = {
 
 export default function LoginPage() {
   const { toast } = useToast();
+  const { t } = useI18n();
   const navigate = useNavigate();
   const location = useLocation() as any;
 
@@ -41,15 +43,12 @@ export default function LoginPage() {
     setLoading(true);
     try {
       const url = mode === "register" ? "/auth/register" : "/auth/login";
-      const res = await api.post<{ accessToken: string; tokenType: string }>(url, {
-        email,
-        password,
-      });
+      const res = await api.post<{ accessToken: string; tokenType: string }>(url, { email, password });
       setAuthToken(res.data.accessToken);
-      toast("Signed in.", "success");
+      toast(t("signedIn"), "success");
       navigate(nextPath, { replace: true });
     } catch (e: any) {
-      const msg = e?.response?.data || e?.message || "Login failed.";
+      const msg = e?.response?.data || e?.message || t("loginFailed");
       toast(String(msg), "error");
     } finally {
       setLoading(false);
@@ -72,67 +71,36 @@ export default function LoginPage() {
     >
       <Paper sx={{ width: "min(520px, 100%)", p: 3 }}>
         <Typography variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>
-          Sign in
+          {t("signInTitle")}
         </Typography>
         <Typography sx={{ color: "text.secondary", mb: 2 }}>
-          {cfg?.requireAuth ? "Authentication is required to use this app." : "Authentication is optional in this environment."}
+          {cfg?.requireAuth ? t("authRequired") : t("authOptional")}
         </Typography>
 
         <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }}>
-          <Tab label="Email & password" />
-          <Tab label="Google" />
+          <Tab label={t("emailAndPassword")} />
+          <Tab label={t("google")} />
         </Tabs>
 
         {tab === 0 && (
-          <Box
-            component="form"
-            onSubmit={(e) => {
-              e.preventDefault();
-              void submit("login");
-            }}
-            sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}
-          >
-            <TextField
-              label="Email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              autoComplete="email"
-              fullWidth
-            />
-            <TextField
-              label="Password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              autoComplete={allowReg ? "new-password" : "current-password"}
-              type="password"
-              fullWidth
-            />
+          <Box component="form" onSubmit={(e) => { e.preventDefault(); void submit("login"); }} sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
+            <TextField label={t("profileEmail")} value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" fullWidth />
+            <TextField label={t("profileCurrentPassword")} value={password} onChange={(e) => setPassword(e.target.value)} autoComplete={allowReg ? "new-password" : "current-password"} type="password" fullWidth />
 
             <Box sx={{ display: "flex", gap: 1, justifyContent: "flex-end", mt: 1 }}>
               {allowReg && (
-                <Button
-                  type="button"
-                  variant="outlined"
-                  disabled={loading}
-                  onClick={() => void submit("register")}
-                >
-                  Create account
+                <Button type="button" variant="outlined" disabled={loading} onClick={() => void submit("register")}>
+                  {t("createAccount")}
                 </Button>
               )}
               <Button type="submit" variant="contained" disabled={loading}>
-                Sign in
+                {t("signInTitle")}
               </Button>
             </Box>
           </Box>
         )}
 
-        {tab === 1 && (
-          <GoogleAuthCard
-            onSignedIn={() => {
-              navigate(nextPath, { replace: true });
-            }}
-          />
-        )}
+        {tab === 1 && <GoogleAuthCard onSignedIn={() => { navigate(nextPath, { replace: true }); }} />}
       </Paper>
     </Box>
   );