feat(i18n): add language switcher in top-right corner for multi-language support #9

This commit is contained in:
rustmailer
2025-11-24 21:51:16 +08:00
parent 5ebc7394d0
commit ea81d0298b
119 changed files with 15277 additions and 1662 deletions
+18 -17
View File
@@ -16,15 +16,16 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import { Card, CardHeader, CardContent } from "@/components/ui/card";
import { FixedHeader } from "@/components/layout/fixed-header";
import { Main } from "@/components/layout/main";
import { useLocation } from "@tanstack/react-router";
import { AlertCircle, CheckCircle2, Info } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useTranslation } from "react-i18next";
export default function OAuth2Result() {
const { t } = useTranslation();
const { search } = useLocation();
const params = new URLSearchParams(search);
const error = params.get("error");
@@ -39,8 +40,8 @@ export default function OAuth2Result() {
{error ? (
<Card className="shadow-lg">
<CardHeader>
<h2 className="text-2xl font-semibold text-center ">
OAuth2 Authentication Failed
<h2 className="text-2xl font-semibold text-center">
{t('oauth2.authFailed')}
</h2>
</CardHeader>
<CardContent className="space-y-4">
@@ -48,10 +49,10 @@ export default function OAuth2Result() {
<div className="flex items-start">
<AlertCircle className="h-12 w-12 flex-shrink-0 mt-0.5 text-red-500" />
<div className="ml-3 flex-1">
<h3 className="text-sm font-medium ">Error</h3>
<h3 className="text-sm font-medium">{t('oauth2.error')}</h3>
<div className="mt-2 text-sm bg-gray-100 dark:bg-gray-800 rounded p-4">
<code className="whitespace-pre-wrap text-sm font-mono break-all rounded p-2">
{message?.replace(/\\n/g, "\n").replace(/\\"/g, "") || "An unknown error occurred."}
{message?.replace(/\\n/g, "\n").replace(/\\"/g, "") || t('oauth2.unknownError')}
</code>
</div>
</div>
@@ -59,10 +60,10 @@ export default function OAuth2Result() {
</div>
<div className="flex justify-center gap-4 pt-2">
<Button variant="outline" asChild>
<a href="/oauth2">Try Again</a>
<a href="/oauth2">{t('oauth2.tryAgain')}</a>
</Button>
<Button variant="link" asChild>
<a href="/">Go Home</a>
<a href="/">{t('oauth2.goHome')}</a>
</Button>
</div>
</CardContent>
@@ -70,8 +71,8 @@ export default function OAuth2Result() {
) : success ? (
<Card className="shadow-lg">
<CardHeader>
<h2 className="text-2xl font-semibold text-center ">
OAuth2 Authentication Successful
<h2 className="text-2xl font-semibold text-center">
{t('oauth2.authSuccess')}
</h2>
</CardHeader>
<CardContent className="space-y-4">
@@ -79,16 +80,16 @@ export default function OAuth2Result() {
<div className="flex items-start">
<CheckCircle2 className="h-12 w-12 flex-shrink-0 mt-0.5 text-green-500" />
<div className="ml-3 flex-1">
<h2 className="text-sm font-medium">Success</h2>
<h2 className="text-sm font-medium">{t('oauth2.success')}</h2>
<div className="mt-2 text-sm">
Your email account has been successfully authenticated via OAuth2. The Access Token has been saved by the system and will be automatically updated as needed.
{t('oauth2.successMessage')}
</div>
</div>
</div>
</div>
<div className="flex justify-center pt-2">
<Button asChild>
<a href="/accounts">Go to Accounts</a>
<a href="/accounts">{t('oauth2.goToAccounts')}</a>
</Button>
</div>
</CardContent>
@@ -97,7 +98,7 @@ export default function OAuth2Result() {
<Card className="shadow-lg">
<CardHeader>
<h2 className="text-2xl font-semibold text-center">
OAuth2 Authentication Status
{t('oauth2.authStatus')}
</h2>
</CardHeader>
<CardContent className="space-y-4">
@@ -105,16 +106,16 @@ export default function OAuth2Result() {
<div className="flex items-start">
<Info className="h-5 w-5 flex-shrink-0 mt-0.5" />
<div className="ml-3 flex-1">
<h3 className="text-sm font-medium">Information</h3>
<h3 className="text-sm font-medium">{t('oauth2.information')}</h3>
<div className="mt-2 text-sm">
This page displays the result of your OAuth2 authentication. Currently, no specific status is available. Please try again if needed.
{t('oauth2.noStatus')}
</div>
</div>
</div>
</div>
<div className="flex justify-center pt-2">
<Button variant="outline" asChild>
<a href="/oauth2">Back to Login</a>
<a href="/oauth2">{t('oauth2.backToLogin')}</a>
</Button>
</div>
</CardContent>
@@ -124,4 +125,4 @@ export default function OAuth2Result() {
</Main>
</>
);
}
}