feat(auth): add user referral system with invite codes

Generate unique referral codes for users
Allow new users to register with a referral code
Display referral stats and invite link in user profile

frontend/src/views/RegisterView.vue

@@ -2,14 +2,17 @@
 import { Icon } from '@iconify/vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import PageHeader from '../components/PageHeader.vue';
 import StatusMessage from '../components/StatusMessage.vue';
 import { iconMail } from '../icons';
 import { api } from '../services/api';
 
+const route = useRoute();
 const email = ref('');
 const displayName = ref('');
 const password = ref('');
+const referralCode = ref(typeof route.query.ref === 'string' ? route.query.ref.trim().toUpperCase() : '');
 const busy = ref(false);
 const message = ref('');
 const errorMessage = ref('');
@@ -24,7 +27,8 @@ async function submitRegister() {
     const response = await api.register({
       email: email.value,
       displayName: displayName.value,
-      password: password.value
+      password: password.value,
+      referralCode: referralCode.value
     });
     message.value = response.message;
   } catch (error) {
@@ -65,6 +69,19 @@ async function submitRegister() {
           />
         </div>
 
+        <div class="field">
+          <label for="register-referral-code">{{ t('auth.referralCode') }}</label>
+          <input
+            id="register-referral-code"
+            v-model="referralCode"
+            autocomplete="off"
+            inputmode="text"
+            maxlength="16"
+            :placeholder="t('auth.referralCodePlaceholder')"
+          />
+          <small class="auth-field-note">{{ t('auth.referralCodeHint') }}</small>
+        </div>
+
         <StatusMessage v-if="message" variant="success">{{ message }}</StatusMessage>
         <StatusMessage v-if="errorMessage" variant="danger">{{ errorMessage }}</StatusMessage>
 

frontend/src/views/UserProfileView.vue

@@ -6,16 +6,19 @@ import PageHeader from '../components/PageHeader.vue';
 import Skeleton from '../components/Skeleton.vue';
 import StatusBadge from '../components/StatusBadge.vue';
 import StatusMessage from '../components/StatusMessage.vue';
-import { iconProfile, iconSave } from '../icons';
-import { api, notifyAuthChange, type AuthUser } from '../services/api';
+import { iconCopy, iconProfile, iconReferral, iconSave } from '../icons';
+import { api, notifyAuthChange, type AuthUser, type ReferralSummary } from '../services/api';
 
 const { t } = useI18n();
 const user = ref<AuthUser | null>(null);
+const referral = ref<ReferralSummary | null>(null);
 const displayName = ref('');
 const loading = ref(true);
 const busy = ref(false);
 const message = ref('');
 const errorMessage = ref('');
+const referralMessage = ref('');
+const referralErrorMessage = ref('');
 
 const trimmedDisplayName = computed(() => displayName.value.trim());
 const hasChanges = computed(() => {
@@ -32,11 +35,21 @@ async function loadProfile() {
   loading.value = true;
   message.value = '';
   errorMessage.value = '';
+  referralMessage.value = '';
+  referralErrorMessage.value = '';
+  referral.value = null;
 
   try {
     const response = await api.me();
     user.value = response.user;
     displayName.value = response.user.displayName;
+
+    try {
+      const referralResponse = await api.referral();
+      referral.value = referralResponse.referral;
+    } catch {
+      referralErrorMessage.value = t('pages.profile.referralLoadFailed');
+    }
   } catch (error) {
     errorMessage.value = error instanceof Error && error.message ? error.message : t('errors.loadFailed');
   } finally {
@@ -67,6 +80,40 @@ async function saveProfile() {
   }
 }
 
+function writeClipboard(value: string): Promise<void> {
+  if (navigator.clipboard?.writeText) {
+    return navigator.clipboard.writeText(value);
+  }
+
+  const textarea = document.createElement('textarea');
+  textarea.value = value;
+  textarea.setAttribute('readonly', '');
+  textarea.style.position = 'fixed';
+  textarea.style.opacity = '0';
+  document.body.append(textarea);
+  textarea.select();
+  const copied = document.execCommand('copy');
+  textarea.remove();
+
+  return copied ? Promise.resolve() : Promise.reject(new Error('Clipboard unavailable'));
+}
+
+async function copyReferralLink() {
+  if (!referral.value) {
+    return;
+  }
+
+  referralMessage.value = '';
+  referralErrorMessage.value = '';
+
+  try {
+    await writeClipboard(referral.value.url);
+    referralMessage.value = t('pages.profile.referralCopied');
+  } catch {
+    referralErrorMessage.value = t('pages.profile.referralCopyFailed');
+  }
+}
+
 onMounted(() => {
   void loadProfile();
 });
@@ -102,6 +149,14 @@ onMounted(() => {
           <Skeleton variant="box" width="120px" height="42px" />
         </div>
       </section>
+      <section class="profile-card profile-card--referral" aria-hidden="true">
+        <Skeleton width="180px" height="28px" />
+        <div class="auth-form">
+          <Skeleton variant="box" height="58px" />
+          <Skeleton variant="box" height="44px" />
+          <Skeleton variant="box" width="120px" height="42px" />
+        </div>
+      </section>
     </div>
 
     <div v-else-if="user" class="profile-layout">
@@ -153,6 +208,42 @@ onMounted(() => {
           </button>
         </form>
       </section>
+
+      <section class="profile-card profile-card--referral" :aria-label="t('pages.profile.referralTitle')">
+        <div class="profile-card__header">
+          <Icon :icon="iconReferral" class="profile-card__icon" aria-hidden="true" />
+          <h2>{{ t('pages.profile.referralTitle') }}</h2>
+        </div>
+
+        <div v-if="referral" class="profile-referral">
+          <div class="profile-referral__metric">
+            <span>{{ t('pages.profile.verifiedReferralCount') }}</span>
+            <strong>{{ referral.verifiedReferralCount }}</strong>
+          </div>
+
+          <div class="field">
+            <label for="profile-referral-code">{{ t('pages.profile.referralCode') }}</label>
+            <input id="profile-referral-code" class="profile-readonly-input profile-code-input" :value="referral.code" readonly />
+          </div>
+
+          <div class="field">
+            <label for="profile-referral-url">{{ t('pages.profile.referralUrl') }}</label>
+            <div class="profile-referral-link-row">
+              <input id="profile-referral-url" class="profile-readonly-input" :value="referral.url" readonly />
+              <button class="ui-button ui-button--blue" type="button" @click="copyReferralLink">
+                <Icon :icon="iconCopy" class="ui-icon" aria-hidden="true" />
+                {{ t('pages.profile.copyReferralLink') }}
+              </button>
+            </div>
+            <small class="profile-field-note">{{ t('pages.profile.referralHint') }}</small>
+          </div>
+
+          <StatusMessage v-if="referralMessage" variant="success">{{ referralMessage }}</StatusMessage>
+          <StatusMessage v-if="referralErrorMessage" variant="danger">{{ referralErrorMessage }}</StatusMessage>
+        </div>
+
+        <StatusMessage v-else-if="referralErrorMessage" variant="danger" :duration="0">{{ referralErrorMessage }}</StatusMessage>
+      </section>
     </div>
 
     <StatusMessage v-else-if="errorMessage" variant="danger" :duration="0">{{ errorMessage }}</StatusMessage>