-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #36 from Web3Auth/feat/email-sms-login
allow sms & email login
- Loading branch information
Showing
3 changed files
with
103 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,10 @@ | ||
| <script setup lang="ts"> | ||
| import { computed, ref } from 'vue' | ||
| import { computed, onMounted, ref, watch } from 'vue' | ||
| import { useWeb3authStore } from '@/store/web3authStore' | ||
| import { LOGIN_PROVIDER } from '@web3auth/openlogin-adapter' | ||
| import useCustomConfig from '@/composables/use-custom-config' | ||
| import useLocales from '@/composables/use-locales' | ||
| import { getUserCountry, validatePhoneNumber } from '@/utils/common' | ||
| import { Card } from '@toruslabs/vue-components/Card' | ||
| import { Icon } from '@toruslabs/vue-components/Icon' | ||
|
|
@@ -14,9 +15,11 @@ import { LoginForm, type SocialLoginObj } from '@toruslabs/vue-components/LoginF | |
| const locales = useLocales() | ||
| const web3Auth = useWeb3authStore() | ||
| const customConfig = useCustomConfig() | ||
| const loginHint = ref<string>('') | ||
| const passwordlessEmailSms = ref<string>('') | ||
| const selectedSocialLogins = ref<string[]>([]) | ||
| const config = computed(() => customConfig.config) | ||
| const countryCode = ref<string | null>(null) | ||
| const isValidPasswordlessInput = ref<boolean>(true) | ||
| const socialLoginsAll = computed((): SocialLoginObj[] => { | ||
| const loginProviders = Object.values(LOGIN_PROVIDER).filter( | ||
|
|
@@ -43,16 +46,46 @@ const socialLogins = computed((): SocialLoginObj[] => { | |
| return socialLoginsAll.value.filter((x) => !selectedSocialLogins.value.includes(x.verifier!)) | ||
| }) | ||
| function passwordlessLogin() { | ||
| web3Auth.connectToWeb3Auth({ | ||
| loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS, | ||
| login_hint: loginHint.value | ||
| }) | ||
| async function passwordlessLogin() { | ||
| const isEmailValid = passwordlessEmailSms.value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i) | ||
| if (isEmailValid) { | ||
| web3Auth.connectToWeb3Auth({ | ||
| loginProvider: LOGIN_PROVIDER.EMAIL_PASSWORDLESS, | ||
| login_hint: passwordlessEmailSms.value | ||
| }) | ||
| return | ||
| } | ||
| const number = passwordlessEmailSms.value.startsWith('+') | ||
| ? passwordlessEmailSms.value | ||
| : `${countryCode.value}${passwordlessEmailSms.value}` | ||
| const result = await validatePhoneNumber(number) | ||
| if (result && typeof result === 'string') { | ||
| web3Auth.connectToWeb3Auth({ | ||
| loginProvider: LOGIN_PROVIDER.SMS_PASSWORDLESS, | ||
| login_hint: result | ||
| }) | ||
| return | ||
| } | ||
| isValidPasswordlessInput.value = false | ||
| } | ||
| watch( | ||
| () => passwordlessEmailSms.value, | ||
| () => { | ||
| isValidPasswordlessInput.value = true | ||
| } | ||
| ) | ||
| function socialLogin(item: SocialLoginObj) { | ||
| web3Auth.connectToWeb3Auth({ loginProvider: item.verifier! }) | ||
| } | ||
| onMounted(async () => { | ||
| const result = await getUserCountry() | ||
| if (result && result.dialCode) { | ||
| countryCode.value = result.dialCode | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
|
|
@@ -118,16 +151,24 @@ function socialLogin(item: SocialLoginObj) { | |
| <template #formBody> | ||
| <form @submit.prevent="passwordlessLogin"> | ||
| <TextField | ||
| v-model="loginHint" | ||
| v-model="passwordlessEmailSms" | ||
| :label="locales.t('social.passwordless-title')" | ||
| pill | ||
| type="email" | ||
| type="text" | ||
| required | ||
| placeholder="E.g. +00-123455/[email protected]" | ||
| :error="!isValidPasswordlessInput" | ||
| :helper-text="isValidPasswordlessInput ? '' : locales.t('social.invalid-input')" | ||
| /> | ||
| <Button type="submit" class="my-4" variant="primary" pill block>{{ | ||
| locales.t('social.continueCustom', { adapter: 'Email or Phone' }) | ||
| }}</Button> | ||
| <Button | ||
| type="submit" | ||
| class="my-4" | ||
| variant="primary" | ||
| pill | ||
| block | ||
| :disabled="!isValidPasswordlessInput" | ||
| >{{ locales.t('social.continueCustom', { adapter: 'Email or Phone' }) }}</Button | ||
| > | ||
| </form> | ||
| </template> | ||
| </LoginForm> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters