Add git download page (#1742)

src/locales/en.ts

@@ -20,6 +20,17 @@ export default {
       windows: 'Windows (Nvidia GPU with CUDA support)'
     }
   },
+  downloadGit: {
+    title: 'Download git',
+    message:
+      'Unable to locate git.  A working copy of git is required for normal operation.',
+    instructions:
+      'Please download and install the latest version for your operating system.  The Download git button below opens the git-scm.com downloads page.',
+    warning:
+      'If you are sure you do not need git installed, or there has been a mistake, you may click Skip to byapss this check.  Attempting to run ComfyUI without a working copy of git is not currently supported.',
+    gitWebsite: 'Download git',
+    skip: 'Skip'
+  },
   install: {
     installLocation: 'Install Location',
     migration: 'Migration',

src/router.ts

@@ -78,6 +78,12 @@ const router = createRouter({
           name: 'NotSupportedView',
           component: () => import('@/views/NotSupportedView.vue'),
           beforeEnter: guardElectronAccess
+        },
+        {
+          path: 'download-git',
+          name: 'DownloadGitView',
+          component: () => import('@/views/DownloadGitView.vue'),
+          beforeEnter: guardElectronAccess
         }
       ]
     }

src/views/DownloadGitView.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="font-sans w-screen h-screen mx-0 grid place-items-center justify-center items-center text-neutral-900 bg-neutral-300 pointer-events-auto"
+  >
+    <div
+      class="col-start-1 h-screen row-start-1 place-content-center mx-auto overflow-y-auto"
+    >
+      <div
+        class="max-w-screen-sm flex flex-col gap-8 p-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-no-repeat bg-right-top bg-origin-padding"
+      >
+        <!-- Header -->
+        <h1 class="mt-24 text-4xl font-bold text-red-500">
+          {{ $t('downloadGit.title') }}
+        </h1>
+
+        <!-- Message -->
+        <div class="space-y-4">
+          <p class="text-xl">
+            {{ $t('downloadGit.message') }}
+          </p>
+          <p class="text-xl">
+            {{ $t('downloadGit.instructions') }}
+          </p>
+          <p class="text-m">
+            {{ $t('downloadGit.warning') }}
+          </p>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex gap-4 flex-row-reverse">
+          <Button
+            :label="$t('downloadGit.gitWebsite')"
+            icon="pi pi-external-link"
+            icon-pos="right"
+            @click="openGitDownloads"
+            severity="primary"
+          />
+          <Button
+            :label="$t('downloadGit.skip')"
+            icon="pi pi-exclamation-triangle"
+            @click="skipGit"
+            severity="secondary"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useRouter } from 'vue-router'
+
+const openGitDownloads = () => {
+  window.open('https://git-scm.com/downloads/', '_blank')
+}
+
+const skipGit = () => {
+  console.warn('pushing')
+  const router = useRouter()
+  router.push('install')
+}
+</script>