</noscript> <script> function gaEvent(path, event) { if (typeof(gtag) == "function") { gtag('set', 'page_path', path); gtag('event', event); } } </script> <script> const lang = "zh_CHT"; document.addEventListener('alpine:init', () => { Alpine.data('navInit', () => ({ userLoggedIn: false, isProfileMenuVisible: false, isProfileMobileMenuVisible: false, isMobileMenuVisible: false, isMobileUniversityMegaVisible: false, toggleMobileMenu() { this.isProfileMenuVisible = false; this.isProfileMobileMenuVisible = false; this.isMobileMenuVisible = !this.isMobileMenuVisible; if (this.isMobileMenuVisible) { $("body").css("overflow", "hidden"); } else { $("body").css("overflow", "auto"); } console.log(this.isMobileMenuVisible); }, toggleProfileMobileMenu() { this.isMobileMenuVisible = false; this.isProfileMobileMenuVisible = !this.isProfileMobileMenuVisible; }, showProfileMenu() { this.isMobileMenuVisible = false; this.isProfileMenuVisible = true; }, hideProfileMenu() { this.isProfileMenuVisible = false }, toggleMobileUniversityMega() { this.isMobileUniversityMegaVisible = !this.isMobileUniversityMegaVisible; } })); }) </script><div class="fixed inset-0 h-full w-screen overflow-y-scroll no-scrollbar bg-white md:bg-page bg-center bg-cover bg-no-repeat flex flex-row items-stretch justify-center lg:justify-start" x-data="cuhkRegisterData" @submit-sso.window="submitSSOForm($event.detail)"> <div class="hidden lg:flex flex-grow max-w-1/2 lg:justify-end xl:justify-center px-10"> <div class="max-w-112 text-5xl font-jinxuanlatte leading-tight text-primary-darker pt-1/4 lg:ml-10">免費登記，開展從心出發之旅。</div> </div> <div class="relative flex-shrink-0 w-full h-full sm:w-133 bg-white flex flex-col items-center px-4 overflow-y-auto no-scrollbar py-16" > <a href="/cuhk" class="absolute top-6 left-8 flex items-center" x-show="currentPageIndex == 0" x-cloak><img class="w-3.5 h-3.5 mr-1" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/arrow-content.svg" />返回</a> <button class="absolute top-6 left-8 flex items-center" x-show="currentPageIndex > 0" x-cloak @click="goToPrevPage"><img class="w-3.5 h-3.5 mr-1" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/arrow-content.svg" />返回</button> <div class="flex-grow max-w-xs md:w-80 flex flex-col items-stretch" x-show="currentPageIndex == 0" x-cloak> <h3 class="font-jinxuanlatte text-2xl leading-tight text-primary-darker mb-4">實體一對一心理輔導服務</h3> <p class="text-primary-darker tracking-tight">香港中文大學全日制本科生及研究生只需連結大學電郵地址，<b>便可享有學生事務處心理健康及輔導中心提供的實體一對一心理輔導服務。</b></p> <p class="text-primary-darker mt-8 mb-4">我是</p> <div class="w-full flex flex-col items-stretch space-y-2"> <button class="border rounded-full py-2 px-6 hover:border-primary" :class="selectedUserType == 'full_time_student' ? 'bg-primary text-white border-primary' : 'bg-transparent text-content'" :disabled="selectedUserType == 'full_time_student'" @click="selectUserType('full_time_student')">全日制學生</button> <button class="border rounded-full py-2 px-6 hover:border-primary" :class="selectedUserType == 'part_time_student' ? 'bg-primary text-white border-primary' : 'bg-transparent text-content'" :disabled="selectedUserType == 'part_time_student'" @click="selectUserType('part_time_student')">非全日制學生</button> <button class="border rounded-full py-2 px-6 hover:border-primary" :class="selectedUserType == 'cuhk_staff' ? 'bg-primary text-white border-primary' : 'bg-transparent text-content'" :disabled="selectedUserType == 'cuhk_staff'" @click="selectUserType('cuhk_staff')">香港中文大學職員</button> <button class="border rounded-full py-2 px-6 hover:border-primary" :class="selectedUserType == 'other' ? 'bg-primary text-white border-primary' : 'bg-transparent text-content'" :disabled="selectedUserType == 'other'" @click="selectUserType('other')">全部不是</button> </div> <div class="flex-grow flex flex-col items-center justify-end pt-8"> <button class="rounded-full text-white w-36 h-9 mx-auto bg-start hover:bg-start-dark disabled:opacity-30" :disabled="!selectedUserType" @click="goToNextPage">下一步</button> </div> </div> <div class="max-w-xs md:w-80 flex flex-col items-stretch flex-grow" x-show="currentPageIndex == 1" x-cloak> <h3 class="font-jinxuanlatte text-2xl leading-tight text-primary-darker mb-4">實體一對一心理輔導服務</h3> <p class="text-primary-darker tracking-tight">香港中文大學全日制本科生及研究生只需連結大學電郵地址，<b>便可享有學生事務處心理健康及輔導中心提供的實體一對一心理輔導服務。</b></p> <p class="text-primary-darker mt-8 mb-4">你有接受過心理健康及輔導中心的心理輔導服務嗎？</p> <div class="w-full flex flex-col items-stretch space-y-2"> <button class="border rounded-full py-2 px-6 hover:border-primary" :class="selectedServiceUsage == 'yes_currently' ? 'bg-primary text-white border-primary' : 'bg-transparent text-content'" :disabled="selectedServiceUsage == 'yes_currently'" @click="selectedServiceUsage = 'yes_currently'">有，現正接受</button> <button class="border rounded-full py-2 px-6 hover:border-primary" :class="selectedServiceUsage == 'yes_past' ? 'bg-primary text-white border-primary' : 'bg-transparent text-content'" :disabled="selectedServiceUsage == 'yes_past'" @click="selectedServiceUsage = 'yes_past'">有，曾經接受</button> <button class="border rounded-full py-2 px-6 hover:border-primary" :class="selectedServiceUsage == 'never' ? 'bg-primary text-white border-primary' : 'bg-transparent text-content'" :disabled="selectedServiceUsage == 'never'" @click="selectedServiceUsage = 'never'">沒有</button> </div> <div class="flex-grow flex flex-col items-center justify-end pt-8"> <button class="rounded-full text-white w-36 h-9 mx-auto bg-start hover:bg-start-dark disabled:opacity-30" :disabled="!selectedUserType" @click="goToNextPage">下一步</button> </div> </div> <div class="max-w-xs md:w-80 flex flex-col items-stretch flex-grow" x-show="currentPageIndex == 2" x-cloak> <h3 class="font-jinxuanlatte text-2xl leading-tight text-primary-darker mb-4">實體一對一心理輔導服務</h3> <p class="text-primary-darker tracking-tight">香港中文大學全日制本科生及研究生只需連結大學電郵地址，<b>便可享有學生事務處心理健康及輔導中心提供的實體一對一心理輔導服務。</b></p> <div class="mt-8 flex flex-row"> <input type="checkbox" name="agree_to_share_data" id="agree_to_share_data" x-model="formData.agreeToShareData" class="h-4 w-4 border border-gray-400 text-primary mt-1 mr-2" @change="checkAgreeToShare"> <label for="agree_to_share_data">我同意授權，學生事務處心理健康及輔導中心收集及使用我的個人資料，用作聯絡安排和跟進實體心理健康支援服務，根據我的心理健康狀態和需求提供適切的支援。</label> </div> <div class="mt-2 ml-6 mb-8"> <a href="/cuhk-wacc-personal-information-collection-statement" target="_blank" class="mt-2 underline text-primary hover:text-primary-darker" >個人資料收集聲明</a> </div> <div x-show="formData.agreeToShareData" x-cloak> <div class="relative"> <input type="text" class="rounded-full w-full bg-gray-200 pl-14 pr-3 py-2.5 border-0 placeholder-content-placeholder tracking-normal" name="student_id" placeholder="學生編號" x-model="formData.studentId" @change="checkStudentIdInput" @input="checkStudentId"> <i class="fa-solid fa-fw fa-id-card-clip absolute top-2.5 left-6 text-content text-base"></i> </div> <div class="ml-6 text-red-500" x-show="studentIdError" x-collapse x-cloak> 學生編號應為10位數字 </div> <div class="relative" :class="studentIdError ? 'mt-3' : 'mt-4'"> <input type="text" class="rounded-full w-full bg-gray-200 pl-14 pr-3 py-2.5 border-0 placeholder-content-placeholder tracking-normal" name="cuhk_email" disabled placeholder="大學電郵地址" x-model="formData.userLogin"> <i class="fa-solid fa-fw fa-envelope absolute top-2.5 left-6 text-content text-base"></i> </div> <div class="relative mt-4"> <input type="text" class="rounded-full w-full bg-gray-200 pl-14 pr-3 py-2.5 border-0 placeholder-content-placeholder tracking-normal" name="cuhk_email" placeholder="聯絡電話（選填）" x-model="formData.phone" @change="checkPhone" @input="handlePhoneInput"> <i class="fa-solid fa-fw fa-phone absolute top-2.5 left-6 text-content text-base"></i> </div> <div class="ml-6 text-red-500" x-show="phoneError" x-collapse x-cloak> 請輸入8位數字的本地聯絡電話 </div> <p class="mt-2"> 如有需要，學生事務處心理健康及輔導中心或會<b>以電話直接聯絡你</b>，以更快為你安排實體心理輔導服務。 </p> </div> <div x-show="!formData.agreeToShareData" x-cloak> <p class="text-primary-darker">請注意，你必須同意並授權學生事務處心理健康及輔導中心（WACC）收集你的個人資料，<b>才能使用實體支援服務。你亦可以繼續登記使用心導遊+（JCTH+）的網上支援服務。</b></p> </div> <div class="flex-grow flex flex-col items-center justify-end pt-6" x-show="formData.agreeToShareData" x-cloak> <div class="mb-3 text-center" x-show="userAccountExist" x-collapse x-cloak> <p class="mb-1">這個電子郵件地址已經被註冊。</p> <p><a href="/cuhk/login" class="font-bold underline text-primary-darker hover:text-primary" >登入</a>以連接帳戶。</p> </div> <button class="rounded-full text-white h-9 w-36 mx-auto bg-start hover:bg-start-dark disabled:opacity-30" :disabled="isCheckingEmailButtonDisabled" @click="checkStudentIdAndGoToNextPage"> <svg x-show="isCheckingUserEmail" class="mx-auto animate-spin h-5 w-5 text-white" viewBox="0 0 24 24" x-cloak> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" fill="transparent" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> <span x-show="!isCheckingUserEmail" x-cloak>下一步</span> </button> </div> <div class="flex-grow flex flex-col items-center justify-end space-y-4 mt-8" x-show="!formData.agreeToShareData" x-cloak> <button type="button" class="flex items-center justify-center border border-primary text-primary rounded-full w-56 h-8 hover:text-primary-darker hover:border-primary-darker" @click="checkStudentIdAndGoToNextPage">僅登記心導遊+服務</button> <button type="button" class="flex items-center justify-center border border-primary bg-primary text-white rounded-full w-56 h-8 hover:border-primary-darker hover:bg-primary-darker" @click="formData.agreeToShareData = true">登記WACC × 心導遊+服務</button> </div> </div> <div class="max-w-xs md:w-80 flex flex-col items-stretch flex-grow" x-show="currentPageIndex == 3" x-cloak> <div class="mb-8" x-show="selectedUserType == 'full_time_student'" x-cloak> <h3 class="font-jinxuanlatte text-2xl leading-tight text-primary-darker mb-4">我們關注你的個人資料私隱</h3> <p class="text-primary-darker">我們不會向第三方透露閣下的個人資料；同時你的身份亦不會被辨認。</p> </div> <div class="mb-4" x-show="selectedUserType !== 'full_time_student'" x-cloak> <h3 class="font-jinxuanlatte text-2xl leading-tight text-primary-darker mb-4">學生事務處心理健康及輔導中心僅為全日制學生提供支援服務。</h3> <p class="text-primary-darker">你仍可以登記使用心導遊+的網上支援服務。</p> </div> <form method="POST" class="w-full flex flex-col items-stretch" id="register_form"> <div class="relative"> <input type="email" class="rounded-full w-full bg-gray-200 pl-14 pr-3 py-2.5 border-0 placeholder-content-placeholder tracking-normal" placeholder="電郵地址" required name="user_login" x-model="formData.userLogin" :disabled="selectedUserType == 'full_time_student' && formData.agreeToShareData"> <i class="fa-solid fa-fw fa-envelope absolute top-2.5 left-6 text-content text-base"></i> </div> <div class="relative mt-4"> <input :type="isPasswordVisible ? 'text' : 'password'" class="rounded-full w-full bg-gray-200 pl-14 pr-3 py-2.5 border-0 placeholder-content-placeholder tracking-normal" placeholder="密碼 (最少8個英文字母或符號)" name="user_password" minlength="8" required x-model="formData.userPassword"> <i class="fa-solid fa-fw fa-lock absolute top-2.5 left-6 text-content text-base"></i> <button class="absolute right-4 inset-y-0 flex items-center justify-center" type="button" @click="isPasswordVisible = !isPasswordVisible"> <img class="w-5 h-auto" x-show="isPasswordVisible" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/hide-pwd.png" alt="Hide password icon"> <img class="w-5 h-auto" x-show="!isPasswordVisible" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/show-pwd.png" alt="Show password icon"> </button> </div> <div class="relative mt-4"> <input teype="text" class="rounded-full w-full bg-gray-200 pl-14 pr-3 py-2.5 border-0 placeholder-content-placeholder tracking-normal" placeholder="推薦碼 (如適用)" name="company_code" x-model="formData.companyCode"> <i class="fa-regular fa-fw fa-building absolute top-2 left-6 text-content text-base"></i> <button class="absolute right-4 inset-y-0 flex items-center justify-center company-code-icon" type="button"> <img class="h-4 w-auto" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/info.png" alt="Information icon"> <div class="absolute -right-4 top-10 bg-gray-600 text-white w-72 pt-2 pb-3 px-4 rounded text-xs z-10 company-code-tooltip"> <p class="text-primary-light text-sm text-center mb-2">甚麼是推薦碼？</p> <p class="text-left mb-2">如果你的機構或公司正與 JCTH+ 合作，或你被選為我們的研究參加者，你應該會收到一個代碼，以便我們為你作出後續安排。</p> <p class="text-left">想了解更多？歡迎電郵至 <a href="mailto:info@jcthplus.org" class="text-primary-light underline">info@jcthplus.org</a></p> </div> </button> </div> <div class="my-4 flex flex-row items-center leading-loose"> <input class="h-4 w-4 border border-gray-400 text-primary" type="checkbox" name="opt_out_update" id="checkbox_opt_out_update" x-model="formData.optOutUpdate"> <label class="text-content text-sm ml-3 tracking-tight" for="checkbox_opt_out_update">我不想接收最新消息和活動通知</label> </div> <div id="register-error" x-show="isRegisterErrorVisible" x-collapse x-cloak> <div class="py-2 px-4 bg-red-100 border border-red-200 rounded-xl flex items-center"> <p class="text-content inline text-sm font-medium flex-grow" x-text="registerError"></p> <img class="w-4 h-4 cursor-pointer" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/cross-gray.svg" alt="Close icon" @click.stop="isRegisterErrorVisible=false"> </div> </div> <div class="g-recaptcha mt-2 mx-auto" data-sitekey="6Lcs0ykiAAAAANK6HqkcTcHgRDCHmnGE-eDiyHZg" data-callback="recaptchaCallback" data-expired-callback="recaptchaExpiredCallback" data-error-callback="recaptchaExpiredCallback"></div> <button type="button" name="cuhk-auth-submit" value="sign-up" class="text-base font-bold text-white rounded-full h-11 flex items-center justify-center mt-8 bg-start hover:bg-start-dark disabled:opacity-30" :disabled="isRegisterFormSubmitDisabled" @click="submitRegisterForm"> <svg x-show="isRegistering" class="mx-auto animate-spin h-5 w-5 text-white" viewBox="0 0 24 24" x-cloak> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" fill="transparent" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg> <span x-show="!isRegistering" x-cloak>註冊</span> </button> </form> <div class="w-full mt-6 mb-4 text-center" x-show="!formData.agreeToShareData" x-cloak>其他註冊方法</div> <div class="max-w-xs md:w-80 flex flex-col items-stretch justify-start no-scrollbar shrink-0 grow" x-show="!formData.agreeToShareData" x-cloak> <div class="w-full flex flex-row justify-center items-center space-x-6"> <div class="flex flex-col items-center space-y-2 w-16"> <button class="text-white bg-facebook rounded-full h-10 w-10 mx-auto flex items-center justify-center" @click="loginWithFacebook"><img loading="lazy" class="w-full h-auto" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/facebook.png" alt="Facebook SSO"></button> <div class="text-content-light text-xs tracking-normal">Facebook</div> </div> <div class="flex flex-col items-center space-y-2 w-16"> <!-- <button class="bg-white border border-gray-500 rounded-full h-10 w-10 flex justify-center items-center" id="btn-sso-google-signup"><img loading="lazy" class="w-7 h-7" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/google.webp" alt="Google SSO"></button> --> <div hidden id="g_id_onload" data-client_id="721583760522-5i6srb2sp6v3uc98ju31vr9appule7s5.apps.googleusercontent.com" data-context="signin" data-ux_mode="popup" data-callback="handleCredentialResponse" data-auto_prompt="false"></div> <div class="g_id_signin" data-type="icon" data-shape="circle" data-theme="outline" data-text="signin_with" data-size="large"></div> <div class="text-content-light text-xs tracking-normal">Google</div> </div> <div class="flex flex-col items-center space-y-2 w-16"> <button class="bg-black rounded-full h-10 w-10 overflow-hidden" @click="loginWithApple"><img loading="lazy" class="h-10 w-10" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/icons/apple.png" alt="Apple SSO"></button> <div class="text-content-light text-xs tracking-normal">Apple</div> </div> </div> </div> <div class="mt-6"> <!-- <p class="text-base text-center my-6 text-content-light">Already have an account? <button type="button" class="font-bold underline text-primary-darker hover:text-primary" @click="setCurrentSection('login')">Login</button>.</p> --> <p class="text-xs text-content-light leading-normal">點擊「註冊」即表示你同意我們的<a href="/terms-and-conditions" target="_blank" class="underline hover:text-primary">使用條款及細則</a>，<a href="/personal-information-collection-statement" target="_blank" class="underline hover:text-primary">個人資料收集聲明</a>，<a href="/privacy-policy" target="_blank" class="underline hover:text-primary">私隱政策</a>，<a href="/cookie-policy" target="_blank" class="underline hover:text-primary">Cookie 政策</a>和<a href="/consent-form" target="_blank" class="underline hover:text-primary">同意書</a>。</p> </div> </div> </div> </div> <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script> <script> window.fbAsyncInit = function() { FB.init({ appId : '242913894004818', cookie : true, xfbml : true, version : 'v19.0' }); FB.AppEvents.logPageView(); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); document.addEventListener('alpine:init', () => { Alpine.data('cuhkRegisterData', () => ({ currentPageIndex: 0, selectedUserType: null, selectedServiceUsage: null, studentIdError: false, phoneError: false, formData: { agreeToShareData: true, studentId: "", phone: "", userLogin: "", userPassword: "", optOutUpdate: false, companyCode: "", }, isCheckingUserEmail: false, userAccountExist: false, isPasswordVisible: false, isRegistering: false, registerError: null, isRegisterErrorVisible: false, goToNextPage() { if (this.currentPageIndex === 0) { this.currentPageIndex = this.selectedUserType === "full_time_student" ? 1 : 3; } else { this.currentPageIndex++; } }, goToPrevPage() { if (this.selectedUserType === "full_time_student") { this.currentPageIndex--; } else { this.currentPageIndex = 0; } }, selectUserType(type) { this.selectedUserType = type; if (type === "full_time_student") { this.formData.agreeToShareData = true; } else { this.formData.agreeToShareData = false; } this.selectedServiceUsage = null; this.formData.studentId = ""; this.formData.phone = "", this.formData.userLogin = ""; this.formData.userPassword = ""; this.formData.companyCode = ""; this.formData.optOutUpdate = false; }, checkStudentIdInput() { if (this.formData.studentId.length !== 10 || !/^\d{10}$/.test(this.formData.studentId)) { console.log("false"); this.studentIdError = true; } else { console.log("true"); this.studentIdError = false; this.formData.userLogin = this.formData.studentId + "@link.cuhk.edu.hk"; } }, checkStudentId() { if (this.studentIdError) { this.checkStudentIdInput(); } this.userAccountExist = false; }, checkPhone() { this.phoneError = (this.formData.phone !== "" && !/^\d{8}$/.test(this.formData.phone)); }, handlePhoneInput() { if (this.phoneError) { this.checkPhone(); } }, checkStudentIdAndGoToNextPage() { if (this.studentIdError || this.phoneError) return false; if (this.formData.agreeToShareData) { this.isCheckingUserEmail = true; fetch( "/api/1.0/tourheart-db/check-user-by-email?" + new URLSearchParams({ email: this.formData.userLogin }) ) .then((response) => response.json()) .then((data) => { console.log(data); this.isCheckingUserEmail = false; if (data.user_id) { this.userAccountExist = true; } else { this.currentPageIndex++; } }); } else { this.currentPageIndex++; } }, isCheckingEmailButtonDisabled() { return (this.formData.agreeToShareData && (!this.formData.studentId || !this.formData.userLogin || this.studentIdError || this.phoneError)) }, isRegisterFormSubmitDisabled() { if (!this.formData.userLogin || !this.formData.userPassword || !this.$store.registerStore.token) { return true; } console.log("share", this.formData.agreeToShareData); if (this.formData.agreeToShareData) { return !/^\d{10}@link.cuhk.edu.hk$/.test(this.formData.userLogin); } return false; }, checkAgreeToShare() { if (this.formData.agreeToShareData) { this.formData.studentId = ""; this.formData.cuhkEmail = ""; this.formData.phone = ""; this.studentIdError = false; this.phoneError = false; } }, submitRegisterForm() { console.log(this.formData); this.isRegisterErrorVisible = false; if (!document.getElementById("register_form").reportValidity()) { return false; } this.isRegistering = true; fetch(this.formData.agreeToShareData ? "/api/auth/cuhk-landing/wacc-auth-register/" : "/api/auth/register/", { method: "POST", body: JSON.stringify({ user_login: this.formData.userLogin, user_password: this.formData.userPassword, cuhk_user_type: this.selectedUserType, wacc_service_usage: this.selectedServiceUsage, agree_to_share_data: this.formData.agreeToShareData, cuhk_student_id: this.formData.studentId, phone: this.formData.phone, "g-recaptcha-response": this.$store.registerStore.token, language: "zh" }), headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } }) .then((res) => res.json()) .then((data) => { console.log(data); if (data.success) { window.location.replace("/account-verification/?lang=zh"); } else { this.isRegistering = false; this.registerError = data.error["zh"]; this.isRegisterErrorVisible = true; } }) }, loginWithFacebook() { FB.login((response) => { if (response.authResponse) { const formData = { source: "facebook", token: response.authResponse.accessToken }; this.submitSSOForm(formData); } }, { scope: 'public_profile,email' }); }, async loginWithApple() { try { let data = await AppleID.auth.signIn(); const formData = { source: "apple", token: data.authorization.id_token, } if (data.user?.name?.firstName) { formData.first_name = data.user?.name?.firstName } if (data.user?.name?.lastName) { formData.last_name = data.user?.name?.lastName; } this.submitSSOForm(formData); } catch (error) { console.log("Apple login error", error); } }, submitSSOForm(data) { console.log("submit form", data); data.agreed_tnc = true; data.language = "zh"; fetch("/api/auth/login-sso/", { method: "POST", body: JSON.stringify(data), headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } }) .then((res) => res.json()) .then((data) => { console.log(data); if (data.success) { fetch("/api/auth/cuhk-landing/add-user-info/", { method: "POST", body: JSON.stringify({ user_type: this.selectedUserType }), headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } }) .then((res) => res.json()) .then((data) => { window.location.replace("/"); }) } else { this.isRegistering = false; this.registerError = data.error["zh"]; this.isRegisterErrorVisible = true; } }) } })); Alpine.store("registerStore", { token: null, recaptchaVerified(token) { this.token = token; }, recaptchaUnverified() { this.token = null; } }); }); function recaptchaCallback(data) { Alpine.store('registerStore').recaptchaVerified(data); } function recaptchaExpiredCallback(data) { Alpine.store('registerStore').recaptchaUnverified(); } const handleCredentialResponse = (token) => { if (token.credential) { const submitFormEvent = new Event('submit-sso'); submitFormEvent.detail = { source: "google", token: token.credential }; console.log(submitFormEvent); window.dispatchEvent(submitFormEvent); } } </script>