Login
The Login page allows a user to get authenticated. The user can log in by either of the following methods
- Login by OTP
- Login by username and password
- Login by social accounts
This login method is configured from the platform according to need. you can configure the look and feel of a login page and provide your credential for OAuth providers.
Login by OTP
The user will enter his Mobile number, OTP will be sent to the respective Mobile number after validating the OTP user will redirect to either the edit profile page if a new user or the respective page with a logged-in state.
Arguments
Context | Type | Description |
---|---|---|
is_password_true | Boolean | Toggle to Password Login |
Example:
The below example will render a login otp.
<login-otp v-if="isOtp" @is_password_true="togglePassword" />
Login by Password
The user will enter his registered Email /Mobile number and password to log in.
Arguments
Context | Type | Description |
---|---|---|
is_otp_true | Boolean | Toggle to OTP Login |
Example:
The below example will render a login password.
<login-password v-if="isPassword" @is_otp_true="toggleOtp" />
Login by social accounts
The user also has the option to log in via social accounts. Using the existing login information from social network providers the user can log in. user will redirect to either the edit profile page if a new user or the respective page with a logged-in state.
Example:
The below example will render a social account login.
theme/templates/pages/login.vue
<fdk-accounts v-slot="accountsData">
<button
v-if="isFacebookButton"
@click="accountsData.facebook.login"
className="facebook-login"
>
<ukt-inline-svg className="facebook-icon" src="facebook" />
{{ accountsData.facebook.displayText }}
</button>
<button
v-if="isGoogleButton"
@click="accountsData.google.login"
className="google-login"
>
<ukt-inline-svg className="google-icon" src="google" />
{{ accountsData.google.displayText }}
</button>
</fdk-accounts>