Now it's possible to pass a GitHub URL directly

.eslintrc.cjs

@@ -16,5 +16,6 @@ module.exports = {
     'react-refresh/only-export-components': 'warn',
     'react/react-in-jsx-scope': 'warn',
     'import/no-extraneous-dependencies': 'warn',
+    '@typescript-eslint/no-unused-vars': 'warn',
   },
 }

__tests__/App.test.tsx

@@ -46,6 +46,25 @@ test('Initial load', async () => {
   expect(getByText('GitHub Deployment Cleaner')).toBeInTheDocument();
 });
 
+test('Parsing URL', async () => {
+  const { getByPlaceholderText } = render(<App />);
+  const repoInput = getByPlaceholderText('Fill in your repository name');
+  const userInput = getByPlaceholderText('Fill in your GitHub username');
+  const user = userEvent.setup();
+  await user.click(repoInput);
+  await user.paste('https://github.com/user/repo/something_else');
+  expect(repoInput).toHaveValue('repo');
+  expect(userInput).toHaveValue('user');
+
+  await user.clear(repoInput);
+  await user.clear(userInput);
+
+  await user.click(userInput);
+  await user.paste('https://github.com/loser/repo/something_else');
+  expect(repoInput).toHaveValue('repo');
+  expect(userInput).toHaveValue('loser');
+});
+
 describe.each`
   gitUser    | repo      | token           | time | expected
   ${'user'}  | ${'repo'} | ${'notmytoken'} | ${1} | ${'Access denied!'}  

src/App.tsx

@@ -114,15 +114,41 @@ function Form() {
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    const form = ((event.target as HTMLFormElement).elements as FormCollection);
+    const form = document.forms[0].elements as FormCollection;
     // A trigger for useEffect
     setCredentials({ repo: form.repo.value, user: form.user.value, token: form.token.value });
   };
 
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    if (value.match('https://github.com/')) {
+      const [user, repo, ...rest] = value.replace('https://github.com/', '').split('/');
+      const form = document.forms[0].elements as FormCollection;
+      if (repo && user) {
+        form.repo.value = repo;
+        form.user.value = user;
+      }
+    }
+  };
+
   return (
-    <form onSubmit={handleSubmit} ref={formRef}>
-      <input type="text" name="repo" placeholder="Fill in your repository name" defaultValue={formState.inputs} required />
-      <input type="text" name="user" placeholder="Fill in your GitHub username" defaultValue={formState.inputs} required />
+    <form name="main-form" onSubmit={handleSubmit} ref={formRef}>
+      <input
+        type="text"
+        name="repo"
+        placeholder="Fill in your repository name"
+        defaultValue={formState.inputs}
+        onChange={handleChange}
+        required
+      />
+      <input
+        type="text"
+        name="user"
+        placeholder="Fill in your GitHub username"
+        defaultValue={formState.inputs}
+        onChange={handleChange}
+        required
+      />
       <input type="text" name="token" placeholder="Fill in your GitHub token" defaultValue={formState.inputs} required />
       <button type="submit" style={formState.colors} disabled={formState.disabled}>{formState.button}</button>
     </form>