feat(tenancy): add team invitation acceptance page
Some checks failed
Some checks failed
New standalone page at /store/{store_code}/invitation/accept?token=xxx
where invited team members can:
- Review their name and email (pre-filled from invitation)
- Set their password
- Accept the invitation
Page handles all routing modes (dev path, platform path, prod subdomain,
custom domain) via store context middleware. After acceptance, redirects
to the platform-aware store login page.
New service method get_invitation_info() validates the token and returns
invitation details without modifying anything.
Error states: expired token, already accepted, invalid token.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,224 @@
|
||||
{# app/modules/tenancy/templates/tenancy/store/invitation-accept.html #}
|
||||
{# Standalone invitation acceptance page - does NOT extend store/base.html #}
|
||||
<!DOCTYPE html>
|
||||
<html :class="{ 'dark': dark }" x-data="invitationAccept()" lang="{{ current_language|default('en') }}">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Accept Invitation - {{ invitation.store_name if invitation else 'Store' }}</title>
|
||||
<link href="/static/shared/fonts/inter.css" rel="stylesheet" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='store/css/tailwind.output.css') }}" />
|
||||
<style>
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
<script src="{{ url_for('static', path='shared/js/dev-toolbar.js') }}"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex items-center min-h-screen p-6 bg-gray-50 dark:bg-gray-900" x-cloak>
|
||||
<div class="flex-1 h-full max-w-4xl mx-auto overflow-hidden bg-white rounded-lg shadow-xl dark:bg-gray-800">
|
||||
<div class="flex flex-col overflow-y-auto md:flex-row">
|
||||
<div class="h-32 md:h-auto md:w-1/2">
|
||||
<img aria-hidden="true" class="object-cover w-full h-full dark:hidden"
|
||||
src="{{ url_for('static', path='store/img/login-office.jpeg') }}" alt="Office" />
|
||||
<img aria-hidden="true" class="hidden object-cover w-full h-full dark:block"
|
||||
src="{{ url_for('static', path='store/img/login-office-dark.jpeg') }}" alt="Office" />
|
||||
</div>
|
||||
<div class="flex items-center justify-center p-6 sm:p-12 md:w-1/2">
|
||||
<div class="w-full">
|
||||
|
||||
{% if not invitation or not invitation.valid %}
|
||||
{# ==================== ERROR STATE ==================== #}
|
||||
<div class="text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-red-100 dark:bg-red-900">
|
||||
<svg class="w-8 h-8 text-red-600 dark:text-red-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
{% if invitation and invitation.error == 'expired' %}
|
||||
<h2 class="mb-2 text-xl font-semibold text-gray-700 dark:text-gray-200">Invitation Expired</h2>
|
||||
<p class="mb-6 text-sm text-gray-600 dark:text-gray-400">
|
||||
This invitation has expired. Please ask <strong>{{ invitation.store_name }}</strong> to send you a new one.
|
||||
</p>
|
||||
{% elif invitation and invitation.error == 'already_accepted' %}
|
||||
<h2 class="mb-2 text-xl font-semibold text-gray-700 dark:text-gray-200">Already Accepted</h2>
|
||||
<p class="mb-6 text-sm text-gray-600 dark:text-gray-400">
|
||||
This invitation has already been accepted. You can log in to <strong>{{ invitation.store_name }}</strong>.
|
||||
</p>
|
||||
{% else %}
|
||||
<h2 class="mb-2 text-xl font-semibold text-gray-700 dark:text-gray-200">Invalid Invitation</h2>
|
||||
<p class="mb-6 text-sm text-gray-600 dark:text-gray-400">
|
||||
This invitation link is not valid. Please check your email for the correct link.
|
||||
</p>
|
||||
{% endif %}
|
||||
<a href="/store/{{ store_code }}/login"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700">
|
||||
Go to Login
|
||||
</a>
|
||||
</div>
|
||||
{% else %}
|
||||
{# ==================== ACCEPTANCE FORM ==================== #}
|
||||
|
||||
{# Store info header #}
|
||||
<div class="mb-6 text-center">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-purple-100 dark:bg-purple-600">
|
||||
<span class="text-2xl font-bold text-purple-600 dark:text-purple-100">{{ invitation.store_name[:1] | upper }}</span>
|
||||
</div>
|
||||
<h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200">{{ invitation.store_name }}</h2>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||
You've been invited as <strong class="text-purple-600 dark:text-purple-400">{{ invitation.role_name }}</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h1 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Complete Your Account
|
||||
</h1>
|
||||
|
||||
{# Alert Messages #}
|
||||
<div x-show="error" x-text="error"
|
||||
class="mb-4 p-3 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-900 dark:text-red-200" x-cloak></div>
|
||||
|
||||
<div x-show="success"
|
||||
class="mb-4 p-3 text-sm text-green-700 bg-green-100 rounded-lg dark:bg-green-900 dark:text-green-200" x-cloak>
|
||||
<p class="font-medium">Account activated!</p>
|
||||
<p>Redirecting to login...</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="acceptInvitation()" x-show="!success">
|
||||
{# Name fields #}
|
||||
<div class="grid grid-cols-2 gap-3 mb-4">
|
||||
<label class="block text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">First Name</span>
|
||||
<input type="text" x-model="form.first_name" required
|
||||
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input" />
|
||||
</label>
|
||||
<label class="block text-sm">
|
||||
<span class="text-gray-700 dark:text-gray-400">Last Name</span>
|
||||
<input type="text" x-model="form.last_name" required
|
||||
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{# Email (read-only) #}
|
||||
<label class="block text-sm mb-4">
|
||||
<span class="text-gray-700 dark:text-gray-400">Email</span>
|
||||
<input type="email" :value="email" readonly
|
||||
class="block w-full mt-1 text-sm bg-gray-50 dark:bg-gray-600 dark:border-gray-600 dark:text-gray-300 form-input cursor-not-allowed" />
|
||||
</label>
|
||||
|
||||
{# Password #}
|
||||
<label class="block text-sm mb-4">
|
||||
<span class="text-gray-700 dark:text-gray-400">Password</span>
|
||||
<input type="password" x-model="form.password" required minlength="8"
|
||||
placeholder="Min 8 chars, upper + lower + digit"
|
||||
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input" />
|
||||
</label>
|
||||
|
||||
{# Confirm Password #}
|
||||
<label class="block text-sm mb-6">
|
||||
<span class="text-gray-700 dark:text-gray-400">Confirm Password</span>
|
||||
<input type="password" x-model="confirmPassword" required
|
||||
class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input" />
|
||||
<span x-show="confirmPassword && form.password !== confirmPassword"
|
||||
class="text-xs text-red-600 mt-1">Passwords do not match</span>
|
||||
</label>
|
||||
|
||||
{# Submit #}
|
||||
<button type="submit"
|
||||
:disabled="loading || form.password !== confirmPassword || !form.password"
|
||||
class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<span x-show="!loading">Accept Invitation</span>
|
||||
<span x-show="loading">Activating...</span>
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>window.FRONTEND_TYPE = '{{ frontend_type | default("store") }}';</script>
|
||||
<script defer src="{{ url_for('static', path='shared/js/log-config.js') }}"></script>
|
||||
<script defer src="{{ url_for('static', path='shared/js/icons.js') }}"></script>
|
||||
<script defer src="{{ url_for('static', path='shared/js/api-client.js') }}"></script>
|
||||
<script>
|
||||
(function() {
|
||||
var script = document.createElement('script');
|
||||
script.defer = true;
|
||||
script.src = 'https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js';
|
||||
script.onerror = function() {
|
||||
var fallbackScript = document.createElement('script');
|
||||
fallbackScript.defer = true;
|
||||
fallbackScript.src = '{{ url_for("static", path="shared/js/lib/alpine.min.js") }}';
|
||||
document.head.appendChild(fallbackScript);
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
window.STORE_PLATFORM_CODE = {{ platform_code|tojson }};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function invitationAccept() {
|
||||
return {
|
||||
dark: localStorage.getItem('dark') === 'true',
|
||||
token: '{{ token }}',
|
||||
storeCode: '{{ store_code }}',
|
||||
email: '{{ invitation.email if invitation and invitation.valid else "" }}',
|
||||
form: {
|
||||
first_name: '{{ invitation.first_name if invitation and invitation.valid and invitation.first_name else "" }}',
|
||||
last_name: '{{ invitation.last_name if invitation and invitation.valid and invitation.last_name else "" }}',
|
||||
password: '',
|
||||
},
|
||||
confirmPassword: '',
|
||||
loading: false,
|
||||
error: null,
|
||||
success: false,
|
||||
|
||||
async acceptInvitation() {
|
||||
if (this.form.password !== this.confirmPassword) {
|
||||
this.error = 'Passwords do not match';
|
||||
return;
|
||||
}
|
||||
if (this.form.password.length < 8) {
|
||||
this.error = 'Password must be at least 8 characters';
|
||||
return;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
await apiClient.post('/store/team/accept-invitation', {
|
||||
invitation_token: this.token,
|
||||
password: this.form.password,
|
||||
first_name: this.form.first_name,
|
||||
last_name: this.form.last_name,
|
||||
});
|
||||
|
||||
this.success = true;
|
||||
|
||||
// Build login URL (platform-aware)
|
||||
const platformCode = window.STORE_PLATFORM_CODE;
|
||||
const basePath = platformCode
|
||||
? `/platforms/${platformCode}/store/${this.storeCode}`
|
||||
: `/store/${this.storeCode}`;
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = `${basePath}/login`;
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
this.error = err.message || 'Failed to accept invitation. Please try again.';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user