Files
gochat/frontend/app/javascript/v3/views/auth/signup/Index.vue
T
rogee 321c61aaae Vendor Chatwoot Vue 3 frontend into frontend/
Copy the Chatwoot (v4.14.0) frontend runnable subset into frontend/ for
customization:
- app/javascript/ (Vue SPA: dashboard, widget, sdk, portal, superadmin)
- app/views/ (ERB templates for vite-plugin-ruby entrypoint resolution)
- app/helpers/, app/assets/ (Rails view helpers, static assets)
- enterprise/ (Enterprise edition frontend overlay)
- config/vite.json, vite.config.ts, bin/vite (Vite-Rails toolchain)
- package.json, pnpm-lock.yaml, tailwind/postcss/eslint configs
- Gemfile, Gemfile.lock (vite_rails gem for bin/vite binstub)

Excluded Rails backend: controllers, models, services, jobs, mailers,
policies, db, lib, spec, public, node_modules.

Update references to the new frontend location:
- .gitignore: exclude frontend build artifacts (node_modules, tmp, packs),
  keep frontend/bin/ and frontend/vendor/ via negation
- backend/scripts/parity_frontend_smoke.sh: CHATWOOT_DIR default
  reference/chatwoot -> ../frontend
- backend/scripts/parity_frontend_browser_smoke.mjs: same default update
- AGENTS.md: add frontend section with Rails/Vite coupling notes
- README: architecture tree includes frontend/
2026-07-07 14:56:01 +08:00

87 lines
2.7 KiB
Vue

<script setup>
import { ref, computed, onBeforeMount } from 'vue';
import { useStore } from 'vuex';
import SignupForm from './components/Signup/Form.vue';
import Testimonials from './components/Testimonials/Index.vue';
import Spinner from 'shared/components/Spinner.vue';
import signupBg from 'assets/images/auth/signup-bg.jpg';
const store = useStore();
const isLoading = ref(false);
const globalConfig = computed(() => store.getters['globalConfig/get']);
const isAChatwootInstance = computed(
() => globalConfig.value.installationName === 'Chatwoot'
);
onBeforeMount(() => {
isLoading.value = isAChatwootInstance.value;
});
const resizeContainers = () => {
isLoading.value = false;
};
</script>
<template>
<div
class="relative w-full h-full min-h-screen flex items-center justify-center bg-cover bg-center bg-no-repeat p-4"
:style="{ backgroundImage: `url(${signupBg})` }"
>
<div
class="absolute inset-0 bg-n-gray-12/60 dark:bg-n-gray-1/80 backdrop-blur-sm"
/>
<div
v-show="!isLoading"
class="relative flex max-w-[960px] bg-white dark:bg-n-solid-2 rounded-lg outline outline-1 outline-n-container shadow-sm"
:class="{ 'w-auto xl:w-full': isAChatwootInstance }"
>
<div class="flex-1 flex items-center justify-center py-10 px-10">
<div class="max-w-[420px] w-full">
<div class="mb-6">
<img
:src="globalConfig.logo"
:alt="globalConfig.installationName"
class="block w-auto h-7 dark:hidden"
/>
<img
v-if="globalConfig.logoDark"
:src="globalConfig.logoDark"
:alt="globalConfig.installationName"
class="hidden w-auto h-7 dark:block"
/>
<h2 class="mt-6 text-2xl font-semibold text-n-slate-12">
{{
isAChatwootInstance
? $t('REGISTER.GET_STARTED')
: $t('REGISTER.TRY_WOOT')
}}
</h2>
<p class="mt-2 text-sm text-n-slate-11">
{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}{{ ' '
}}<router-link
class="text-n-blue-10 font-medium hover:text-n-blue-11"
to="/app/login"
>
{{ $t('LOGIN.SUBMIT') }}
</router-link>
</p>
</div>
<SignupForm />
</div>
</div>
<Testimonials
v-if="isAChatwootInstance"
class="flex-1 hidden xl:flex"
@resize-containers="resizeContainers"
/>
</div>
<div
v-show="isLoading"
class="relative flex items-center justify-center w-full h-full"
>
<Spinner color-scheme="primary" size="" />
</div>
</div>
</template>