Skip to content

Commit

Permalink
Merge pull request #324 from torusresearch/fix/vue-demo-update-valida…
Browse files Browse the repository at this point in the history 
…tion

Update validation
  • Loading branch information
@chaitanyapotti
chaitanyapotti authored Jul 26, 2024
2 parents b7a08df + c1dfd8b commit d03ef52
Showing 1 changed file with 45 additions and 4 deletions.
49 changes: 45 additions & 4 deletions examples/vue-example/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,9 +192,10 @@
<div class="text-app-gray-500 mt-2">This demo show how to use Openlogin SDK to login and sign messages using Openlogin SDK.</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5 mt-5">
<div class="flex items-start w-full gap-2 grid grid-cols-1">
<Toggle id="mpc" v-model="useMpc" :show-label="true" :size="'small'" :label-disabled="'MPC'" :label-enabled="'MPC'" />
<Toggle id="mpc" v-model="useMpc" :show-label="true" :size="'small'" :label-disabled="'MPC'" :label-enabled="'MPC'" data-testid="mpc"/>
<Toggle
id="walletKey"
data-testid="walletKey"
v-model="useWalletKey"
:show-label="true"
:size="'small'"
Expand All @@ -203,6 +204,7 @@
/>
<Toggle
id="whitelabel"
data-testid="whitelabel"
v-model="isWhiteLabelEnabled"
:show-label="true"
:size="'small'"
Expand All @@ -214,6 +216,7 @@
<div>
<Select
v-model="selectedBuildEnv"
data-testid="buildEnv"
class="mt-3"
label="Select Build Env*"
aria-label="Select Build Env*"
Expand All @@ -227,6 +230,7 @@
<div class="flex items-start w-full gap-2">
<Select
v-model="selectedMFAFactors"
data-testid="mfaFactors"
class="mt-3"
label="Select MFA Factors"
aria-label="Select MFA Factor"
Expand All @@ -239,11 +243,14 @@
<div class="flex items-start w-full gap-2">
<Select
v-model="selectedMandatoryMFAFactors"
data-testid="mandatoryMfaFactors"
class="mt-3"
label="Select Mandatory MFA Factors"
aria-label="Select Mandatory MFA Factor"
aria-label="Select Mandatory MFA Factor"
placeholder="Select Mandatory MFA Factor"
:multiple="true"
:helperText="!isValidMFASelection ? `One factor other than device factor must be mandatory` : ''"
:error="!isValidMFASelection"
:multiple="true"
:show-check-box="true"
:options="
Object.entries(MFA_FACTOR)
Expand All @@ -263,6 +270,7 @@
<div class="mt-3">
<TextField
v-model="whitelabelConfig.appName"
data-testid="appName"
class="mt-3"
label="Enter App Name"
aria-label="Enter App Name"
Expand All @@ -272,6 +280,7 @@
<div class="mt-3">
<TextField
v-model="whitelabelConfig.appUrl"
data-testid="appUrl"
class="mt-3"
label="Enter App URL"
aria-label="Enter App URL"
Expand All @@ -281,6 +290,7 @@
<div class="mt-3">
<Select
v-model="whitelabelConfig.defaultLanguage"
data-testid="defaultLanguage"
class="mt-3"
label="Select Language*"
aria-label="Select Language*"
Expand All @@ -293,6 +303,7 @@
<div class="mt-3">
<TextField
v-model="whitelabelConfig.logoLight"
data-testid="logoLight"
class="mt-3"
label="Enter logo url"
aria-label="Enter logo url"
Expand All @@ -302,6 +313,7 @@
<div class="mt-3">
<TextField
v-model="whitelabelConfig.logoDark"
data-testid="logoDark"
class="mt-3"
label="Enter dark logo url"
aria-label="Enter dark logo url"
Expand All @@ -311,6 +323,7 @@
<div class="mt-3">
<Toggle
id="useLogoLoader"
data-testid="useLogoLoader"
v-model="whitelabelConfig.useLogoLoader"
:show-label="true"
:size="'small'"
Expand All @@ -321,6 +334,7 @@
<div class="mt-3">
<TextField
:model-value="whitelabelConfig.theme?.primary"
data-testid="primaryColor"
class="mt-3"
label="Enter primary color"
aria-label="Enter primary color"
Expand All @@ -345,6 +359,7 @@
<div class="mt-3">
<TextField
:model-value="whitelabelConfig.theme?.onPrimary"
data-testid="onPrimaryColor"
class="mt-3"
label="Enter primary color"
aria-label="Enter primary color"
Expand All @@ -370,6 +385,7 @@
<div>
<Select
v-model="selectedMfaLevel"
data-testid="mfaLevel"
class="mt-3"
label="Select MFA level"
aria-label="Select MFA level"
Expand All @@ -393,6 +409,7 @@
<div>
<TextField
v-model="customSdkUrl"
data-testid="customSdkUrl"
class="mt-3"
label="Enter custom url"
aria-label="Enter custom url"
Expand All @@ -403,6 +420,7 @@
<div>
<Select
v-model="selectedOpenloginNetwork"
data-testid="openloginNetwork"
class="mt-3"
label="Select Openlogin Network*"
aria-label="Select Openlogin Network*"
Expand All @@ -415,6 +433,7 @@
<div>
<Select
v-model="selectedUxMode"
data-testid="uxMode"
class="mt-3"
label="Select UX Mode*"
aria-label="Select UX Mode*"
Expand All @@ -427,6 +446,7 @@
<div>
<Select
v-model="selectedLoginProvider"
data-testid="loginProvider"
class="mt-3"
label="Select Login Provider*"
aria-label="Select Login Provider*"
Expand All @@ -440,6 +460,7 @@
<Select
v-if="showEmailFlow"
v-model="emailFlowType"
data-testid="emailFlow"
class="mt-3"
label="Select Email Flow*"
aria-label="Select Email Flow*"
Expand All @@ -453,29 +474,36 @@
<TextField
v-if="selectedLoginProvider === LOGIN_PROVIDER.EMAIL_PASSWORDLESS"
v-model="login_hint"
data-testid="loginHint"
class="mt-3"
label="Enter an email"
aria-label="Enter an email"
placeholder="Enter an email"
:error="!isLoginHintAvailable"
:helper-text="!isLoginHintAvailable ? `Email should be valid` : ''"
required
/>
</div>
<div>
<TextField
v-if="selectedLoginProvider === LOGIN_PROVIDER.SMS_PASSWORDLESS"
v-model="login_hint"
data-testid="loginHint"
class="mt-3"
label="Eg: (+{cc}-{number})"
aria-label="Eg: (+{cc}-{number})"
placeholder="Eg: (+{cc}-{number})"
:error="!isLoginHintAvailable"
:helper-text="!isLoginHintAvailable ? `Phone should be valid` : ''"
required
/>
</div>
</div>
<div class="flex justify-center mt-5">
<Button
:class="['w-full !h-auto group py-3 rounded-full flex items-center justify-center']"
:disabled="!isLoginHintAvailable"
data-testid="loginButton"
:disabled="!isValidForm"
type="button"
block
size="md"
Expand Down Expand Up @@ -589,9 +617,20 @@ const mfaSettings = computed(() => {
selectedMFAFactors.value.forEach((factor) => {
mfaSettings[factor] = { enable: true, mandatory: selectedMandatoryMFAFactors.value.includes(factor) };
});
console.log("mfaSettings", mfaSettings);
return mfaSettings;
});
const isValidForm = computed(() => {
return isValidMFASelection.value && isLoginHintAvailable.value;
})
const isValidMFASelection = computed(() => {
if (!selectedMandatoryMFAFactors.value.length) return true;
if (selectedMandatoryMFAFactors.value.every((x) => x === MFA_FACTOR.DEVICE)) return false;
return true;
});
const openloginInstance = computed(() => {
const currentClientId = OPENLOGIN_PROJECT_IDS[selectedOpenloginNetwork.value];
const op = new OpenLogin({
Expand Down Expand Up @@ -782,6 +821,8 @@ const isLongLines = computed(() =>
);
const login = async () => {
if (!isValidForm.value) return
try {
loading.value = true;
if (!openloginInstance.value) {
Expand Down

0 comments on commit d03ef52

Please sign in to comment.