Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-02 19:36:12 +01:00
Code Issues Packages Projects Releases Activity

feat(react/settings): port OAuth settings

Browse Source
This commit is contained in:
Elian Doran
2025-08-19 10:50:58 +03:00
parent cfb3607052
commit 44825af0c0
2 changed files with 52 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx
View File

@@ -8,11 +8,12 @@ import FormGroup from "../../react/FormGroup"
import { FormInlineRadioGroup } from "../../react/FormRadioGroup" import { FormInlineRadioGroup } from "../../react/FormRadioGroup"
import Admonition from "../../react/Admonition" import Admonition from "../../react/Admonition"
import { useCallback, useEffect, useMemo, useState } from "preact/hooks" import { useCallback, useEffect, useMemo, useState } from "preact/hooks"
import { TOTPGenerate, TOTPRecoveryKeysResponse, TOTPStatus } from "@triliumnext/commons" import { OAuthStatus, TOTPGenerate, TOTPRecoveryKeysResponse, TOTPStatus } from "@triliumnext/commons"
import server from "../../../services/server" import server from "../../../services/server"
import Button from "../../react/Button" import Button from "../../react/Button"
import dialog from "../../../services/dialog" import dialog from "../../../services/dialog"
import toast from "../../../services/toast" import toast from "../../../services/toast"
import RawHtml from "../../react/RawHtml"
export default function MultiFactorAuthenticationSettings() { export default function MultiFactorAuthenticationSettings() {
const [ mfaEnabled, setMfaEnabled ] = useTriliumOptionBool("mfaEnabled"); const [ mfaEnabled, setMfaEnabled ] = useTriliumOptionBool("mfaEnabled");
@@ -57,11 +58,13 @@ function MultiFactorMethod() {
<FormText> <FormText>
{ mfaMethod === "totp" { mfaMethod === "totp"
? t("multi_factor_authentication.totp_description") ? t("multi_factor_authentication.totp_description")
: ""} : <RawHtml html={t("multi_factor_authentication.oauth_description")} /> }
</FormText> </FormText>
</OptionsSection> </OptionsSection>
{ mfaMethod === "totp" && <TotpSettings />} { mfaMethod === "totp"
? <TotpSettings />
: <OAuthSettings /> }
</> </>
) )
} }
@@ -202,3 +205,38 @@ function TotpRecoveryKeys({ values, generateRecoveryKeys }: { values?: string[],
</OptionsSection> </OptionsSection>
); );
} }
function OAuthSettings() {
const [ status, setStatus ] = useState<OAuthStatus>();
useEffect(() => {
server.get<OAuthStatus>("oauth/status").then((result) => setStatus);
});
return (
<OptionsSection title={t("multi_factor_authentication.oauth_title")}>
{ status?.enabled ? (
<div class="col-md-6">
<span><b>{t("multi_factor_authentication.oauth_user_account")}</b></span>
<span class="user-account-name">{status.name ?? t("multi_factor_authentication.oauth_user_not_logged_in")}</span>
<br />
<span><b>{t("multi_factor_authentication.oauth_user_email")}</b></span>
<span class="user-account-email">{status.email ?? t("multi_factor_authentication.oauth_user_not_logged_in")}</span>
</div>
) : (
<>
<p>{t("multi_factor_authentication.oauth_description_warning")}</p>
{ status?.missingVars && (
<Admonition type="caution">
{t("multi_factor_authentication.oauth_missing_vars", {
variables: status.missingVars.map(v => `"${v}"`).join(", ")
})}
</Admonition>
)}
</>
)}
</OptionsSection>
)
}

7
packages/commons/src/lib/server_api.ts
View File

@@ -125,3 +125,10 @@ export interface TOTPRecoveryKeysResponse {
keysExist?: boolean; keysExist?: boolean;
usedRecoveryCodes?: string[]; usedRecoveryCodes?: string[];
} }
export interface OAuthStatus {
enabled: boolean;
name?: string;
email?: string;
missingVars?: string[];
}