557278fac0
* feat: improve i18n support as a whole
- Remove dayjs in favor of /helpers/datetime.ts, which uses
Intl.DateTimeFormat and Date. Dayjs is not exactly i18n friendly
and has several locale related opened issues.
- Move/refactor date/time code from /helpers/utils.ts to
/helpers/datetime.ts.
- Fix Daily Review weekday not changing according to selected date.
- Localize Daily review weekday and month.
- Load i18n listed strings from /locales/{locale}.json in a dynamic way.
This makes much easier to add new locales, by just adding a properly
named json file and listing it only in /web/src/i18n.ts and
/api/user_setting.go.
- Fallback languages are now set in /web/src/i18n.ts.
- Full language codes are now preffered, but they fallback to 2-letter
codes when not available.
- The locale dropdown is now populated dynamically from the available
locales. Locale names are populated by the browser via
Intl.DisplayNames(locale).
- /web/src/i18n.ts now exports a type TLocale from availableLocales
array. This is used only by findNearestLanguageMatch(). As I was unable
to use this type in ".d.ts" files, I switched the Locale type from
/web/src/types/i18n.d.ts to string.
- Move pretty much all hardcoded text strings to i18n strings.
- Add pt-BR translation.
- Remove site.ts and move its content to a i18n string.
- Rename zh.json to zh-Hans.json to get the correct language name on
selector dropdown.
- Remove pt_BR.json and replace with pt-BR.json.
- Some minor layout spacing fixes to accommodate larger texts.
- Improve some error messages.
* Delete .yarnrc.yml
* Delete package-lock.json
* fix: 158:28 error Insert `⏎` prettier/prettier
90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { toast } from "react-hot-toast";
|
|
import { useTranslation } from "react-i18next";
|
|
import * as api from "@/helpers/api";
|
|
import showCreateIdentityProviderDialog from "../CreateIdentityProviderDialog";
|
|
import Dropdown from "../kit/Dropdown";
|
|
import { showCommonDialog } from "../Dialog/CommonDialog";
|
|
|
|
const SSOSection = () => {
|
|
const { t } = useTranslation();
|
|
const [identityProviderList, setIdentityProviderList] = useState<IdentityProvider[]>([]);
|
|
|
|
useEffect(() => {
|
|
fetchIdentityProviderList();
|
|
}, []);
|
|
|
|
const fetchIdentityProviderList = async () => {
|
|
const {
|
|
data: { data: identityProviderList },
|
|
} = await api.getIdentityProviderList();
|
|
setIdentityProviderList(identityProviderList);
|
|
};
|
|
|
|
const handleDeleteIdentityProvider = async (identityProvider: IdentityProvider) => {
|
|
showCommonDialog({
|
|
title: t("setting.sso-section.delete-sso"),
|
|
content: t("setting.sso-section.confirm-delete", { name: identityProvider.name }),
|
|
style: "warning",
|
|
dialogName: "delete-identity-provider-dialog",
|
|
onConfirm: async () => {
|
|
try {
|
|
await api.deleteIdentityProvider(identityProvider.id);
|
|
} catch (error: any) {
|
|
console.error(error);
|
|
toast.error(error.response.data.message);
|
|
}
|
|
await fetchIdentityProviderList();
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="section-container">
|
|
<div className="mt-4 mb-2 w-full flex flex-row justify-start items-center">
|
|
<span className="font-mono text-sm text-gray-400 mr-2">{t("setting.sso-section.sso-list")}</span>
|
|
<button
|
|
className="btn-normal px-2 py-0 leading-7"
|
|
onClick={() => showCreateIdentityProviderDialog(undefined, fetchIdentityProviderList)}
|
|
>
|
|
{t("common.create")}
|
|
</button>
|
|
</div>
|
|
<div className="mt-2 w-full flex flex-col">
|
|
{identityProviderList.map((identityProvider) => (
|
|
<div key={identityProvider.id} className="py-2 w-full border-t last:border-b flex flex-row items-center justify-between">
|
|
<div className="flex flex-row items-center">
|
|
<p className="ml-2">
|
|
{identityProvider.name}
|
|
<span className="text-sm ml-1 opacity-40">({identityProvider.type})</span>
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-row items-center">
|
|
<Dropdown
|
|
actionsClassName="!w-28"
|
|
actions={
|
|
<>
|
|
<button
|
|
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
|
|
onClick={() => showCreateIdentityProviderDialog(identityProvider, fetchIdentityProviderList)}
|
|
>
|
|
{t("common.edit")}
|
|
</button>
|
|
<button
|
|
className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded text-red-600 hover:bg-gray-100 dark:hover:bg-zinc-600"
|
|
onClick={() => handleDeleteIdentityProvider(identityProvider)}
|
|
>
|
|
{t("common.delete")}
|
|
</button>
|
|
</>
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SSOSection;
|