Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix(ui): add missing page titles #3066

Merged
merged 1 commit into from
Nov 26, 2024
Merged

fix(ui): add missing page titles #3066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/webapp/src/components/ErrorComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PageNotFound from '../pages/PageNotFound';
import DashboardLayout from '../layout/DashboardLayout';
import { Info } from './Info';
import type { LeftNavBarItems } from './LeftNavBar';
import { Helmet } from 'react-helmet';

export const ErrorPageComponent: React.FC<{ title: string; error: ApiError<string>; page: LeftNavBarItems }> = ({ title, error, page }) => {
if (error.error.code === 'not_found') {
Expand All @@ -11,6 +12,9 @@ export const ErrorPageComponent: React.FC<{ title: string; error: ApiError<strin

return (
<DashboardLayout selectedItem={page}>
<Helmet>
<title>Error - Nango</title>
</Helmet>
<h2 className="text-3xl font-semibold text-white mb-16">{title}</h2>
<Info variant={'destructive'}>
An error occurred, refresh your page or reach out to the support.{' '}
Expand Down
4 changes: 4 additions & 0 deletions packages/webapp/src/pages/Account/ForgotPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useRequestPasswordResetAPI } from '../../utils/api';
import DefaultLayout from '../../layout/DefaultLayout';
import { Input } from '../../components/ui/input/Input';
import Button from '../../components/ui/button/Button';
import { Helmet } from 'react-helmet';

export default function Signin() {
const requestPasswordResetAPI = useRequestPasswordResetAPI();
Expand Down Expand Up @@ -34,6 +35,9 @@ export default function Signin() {

return (
<DefaultLayout>
<Helmet>
<title>Forgot Password - Nango</title>
</Helmet>
<div className="flex flex-col justify-center">
<div className="w-80 flex flex-col gap-6">
<h2 className="mt-4 text-center text-[20px] text-white">Request password reset</h2>
Expand Down
4 changes: 4 additions & 0 deletions packages/webapp/src/pages/Account/ResetPassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useResetPasswordAPI } from '../../utils/api';
import DefaultLayout from '../../layout/DefaultLayout';
import { Password } from './components/Password';
import Button from '../../components/ui/button/Button';
import { Helmet } from 'react-helmet';

export default function ResetPassword() {
const resetPasswordAPI = useResetPasswordAPI();
Expand Down Expand Up @@ -40,6 +41,9 @@ export default function ResetPassword() {

return (
<DefaultLayout>
<Helmet>
<title>Reset Password - Nango</title>
</Helmet>
<div className="flex flex-col justify-center">
<div className="w-80 flex flex-col gap-4">
<h2 className="text-center text-[20px] text-white">Reset password</h2>
Expand Down
174 changes: 88 additions & 86 deletions packages/webapp/src/pages/Account/Signin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import DefaultLayout from '../../layout/DefaultLayout';
import GoogleButton from '../../components/ui/button/Auth/Google';
import Button from '../../components/ui/button/Button';
import { globalEnv } from '../../utils/env';
import { Helmet } from 'react-helmet';

export default function Signin() {
const [serverErrorMessage, setServerErrorMessage] = useState('');
Expand Down Expand Up @@ -67,104 +68,105 @@ export default function Signin() {
};

return (
<>
<DefaultLayout>
<div className="flex flex-col justify-center">
<div className="flex flex-col justify-center w-80 mx-4">
<h2 className="mt-4 text-center text-[20px] text-white">Log in to Nango</h2>
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
<div>
<div className="mt-1">
<input
id="email"
placeholder="Email"
name="email"
type="email"
autoComplete="email"
required
className="border-border-gray bg-dark-600 placeholder-dark-500 text-text-light-gray block h-11 w-full appearance-none rounded-md border px-3 py-2 text-[14px] placeholder-gray-400 shadow-sm focus:outline-none"
/>
</div>
<DefaultLayout>
<Helmet>
<title>Login - Nango</title>
</Helmet>
<div className="flex flex-col justify-center">
<div className="flex flex-col justify-center w-80 mx-4">
<h2 className="mt-4 text-center text-[20px] text-white">Log in to Nango</h2>
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
<div>
<div className="mt-1">
<input
id="email"
placeholder="Email"
name="email"
type="email"
autoComplete="email"
required
className="border-border-gray bg-dark-600 text-text-light-gray block h-11 w-full appearance-none rounded-md border px-3 py-2 text-[14px] placeholder-gray-400 shadow-sm focus:outline-none"
/>
</div>
</div>

<div>
<div className="flex justify-end">
<div className="flex flex-end text-sm">
<a href="/forgot-password" className="text-dark-500 text-xs ml-1">
Forgot your password?
</a>
</div>
</div>
<div className="mt-2">
<input
id="password"
name="password"
type="password"
placeholder="Password"
autoComplete="current-password"
required
className="border-border-gray bg-dark-600 placeholder-dark-500 text-text-light-gray block h-11 w-full appearance-none rounded-md border px-3 py-2 text-[14px] placeholder-gray-400 shadow-sm focus:outline-none"
/>
<div>
<div className="flex justify-end">
<div className="flex flex-end text-sm">
<Link to="/forgot-password" className="text-dark-500 text-xs ml-1">
Forgot your password?
</Link>
</div>
</div>

<div className="grid">
<button
type="submit"
className="bg-white mt-4 flex h-11 justify-center rounded-md border px-4 pt-3 text-[14px] text-black shadow hover:border-2 active:ring-2 active:ring-offset-2"
>
Log in
</button>
{serverErrorMessage && (
<>
<p className="mt-6 place-self-center text-sm text-red-600">{serverErrorMessage}</p>
{showResendEmail && (
<Button onClick={resendVerificationEmail} className="flex justify-center mt-2 text-light-gray" variant="danger">
Resend verification email
</Button>
)}
</>
)}
<div className="mt-2">
<input
id="password"
name="password"
type="password"
placeholder="Password"
autoComplete="current-password"
required
className="border-border-gray bg-dark-600 text-text-light-gray block h-11 w-full appearance-none rounded-md border px-3 py-2 text-[14px] placeholder-gray-400 shadow-sm focus:outline-none"
/>
</div>
</div>

{globalEnv.features.managedAuth && (
<div className="grid">
<button
type="submit"
className="bg-white mt-4 flex h-11 justify-center rounded-md border px-4 pt-3 text-[14px] text-black shadow hover:border-2 active:ring-2 active:ring-offset-2"
>
Log in
</button>
{serverErrorMessage && (
<>
<div className="flex items-center justify-center my-4 text-xs">
<div className="border-t border-gray-600 flex-grow mr-7"></div>
<span className="text-dark-500">or continue with</span>
<div className="border-t border-gray-600 flex-grow ml-7"></div>
</div>

<GoogleButton text="# with Google" setServerErrorMessage={setServerErrorMessage} />
<p className="mt-6 place-self-center text-sm text-red-600">{serverErrorMessage}</p>
{showResendEmail && (
<Button onClick={resendVerificationEmail} className="flex justify-center mt-2 text-light-gray" variant="danger">
Resend verification email
</Button>
)}
</>
)}
</form>
</div>
<div className="grid text-xs">
<div className="mt-7 flex place-self-center">
<p className="text-dark-500">Don&apos;t have an account?</p>
<Link to="/#" className="text-white ml-1">
#.
</Link>
</div>

{globalEnv.features.managedAuth && (
<>
<div className="flex items-center justify-center my-4 text-xs">
<div className="border-t border-gray-600 flex-grow mr-7"></div>
<span className="text-dark-500">or continue with</span>
<div className="border-t border-gray-600 flex-grow ml-7"></div>
</div>

<GoogleButton text="# with Google" setServerErrorMessage={setServerErrorMessage} />
</>
)}
</form>
</div>
<div className="grid text-xs">
<div className="mt-7 flex place-self-center">
<p className="text-dark-500">Don&apos;t have an account?</p>
<Link to="/#" className="text-white ml-1">
#.
</Link>
</div>
<div className="grid w-full">
<div className="mt-8 flex text-xs">
<p className="text-dark-500">
By signing in, you agree to our
<a href="https://www.nango.dev/terms" target="_blank" rel="noreferrer" className="text-white ml-1">
Terms of Service
</a>
<span className="text-dark-500 ml-1">and</span>
<a href="https://www.nango.dev/privacy-policy" target="_blank" rel="noreferrer" className="text-white ml-1">
Privacy Policy
</a>
<span className="text-dark-500">.</span>
</p>
</div>
</div>
<div className="grid w-full">
<div className="mt-8 flex text-xs">
<p className="text-dark-500">
By signing in, you agree to our
<a href="https://www.nango.dev/terms" target="_blank" rel="noreferrer" className="text-white ml-1">
Terms of Service
</a>
<span className="text-dark-500 ml-1">and</span>
<a href="https://www.nango.dev/privacy-policy" target="_blank" rel="noreferrer" className="text-white ml-1">
Privacy Policy
</a>
<span className="text-dark-500">.</span>
</p>
</div>
</div>
</DefaultLayout>
</>
</div>
</DefaultLayout>
);
}
4 changes: 4 additions & 0 deletions packages/webapp/src/pages/Account/#.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
import { Helmet } from 'react-helmet';
import DefaultLayout from '../../layout/DefaultLayout';
import { #Form } from './components/#Form';

export const #: React.FC = () => {
return (
<DefaultLayout>
<Helmet>
<title># - Nango</title>
</Helmet>
<div className="flex flex-col justify-center">
<div className="w-80">
<#Form />
Expand Down
4 changes: 4 additions & 0 deletions packages/webapp/src/pages/Connection/Create.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import SecretTextArea from '../../components/ui/input/SecretTextArea';
import { useStore } from '../../store';
import type { AuthModeType } from '@nangohq/types';
import { useEnvironment } from '../../hooks/useEnvironment';
import { Helmet } from 'react-helmet';

export default function IntegrationCreate() {
const { mutate } = useSWRConfig();
Expand Down Expand Up @@ -625,6 +626,9 @@ nango.${integration?.authMode === 'NONE' ? 'create' : 'auth'}('${integration?.un

return (
<DashboardLayout selectedItem={LeftNavBarItems.Connections}>
<Helmet>
<title>Create Connection - Nango</title>
</Helmet>
{integrations && !!integrations.length && publicKey && hostUrl && (
<div className="pb-40">
<h2 className="text-left text-3xl font-semibold tracking-tight text-white mb-12">Add New Connection</h2>
Expand Down
22 changes: 9 additions & 13 deletions packages/webapp/src/pages/Connection/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ import { useDebounce, useUnmount } from 'react-use';
import { globalEnv } from '../../utils/env';
import { apiConnectSessions } from '../../hooks/useConnect';
import { useListIntegration } from '../../hooks/useIntegration';
import { Info } from '../../components/Info';
import { Skeleton } from '../../components/ui/Skeleton';
import type { ColumnDef } from '@tanstack/react-table';
import { flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
Expand All @@ -34,6 +33,8 @@ import { useToast } from '../../hooks/useToast';
import type { ApiConnectionSimple } from '@nangohq/types';
import { CopyText } from '../../components/CopyText';
import { SimpleTooltip } from '../../components/SimpleTooltip';
import { Helmet } from 'react-helmet';
import { ErrorPageComponent } from '../../components/ErrorComponent';

const defaultFilter = ['all'];
const filterErrors = [
Expand Down Expand Up @@ -253,23 +254,15 @@ export const ConnectionList: React.FC = () => {
const hasFiltered = debouncedSearch || selectedIntegration[0] !== 'all' || filterWithError !== 'all';

if (error) {
return (
<DashboardLayout selectedItem={LeftNavBarItems.Connections}>
<Info variant={'destructive'}>
An error occurred, refresh your page or reach out to the support.{' '}
{error.error.code === 'generic_error_support' && (
<>
(id: <span className="select-all">{error.error.payload}</span>)
</>
)}
</Info>
</DashboardLayout>
);
return <ErrorPageComponent title="Connections" error={error} page={LeftNavBarItems.Connections} />;
}

if (!connections || !readyToDisplay) {
return (
<DashboardLayout selectedItem={LeftNavBarItems.Connections}>
<Helmet>
<title>Connections - Nango</title>
</Helmet>
<h2 className="text-3xl font-semibold text-white mb-4">Connections</h2>

<div className="flex gap-2 flex-col">
Expand All @@ -283,6 +276,9 @@ export const ConnectionList: React.FC = () => {

return (
<DashboardLayout selectedItem={LeftNavBarItems.Connections}>
<Helmet>
<title>Connections - Nango</title>
</Helmet>
<div className="flex justify-between mb-8 items-center">
<h2 className="flex text-left text-3xl font-semibold tracking-tight text-white">Connections</h2>
<div className="flex gap-2">
Expand Down
8 changes: 7 additions & 1 deletion packages/webapp/src/pages/Connection/Show.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,9 @@ export const ConnectionShow: React.FC = () => {
if (loading || loadingSyncs) {
return (
<DashboardLayout selectedItem={LeftNavBarItems.Integrations}>
<Helmet>
<title>Connection - Nango</title>
</Helmet>
<div className="flex gap-4 justify-between">
<div className="flex gap-6">
<div className="shrink-0">
Expand All @@ -146,7 +149,7 @@ export const ConnectionShow: React.FC = () => {
}

if (error) {
return <ErrorPageComponent title="Connection" error={error || errorSyncs} page={LeftNavBarItems.TeamSettings} />;
return <ErrorPageComponent title="Connection" error={error || errorSyncs} page={LeftNavBarItems.Connections} />;
}

if (!connection || !syncs) {
Expand All @@ -155,6 +158,9 @@ export const ConnectionShow: React.FC = () => {

return (
<DashboardLayout selectedItem={LeftNavBarItems.Connections}>
<Helmet>
<title>{connection.endUser?.email || connection.connection.connection_id} - Connection - Nango</title>
</Helmet>
<div className="mx-auto">
<div className="flex gap-4 justify-between">
<div className="flex gap-6">
Expand Down
4 changes: 4 additions & 0 deletions packages/webapp/src/pages/Environment/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import { globalEnv } from '../../utils/env';
import { useLocalStorage } from 'react-use';
import { Info } from '../../components/Info';
import { Link } from 'react-router-dom';
import { Helmet } from 'react-helmet';

export const EnvironmentSettings: React.FC = () => {
const env = useStore((state) => state.env);
Expand Down Expand Up @@ -460,6 +461,9 @@ export const EnvironmentSettings: React.FC = () => {

return (
<DashboardLayout selectedItem={LeftNavBarItems.EnvironmentSettings}>
<Helmet>
<title>Environment Settings - Nango</title>
</Helmet>
<Modal {...bindings} wrapClassName="!w-max overflow-visible">
<div className="flex justify-between">
<div className="flex h-full">
Expand Down
Loading
Loading