snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/admin/oauthApps/EditOauthApp.tsx

@@ -0,0 +1,185 @@
+import type { IOAuthApps, Serialized } from '@rocket.chat/core-typings';
+import {
+	Button,
+	ButtonGroup,
+	TextInput,
+	Field,
+	FieldLabel,
+	FieldRow,
+	FieldError,
+	FieldHint,
+	PasswordInput,
+	TextAreaInput,
+	ToggleSwitch,
+	FieldGroup,
+} from '@rocket.chat/fuselage';
+import { GenericModal, ContextualbarScrollableContent } from '@rocket.chat/ui-client';
+import { useSetModal, useToastMessageDispatch, useRoute, useAbsoluteUrl, useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+import { useCallback, useId, useMemo } from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
+
+type EditOAuthAddAppPayload = {
+	name: string;
+	active: boolean;
+	redirectUri: string;
+};
+
+export type EditOauthAppProps = {
+	onChange: () => void;
+	data: Serialized<IOAuthApps>;
+} & Omit<ComponentProps<typeof ContextualbarScrollableContent>, 'data'>;
+
+const EditOauthApp = ({ onChange, data, ...props }: EditOauthAppProps) => {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+		control,
+	} = useForm<EditOAuthAddAppPayload>({
+		defaultValues: {
+			name: data.name,
+			active: data.active,
+			redirectUri: Array.isArray(data.redirectUri) ? data.redirectUri.join('\n') : data.redirectUri,
+		},
+		mode: 'all',
+	});
+
+	const setModal = useSetModal();
+
+	const router = useRoute('admin-oauth-apps');
+
+	const close = useCallback(() => router.push({}), [router]);
+
+	const absoluteUrl = useAbsoluteUrl();
+	const authUrl = useMemo(() => absoluteUrl('oauth/authorize'), [absoluteUrl]);
+	const tokenUrl = useMemo(() => absoluteUrl('oauth/token'), [absoluteUrl]);
+
+	const saveApp = useEndpoint('POST', '/v1/oauth-apps.update');
+	const deleteApp = useEndpoint('POST', '/v1/oauth-apps.delete');
+
+	const onSubmit: SubmitHandler<EditOAuthAddAppPayload> = async (newData: EditOAuthAddAppPayload) => {
+		try {
+			await saveApp({ ...newData, appId: data._id });
+			dispatchToastMessage({ type: 'success', message: t('Application_updated') });
+			onChange();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
+
+	const onDeleteConfirm = useCallback(async () => {
+		try {
+			await deleteApp({ appId: data._id });
+			dispatchToastMessage({ type: 'success', message: t('Your_entry_has_been_deleted') });
+			close();
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		} finally {
+			setModal(null);
+		}
+	}, [data._id, close, deleteApp, dispatchToastMessage, setModal, t]);
+
+	const openConfirmDelete = (): void =>
+		setModal(
+			<GenericModal
+				variant='danger'
+				onConfirm={onDeleteConfirm}
+				onCancel={(): void => setModal(null)}
+				onClose={(): void => setModal(null)}
+				confirmText={t('Delete')}
+			>
+				{t('Application_delete_warning')}
+			</GenericModal>,
+		);
+
+	const nameField = useId();
+	const redirectUriField = useId();
+	const clientIdField = useId();
+	const clientSecretField = useId();
+	const authUrlField = useId();
+	const tokenUrlField = useId();
+
+	return (
+		<ContextualbarScrollableContent width='full' {...props}>
+			<FieldGroup maxWidth='x600' alignSelf='center' width='full'>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Active')}</FieldLabel>
+						<Controller
+							name='active'
+							control={control}
+							defaultValue={data.active}
+							render={({ field }) => <ToggleSwitch onChange={field.onChange} checked={field.value} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel htmlFor={nameField}>{t('Application_Name')}</FieldLabel>
+					<FieldRow>
+						<TextInput id={nameField} {...register('name', { required: true })} />
+					</FieldRow>
+					<FieldHint>{t('Give_the_application_a_name_This_will_be_seen_by_your_users')}</FieldHint>
+					{errors?.name && <FieldError>{t('Required_field', { field: t('Name') })}</FieldError>}
+				</Field>
+				<Field>
+					<FieldLabel htmlFor={redirectUriField}>{t('Redirect_URI')}</FieldLabel>
+					<FieldRow>
+						<TextAreaInput id={redirectUriField} rows={5} {...register('redirectUri', { required: true })} />
+					</FieldRow>
+					<FieldHint>{t('After_OAuth2_authentication_users_will_be_redirected_to_this_URL')}</FieldHint>
+					{errors?.redirectUri && <FieldError>{t('Required_field', { field: t('Redirect_URI') })}</FieldError>}
+				</Field>
+				<Field>
+					<FieldLabel htmlFor={clientIdField}>{t('Client_ID')}</FieldLabel>
+					<FieldRow>
+						<TextInput id={clientIdField} value={data.clientId} />
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel htmlFor={clientSecretField}>{t('Client_Secret')}</FieldLabel>
+					<FieldRow>
+						<PasswordInput id={clientSecretField} value={data.clientSecret} />
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel htmlFor={authUrlField}>{t('Authorization_URL')}</FieldLabel>
+					<FieldRow>
+						<TextInput id={authUrlField} value={authUrl} />
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel htmlFor={tokenUrlField}>{t('Access_Token_URL')}</FieldLabel>
+					<FieldRow>
+						<TextInput id={tokenUrlField} value={tokenUrl} />
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<ButtonGroup stretch>
+							<Button onClick={close}>{t('Cancel')}</Button>
+							<Button primary onClick={handleSubmit(onSubmit)}>
+								{t('Save')}
+							</Button>
+						</ButtonGroup>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldRow>
+						<ButtonGroup stretch>
+							<Button icon='trash' danger onClick={openConfirmDelete}>
+								{t('Delete')}
+							</Button>
+						</ButtonGroup>
+					</FieldRow>
+				</Field>
+			</FieldGroup>
+		</ContextualbarScrollableContent>
+	);
+};
+
+export default EditOauthApp;

apps/meteor/client/views/admin/oauthApps/EditOauthAppWithData.tsx

@@ -0,0 +1,47 @@
+import { Box } from '@rocket.chat/fuselage';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import EditOauthApp from './EditOauthApp';
+import { FormSkeleton } from '../../../components/Skeleton';
+
+export type EditOauthAppWithDataProps = { _id: string };
+
+const EditOauthAppWithData = ({ _id, ...props }: EditOauthAppWithDataProps) => {
+	const { t } = useTranslation();
+
+	const getOauthApps = useEndpoint('GET', '/v1/oauth-apps.get');
+
+	const { data, isPending, error, refetch } = useQuery({
+		queryKey: ['oauth-apps', _id],
+		queryFn: async () => {
+			const oauthApps = await getOauthApps({ _id });
+			return oauthApps;
+		},
+		meta: {
+			apiErrorToastMessage: true,
+		},
+	});
+
+	const onChange = useCallback(() => {
+		refetch();
+	}, [refetch]);
+
+	if (isPending) {
+		return <FormSkeleton paddingInline={20} />;
+	}
+
+	if (error || !data || !_id) {
+		return (
+			<Box fontScale='h2' paddingBlock={20}>
+				{t('error-application-not-found')}
+			</Box>
+		);
+	}
+
+	return <EditOauthApp data={data.oauthApp} onChange={onChange} {...props} />;
+};
+
+export default EditOauthAppWithData;

apps/meteor/client/views/admin/oauthApps/OAuthAddApp.tsx

@@ -0,0 +1,102 @@
+import {
+	Button,
+	ButtonGroup,
+	TextInput,
+	Field,
+	FieldLabel,
+	FieldRow,
+	FieldError,
+	FieldHint,
+	TextAreaInput,
+	ToggleSwitch,
+	FieldGroup,
+} from '@rocket.chat/fuselage';
+import { ContextualbarScrollableContent } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useRoute, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useCallback, useId } from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+type OAuthAddAppPayload = {
+	name: string;
+	active: boolean;
+	redirectUri: string;
+};
+
+const OAuthAddApp = () => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const {
+		register,
+		handleSubmit,
+		formState: { errors },
+		control,
+	} = useForm<OAuthAddAppPayload>();
+
+	const saveApp = useEndpoint('POST', '/v1/oauth-apps.create');
+
+	const router = useRoute('admin-oauth-apps');
+
+	const close = useCallback(() => router.push({}), [router]);
+
+	const onSubmit: SubmitHandler<OAuthAddAppPayload> = async (data) => {
+		try {
+			await saveApp(data);
+			close();
+			dispatchToastMessage({ type: 'success', message: t('Application_added') });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
+
+	const nameField = useId();
+	const redirectUriField = useId();
+
+	return (
+		<ContextualbarScrollableContent width='full'>
+			<FieldGroup maxWidth='x600' alignSelf='center' width='full'>
+				<Field>
+					<FieldRow>
+						<FieldLabel>{t('Active')}</FieldLabel>
+						<Controller
+							name='active'
+							control={control}
+							defaultValue={false}
+							render={({ field }) => <ToggleSwitch onChange={field.onChange} checked={field.value} />}
+						/>
+					</FieldRow>
+				</Field>
+				<Field>
+					<FieldLabel htmlFor={nameField}>{t('Application_Name')}</FieldLabel>
+					<FieldRow>
+						<TextInput id={nameField} {...register('name', { required: t('Required_field', { field: t('Name') }) })} />
+					</FieldRow>
+					<FieldHint>{t('Give_the_application_a_name_This_will_be_seen_by_your_users')}</FieldHint>
+					{errors?.name && <FieldError>{errors.name.message}</FieldError>}
+				</Field>
+				<Field>
+					<FieldLabel htmlFor={redirectUriField}>{t('Redirect_URI')}</FieldLabel>
+					<FieldRow>
+						<TextAreaInput id={redirectUriField} rows={5} {...register('redirectUri', { required: true })} />
+					</FieldRow>
+					<FieldHint>{t('After_OAuth2_authentication_users_will_be_redirected_to_this_URL')}</FieldHint>
+					{errors?.redirectUri && <FieldError>{t('Required_field', { field: t('Redirect_URI') })}</FieldError>}
+				</Field>
+				<Field>
+					<FieldRow>
+						<ButtonGroup stretch>
+							<Button onClick={close}>{t('Cancel')}</Button>
+							<Button primary onClick={handleSubmit(onSubmit)}>
+								{t('Save')}
+							</Button>
+						</ButtonGroup>
+					</FieldRow>
+				</Field>
+			</FieldGroup>
+		</ContextualbarScrollableContent>
+	);
+};
+
+export default OAuthAddApp;

apps/meteor/client/views/admin/oauthApps/OAuthAppsPage.tsx

@@ -0,0 +1,38 @@
+import { Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useRouteParameter, useTranslation, useRouter } from '@rocket.chat/ui-contexts';
+
+import EditOauthAppWithData from './EditOauthAppWithData';
+import OAuthAddApp from './OAuthAddApp';
+import OAuthAppsTable from './OAuthAppsTable';
+
+const OAuthAppsPage = () => {
+	const t = useTranslation();
+	const router = useRouter();
+
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<PageHeader title={t('Third_party_login')} onClickBack={context ? () => router.navigate('/admin/third-party-login') : undefined}>
+					{!context && (
+						<ButtonGroup>
+							<Button primary onClick={() => router.navigate('/admin/third-party-login/new')}>
+								{t('New_Application')}
+							</Button>
+						</ButtonGroup>
+					)}
+				</PageHeader>
+				<PageContent>
+					{!context && <OAuthAppsTable />}
+					{id && context === 'edit' && <EditOauthAppWithData _id={id} />}
+					{context === 'new' && <OAuthAddApp />}
+				</PageContent>
+			</Page>
+		</Page>
+	);
+};
+
+export default OAuthAppsPage;

apps/meteor/client/views/admin/oauthApps/OAuthAppsRoute.tsx

@@ -0,0 +1,16 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+
+import OAuthAppsPage from './OAuthAppsPage';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const OAuthAppsRoute = () => {
+	const canAccessOAuthApps = usePermission('manage-oauth-apps');
+
+	if (!canAccessOAuthApps) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <OAuthAppsPage />;
+};
+
+export default OAuthAppsRoute;

apps/meteor/client/views/admin/oauthApps/OAuthAppsTable.tsx

@@ -0,0 +1,91 @@
+import {
+	GenericTableHeaderCell,
+	GenericTable,
+	GenericTableHeader,
+	GenericTableRow,
+	GenericTableCell,
+	GenericTableBody,
+	GenericTableLoadingRow,
+} from '@rocket.chat/ui-client';
+import { useEndpoint, useRoute, useTranslation, useUserId } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useCallback } from 'react';
+
+import GenericNoResults from '../../../components/GenericNoResults';
+import { useFormatDateAndTime } from '../../../hooks/useFormatDateAndTime';
+
+const OAuthAppsTable = () => {
+	const t = useTranslation();
+	const formatDateAndTime = useFormatDateAndTime();
+
+	const uid = { uid: useUserId() || '' };
+
+	const getOauthApps = useEndpoint('GET', '/v1/oauth-apps.list');
+	const { data, isLoading, isSuccess } = useQuery({
+		queryKey: ['oauth-apps', { uid }],
+
+		queryFn: async () => {
+			const oauthApps = await getOauthApps(uid);
+			return oauthApps;
+		},
+	});
+
+	const router = useRoute('admin-oauth-apps');
+
+	const onClick = useCallback(
+		(_id: string) => (): void =>
+			router.push({
+				context: 'edit',
+				id: _id,
+			}),
+		[router],
+	);
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell key='name'>{t('Name')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='_createdBy'>{t('Created_by')}</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='_createdAt'>{t('Created_at')}</GenericTableHeaderCell>
+		</>
+	);
+
+	return (
+		<>
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingRow cols={3} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data?.oauthApps.length === 0 && <GenericNoResults />}
+			{isSuccess && data?.oauthApps.length > 0 && (
+				<GenericTable aria-label={t('Third_party_applications_table')}>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						{data?.oauthApps.map(({ _id, name, _createdAt, _createdBy: { username: createdBy } }) => (
+							<GenericTableRow
+								key={_id}
+								onKeyDown={onClick(_id)}
+								onClick={onClick(_id)}
+								tabIndex={0}
+								role='link'
+								action
+								qa-oauth-app-id={_id}
+							>
+								<GenericTableCell withTruncatedText color='default' fontScale='p2m'>
+									{name}
+								</GenericTableCell>
+								<GenericTableCell withTruncatedText>{createdBy}</GenericTableCell>
+								<GenericTableCell withTruncatedText>{formatDateAndTime(_createdAt)}</GenericTableCell>
+							</GenericTableRow>
+						))}
+					</GenericTableBody>
+				</GenericTable>
+			)}
+		</>
+	);
+};
+
+export default OAuthAppsTable;