9223589095

Committed 24 May 2024 12:03PM UTC coverage: 96.651% (+0.009%) from 96.642%

Build # 9223589095

Build Type

Pull #1139

github

Committed by

web-flow

Commit Message

Merge da89b0ed0 into 252bae4de

Pull Request Pull Request #1139: feat(accounts): new account system

Run Details

403 of 414 branches covered (97.34%)

Branch coverage included in aggregate %.

104 of 114 new or added lines in 15 files covered. (91.23%)

3 existing lines in 1 file now uncovered.

1040 of 1079 relevant lines covered (96.39%)

20.12 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

96.15

/src/routes/LoginWithOAuthApp.tsx

import {
  ArrowLeftIcon,
  BookIcon,
  PersonIcon,
  SignInIcon,
} from '@primer/octicons-react';

import { type FC, useCallback, useContext } from 'react';
import { Form, type FormRenderProps } from 'react-final-form';
import { useNavigate } from 'react-router-dom';

import { Button } from '../components/fields/Button';
import { FieldInput } from '../components/fields/FieldInput';
import { AppContext } from '../context/App';
import {
  getNewOAuthAppURL,
  isValidClientId,
  isValidHostname,
  isValidToken,
} from '../utils/auth';
import type { AuthOptionsOAuthApp } from '../utils/auth/types';
import Constants from '../utils/constants';

interface IValues {
  hostname?: string;
  clientId?: string;
  clientSecret?: string;
}

interface IFormErrors {
  hostname?: string;
  clientId?: string;
  clientSecret?: string;
}

export const validate = (values: IValues): IFormErrors => {
  const errors: IFormErrors = {};

  if (!values.hostname) {
    errors.hostname = 'Required';
  } else if (!isValidHostname(values.hostname)) {
    errors.hostname = 'Invalid hostname.';
  }

  if (!values.clientId) {
    errors.clientId = 'Required';
  } else if (!isValidClientId(values.clientId)) {
    errors.clientId = 'Invalid client id.';
  }

  if (!values.clientSecret) {
    errors.clientSecret = 'Required';
  } else if (!isValidToken(values.clientSecret)) {
    errors.clientSecret = 'Invalid client secret.';
  }

  return errors;
};

export const LoginWithOAuthApp: FC = () => {
  const { loginWithOAuthApp } = useContext(AppContext);
  const navigate = useNavigate();

  const renderForm = (formProps: FormRenderProps) => {
    const { handleSubmit, submitting, pristine, values } = formProps;

    return (
      <form onSubmit={handleSubmit}>
        <FieldInput
          name="hostname"
          label="Hostname"
          placeholder="github.company.com"
          helpText={
            <div className="mb-1">
              <Button
                name="Create new OAuth App"
                label="Create new OAuth App"
                disabled={!values.hostname}
                icon={PersonIcon}
                size={12}
                url={getNewOAuthAppURL(values.hostname)}
              />{' '}
              on GitHub then paste your{' '}
              <span className="italic">client id and client secret</span> below.
            </div>
          }
        />

        <FieldInput name="clientId" label="Client ID" placeholder="123456789" />

        <FieldInput
          name="clientSecret"
          label="Client Secret"
          placeholder="ABC123DEF456"
        />

        <div className="flex justify-between items-end">
          <Button
            name="Docs"
            label="GitHub Docs"
            class="mt-2"
            icon={BookIcon}
            size={12}
            url={Constants.GITHUB_DOCS.OAUTH_URL}
          />

          <Button
            name="Login"
            label="Login"
            class="px-4 py-2 mt-2 !text-sm"
            icon={SignInIcon}
            size={16}
            disabled={submitting || pristine}
            type="submit"
          />
        </div>
      </form>
    );
  };

  const login = useCallback(async (data: IValues) => {
    try {
      await loginWithOAuthApp(data as AuthOptionsOAuthApp);
    } catch (err) {
      // Skip
    }
  }, []);

  return (
    <div className="flex-1 bg-white dark:bg-gray-dark dark:text-white">
      <div className="flex justify-between items-center mt-4 py-2 mx-8">
        <button
          type="button"
          className="focus:outline-none"
          title="Go Back"
          onClick={() => navigate(-1)}
        >
          <ArrowLeftIcon
            size={20}
            className="hover:text-gray-400"
            aria-label="Go Back"
          />
        </button>

        <h3 className="text-lg font-semibold justify-center">
          <PersonIcon size={20} className="mr-2" />
          Login with OAuth App
        </h3>
      </div>

      <div className="flex-1 px-8">
        <Form
          initialValues={{
            hostname: '',
            clientId: '',
            clientSecret: '',
          }}
          onSubmit={login}
          validate={validate}
        >
          {renderForm}
        </Form>
      </div>
    </div>
  );
};

1	import {	2✔
2	ArrowLeftIcon,
3	BookIcon,
4	PersonIcon,
5	SignInIcon,
6	} from '@primer/octicons-react';
7
8	import { type FC, useCallback, useContext } from 'react';	2✔
9	import { Form, type FormRenderProps } from 'react-final-form';	2✔
10	import { useNavigate } from 'react-router-dom';	2✔
11
12	import { Button } from '../components/fields/Button';	2✔
13	import { FieldInput } from '../components/fields/FieldInput';	2✔
14	import { AppContext } from '../context/App';	2✔
15	import {	2✔
16	getNewOAuthAppURL,
17	isValidClientId,
18	isValidHostname,
19	isValidToken,
20	} from '../utils/auth';
21	import type { AuthOptionsOAuthApp } from '../utils/auth/types';
22	import Constants from '../utils/constants';	2✔
23
24	interface IValues {
25	hostname?: string;
26	clientId?: string;
27	clientSecret?: string;
28	}
29
30	interface IFormErrors {
31	hostname?: string;
32	clientId?: string;
33	clientSecret?: string;
34	}
35
36	export const validate = (values: IValues): IFormErrors => {	2✔
37	const errors: IFormErrors = {};	32✔
38
39	if (!values.hostname) {	32✔
40	errors.hostname = 'Required';	18✔
41	} else if (!isValidHostname(values.hostname)) {	14✔
42	errors.hostname = 'Invalid hostname.';	12✔
43	}
44
45	if (!values.clientId) {	32✔
46	errors.clientId = 'Required';	22✔
47	} else if (!isValidClientId(values.clientId)) {	10✔
48	errors.clientId = 'Invalid client id.';	10✔
49	}
50
51	if (!values.clientSecret) {	32✔
52	errors.clientSecret = 'Required';	24✔
53	} else if (!isValidToken(values.clientSecret)) {	8✔
54	errors.clientSecret = 'Invalid client secret.';	8✔
55	}
56
57	return errors;	32✔
58	};
59
60	export const LoginWithOAuthApp: FC = () => {	2✔
61	const { loginWithOAuthApp } = useContext(AppContext);	12✔
62	const navigate = useNavigate();	12✔
63
64	const renderForm = (formProps: FormRenderProps) => {	12✔
65	const { handleSubmit, submitting, pristine, values } = formProps;	32✔
66
67	return (	32✔
68	<form onSubmit={handleSubmit}>
69	<FieldInput
70	name="hostname"
71	label="Hostname"
72	placeholder="github.company.com"
73	helpText={
74	<div className="mb-1">
75	<Button
76	name="Create new OAuth App"
77	label="Create new OAuth App"
78	disabled={!values.hostname}
79	icon={PersonIcon}
80	size={12}
81	url={getNewOAuthAppURL(values.hostname)}
82	/>{' '}
83	on GitHub then paste your{' '}
84	<span className="italic">client id and client secret</span> below.
85	</div>
86	}
87	/>
88
89	<FieldInput name="clientId" label="Client ID" placeholder="123456789" />
90
91	<FieldInput
92	name="clientSecret"
93	label="Client Secret"
94	placeholder="ABC123DEF456"
95	/>
96
97	<div className="flex justify-between items-end">
98	<Button
99	name="Docs"
100	label="GitHub Docs"
101	class="mt-2"
102	icon={BookIcon}
103	size={12}
104	url={Constants.GITHUB_DOCS.OAUTH_URL}
105	/>
106
107	<Button
108	name="Login"
109	label="Login"
110	class="px-4 py-2 mt-2 !text-sm"
111	icon={SignInIcon}
112	size={16}
113	disabled={submitting \|\| pristine}	32✔
114	type="submit"
115	/>
116	</div>
117	</form>
118	);
119	};
120
121	const login = useCallback(async (data: IValues) => {	12✔
122	try {	×
NEW 123	await loginWithOAuthApp(data as AuthOptionsOAuthApp);	×
124	} catch (err) {
125	// Skip
126	}
127	}, []);
128
129	return (	12✔
130	<div className="flex-1 bg-white dark:bg-gray-dark dark:text-white">
131	<div className="flex justify-between items-center mt-4 py-2 mx-8">
132	<button
133	type="button"
134	className="focus:outline-none"
135	title="Go Back"
136	onClick={() => navigate(-1)}	2✔
137	>
138	<ArrowLeftIcon
139	size={20}
140	className="hover:text-gray-400"
141	aria-label="Go Back"
142	/>
143	</button>
144
145	<h3 className="text-lg font-semibold justify-center">
146	<PersonIcon size={20} className="mr-2" />
147	Login with OAuth App
148	</h3>
149	</div>
150
151	<div className="flex-1 px-8">
152	<Form
153	initialValues={{
154	hostname: '',
155	clientId: '',
156	clientSecret: '',
157	}}
158	onSubmit={login}
159	validate={validate}
160	>
161	{renderForm}
162	</Form>
163	</div>
164	</div>
165	);
166	};

gitify-app / gitify / 9223589095

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous