+
-
-
+
+
{{ username?.length || 0 }}/20
+
+
+
{{ errorMessage }}
-
- {{ $t('auth.username.available') }}
-
-
.
-
{{ username?.length || 0 }}/25
-
{{ $t('auth.username.recommendations') }}
-
@@ -121,6 +140,8 @@ const debouncedUsername = useDebounce(username, 500)
const errorMessage = ref('')
const isSubmitting = ref(false)
const loading = ref(false)
+const showAllRecommendations = ref(false)
+const recommendationsToShow = 2 // Show 2 recommendations initially
const emit = defineEmits<{
(e: 'next', username: string): void
@@ -168,8 +189,8 @@ const validateUsername = (value: string | null) => {
return
}
- if (value.length > 25){
- errorMessage.value = 'Username must be shorter than 25 characters'
+ if (value.length > 20){
+ errorMessage.value = 'Username must be shorter than 20 characters'
return
}
@@ -198,6 +219,14 @@ const isValid = computed(() => {
return username.value && username.value.length >= 3 && !errorMessage.value
})
+const displayedRecommendations = computed(() => {
+ if (!props.Recommendations) return []
+ if (showAllRecommendations.value) {
+ return props.Recommendations
+ }
+ return props.Recommendations.slice(0, recommendationsToShow)
+})
+
const usernameMutation = useUpdateUsernameMutation(
props.Recommendations[0],
(data) => {
diff --git a/app/modules/auth/components/subComponents/CompleteAccountComponents/WhoToFollow.vue b/app/modules/auth/components/subComponents/CompleteAccountComponents/WhoToFollow.vue
new file mode 100644
index 00000000..664bc2ce
--- /dev/null
+++ b/app/modules/auth/components/subComponents/CompleteAccountComponents/WhoToFollow.vue
@@ -0,0 +1,174 @@
+
+
+
+
+
+
+
+
+ {{ $t('auth.whoToFollow.title') }}
+ {{ $t('auth.whoToFollow.info') }}
+
+
+ {{ $t('auth.whoToFollow.requirement') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/modules/auth/components/subComponents/signupComponents/FinalRegister.vue b/app/modules/auth/components/subComponents/signupComponents/FinalRegister.vue
index ca8ab5c0..067089a4 100644
--- a/app/modules/auth/components/subComponents/signupComponents/FinalRegister.vue
+++ b/app/modules/auth/components/subComponents/signupComponents/FinalRegister.vue
@@ -118,7 +118,8 @@ const clearPasswordError = () => {
passwordError.value = ''
errorMessage.value = ''
}
-
+const config = useRuntimeConfig()
+const isTest = config.public.etest?.toString() === 'true'
const onNext = () => {
// Validate before submitting
if (!validatePasswordField()) {
@@ -127,6 +128,15 @@ const onNext = () => {
errorMessage.value = '' // Clear previous errors
loading.value = true
+ if (!props.username || isTest) {
+ registerMutation.mutate({
+ Email: props.Email,
+ Username: `user${Date.now()}`,
+ Password: password.value,
+ Language: 'en',
+ })
+ return
+ }
registerMutation.mutate({
Email: props.Email,
Username: props.username,
diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json
index 25d235e1..6494e602 100644
--- a/i18n/locales/ar.json
+++ b/i18n/locales/ar.json
@@ -93,9 +93,12 @@
"username": {
"title": "ماذا يجب أن نسميك؟",
"info": "اسم المستخدم الخاص بك فريد. يمكنك دائماً تغييره لاحقاً",
+ "label": "اسم المستخدم",
"placeholder": "اسم المستخدم",
"available": "متاح!",
- "recommendations": "أسماء المستخدمين الموصى بها"
+ "recommendations": "أسماء المستخدمين الموصى بها",
+ "showMore": "عرض المزيد",
+ "showLess": "إظهار أقل"
},
"profilePicture": {
"title": "اختر صورة ملفك الشخصي",
@@ -155,12 +158,21 @@
"passwordMismatch": "كلمتا المرور غير متطابقتين."
},
"language": {
- "title": "اختر لغتك",
- "info": "سيساعدنا ذلك على تخصيص تجربتك في Yapper"
+ "title": "اختر اللغة",
+ "info": "ستتمكن من رؤية المنشورات والأشخاص والمواضيع الرائجة بأي لغة تختارها.",
+ "showMore": "عرض المزيد"
},
"interests": {
- "title": "ما المجالات التي تهمك؟",
- "info": "اختر 3 اهتمامات على الأقل لمساعدتنا في تخصيص محتواك"
+ "title": "ماذا تريد أن ترى على Yapper؟",
+ "info": "اختر ما يعجبك، وسنخصص تجربتك في Yapper مع المزيد مما تهتم به.",
+ "selected": "من 1 تم الاختيار"
+ },
+ "whoToFollow": {
+ "title": "لا تفوت",
+ "info": "عندما تتابع شخصاً ما، سترى منشوراته في خطك الزمني. ستحصل أيضاً على توصيات أكثر صلة.",
+ "requirement": "تابع حساب واحد أو أكثر",
+ "follow": "متابعة",
+ "following": "متابَع"
},
"validation": {
"emailRequired": "البريد الإلكتروني مطلوب",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index bec21e08..fa4eb633 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -117,9 +117,12 @@
"username": {
"title": "What should we call you?",
"info": "Your username is unique. You can always change it later.",
+ "label": "Username",
"placeholder": "username",
"available": "Available!",
- "recommendations": "Recommended usernames:"
+ "recommendations": "Recommended usernames:",
+ "showMore": "Show more",
+ "showLess": "Show less"
},
"profilePicture": {
"title": "Pick a profile picture",
@@ -155,12 +158,21 @@
"passwordMismatch": "Passwords do not match."
},
"language": {
- "title": "Select your language",
- "info": "This will help us personalize your Yapper experience."
+ "title": "Select language",
+ "info": "You'll be able to see posts, people, and trends in any languages you choose.",
+ "showMore": "Show more"
},
"interests": {
- "title": "What are you interested in?",
- "info": "Select at least 3 interests to help us tailor your feed."
+ "title": "What do you want to see on Yapper?",
+ "info": "Choose what you like, and we'll customize your Yapper experience with more of what you're interested in.",
+ "selected": "of 1 selected"
+ },
+ "whoToFollow": {
+ "title": "Don't miss out",
+ "info": "When you follow someone, you'll see their posts in your Timeline. You'll also get more relevant recommendations.",
+ "requirement": "Follow 1 or more accounts",
+ "follow": "Follow",
+ "following": "Following"
},
"validation": {
"emailRequired": "Email is required",