ms.login

Examples

Ms login (vuejs themes)

<ms-login @success="ms.page.name == 'checkout' ? ms.temp.step=2 : ms.goTo(ms.searchParams.redirect || ms.fromPage?.url || '/');">
    <div v-if="ms.page.name != 'checkout'">
        <span v-if="loginField == 'email'">
            {{ms.filters.translate('Using email')}}
        </span>
        <span v-if="loginField == 'phone'">
            {{ms.filters.translate('Using phone')}}
        </span>
        <span v-if="loginField == 'both'">
            {{ms.filters.translate('Using email/phone')}}
        </span>
    </div>
    <div>
        <div v-if="loginField == 'email'">
            <input type="email" v-model="username" :placeholder="ms.filters.translate('Enter Email Id')" @keyup.enter="login()" />
            <div v-if="errors.username">
                {{ms.filters.translate(errors.username)}}
            </div>
        </div>
        <div v-if="loginField  == 'phone'">
            <ms-addon-tel-input v-model="username" :placeholder="ms.filters.translate('Enter Phone')" autocomplete="off" pattern="[0-9]*" inputmode="numeric" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"></ms-addon-tel-input>
            <div v-if="errors.username">
                {{ms.filters.translate(errors.username)}}
            </div>
        </div>
        <div v-if="loginField  == 'both'">
            <ms-addon-tel-input v-model="username" :placeholder="ms.filters.translate('Enter Phone')" autocomplete="off" pattern="[0-9]*" inputmode="numeric" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"></ms-addon-tel-input>
            <div v-if="errors.username">
                {{ms.filters.translate(errors.username)}}
            </div>
            <div v-if="errors.isregister">
                {{ms.filters.translate(errors.isregister)}}
            </div>
            <a crole="button" @click="username='';errors.username='';loginField = 'email';passwordField = 'password'"> {{ms.filters.translate('Login with email')}}</a>
        </div>
        <template v-if="passwordField == 'password'">
                <div v-temp:show_password="false">
                    <input :type="ms.temp.show_password?'text':'password'" autocomplete="off" @keyup.enter="login()" :placeholder="ms.filters.translate('Password')" v-model="password" />
                </div>
                <span v-if="errors.password">{{ms.filters.translate(errors.password)}}</span>
                <p>
                    <a crole="button" @click="ms.goTo('/user/forgotten')"> {{ms.filters.translate('Forgot Password?')}}</a>
                    <a v-if="ms.settings.login_field == 'both' && loginField  == 'email'" role="button" @click="username='';errors.username='';loginField = 'both';passwordField = 'otp'"> {{ms.filters.translate('Login with phone')}}</a>
                </p>
            <div v-if="loginField == 'email'">
                <a @click="login()">
                    {{ms.filters.translate('Sign in')}}
                </a>
            </div>
            <div v-if="loginField != 'email'">
                <a @click="login()" :disabled="username.length == 0 || username.length <= 12" :class="{'disabled':username.length == 0 || username.length <= 12}">
                    {{ms.filters.translate('Sign in')}}
                </a>
            </div>
        </template>
        <template v-if="passwordField == 'otp' && ms.settings.login_with_otp == '1'">
            <div v-if="otpSent">
                <div v-temp:show_password="false">
                    <input :type="ms.temp.show_password?'text':'password'" pattern="[0-9]*" inputmode="numeric" autocomplete="off" @keyup.enter="login()" :placeholder="ms.filters.translate('Enter OTP')" v-model="password" autofocus />
                </div>
                <span v-if="errors.password">{{errors.password}}</span>
            </div>
            <div v-if="errors.otp">{{errors.otp}}</div>
            <div>
                <div v-if="!otpSentTime">
                    <button @click="checkUser(sendOTP ,  function(){ ms.temp.user_login_error = true})" :disabled="username.length == 0 || username.length <= 12"> {{ms.filters.translate('Send OTP')}}</button>
                </div>
                <div v-if="otpSentTime">
                    <div>
                        <p>{{ms.filters.translate("Didn't get the code ?")}} <span v-if="timeToResendOtp>0">({{timeToResendOtp}}s)</span></p>
                        <a role="button" @click="sendOTP()">{{ms.filters.translate('Resend OTP')}}</a>
                    </div>
                    <a @click="login()">
                        {{ms.filters.translate('Sign in')}}
                    </a>
                </div>
            </div>
        </template>
    </div>
    <template v-if="ms.page.name != 'checkout'">
        <!-- Login Providers -->
        <div v-if="ms.settings.login_providers.length">
            <span>{{ms.filters.translate('Or Sign in with')}}</span>
            <div v-for="provider in ms.settings.login_providers">
                <a role="button" @click="providerLogin(provider.name)" v-if="provider.name == 'facebook'">
                    <span v-if="!provider.logo"> 
                        {{ms.filters.translate('Facebook')}} 
                    </span>
                    <span v-if="provider.logo">
                        <ms-image :src="ms.filters.image(provider.logo,'480x480')" :title="provider.name" :alt="provider.name"></ms-image>
                    </span>
                </a>
                <a role="button" @click="providerLogin(provider.name)" v-if="provider.name == 'google'">
                    <span v-if="!provider.logo">                            
                        {{ms.filters.translate('Google')}} 
                    </span>
                    <span v-if="provider.logo">
                        <ms-image :src="ms.filters.image(provider.logo,'480x480')" :title="provider.name" :alt="provider.name"></ms-image>
                    </span>
                </a>
                <a role="button" @click="providerLogin(provider.name)" v-if="provider.name == 'linkedin'">
                    <span v-if="!provider.logo">
                        {{ms.filters.translate('LinkedIn')}} 
                    </span>
                    <span v-if="provider.logo">
                        <ms-image :src="ms.filters.image(provider.logo,'480x480')" :title="provider.name" :alt="provider.name"></ms-image>
                    </span>
                </a>
                <a role="button" @click="providerLogin(provider.name)" v-if="provider.name != 'facebook' && provider.name != 'google' && provider.name != 'linkedin'">
                    <span v-if="!provider.logo">
                        {{provider.name}}
                    </span>
                    <span v-if="provider.logo">
                        <img ms-data-valign="middle" data-ng-src="{{ms.filters.image(provider.logo,'480x480')}}" title="{{provider.name}}" alt="{{provider.name}}" />
                    </span>
                </a>
            </div>
        </div>
        <!-- Request For New Account -->
        <span>
            {{ms.filters.translate('New on')}} {{ms.settings.store_title}}?
            <a role="button" :title="ms.filters.translate('Create Account')" @click="ms.goTo('/user/register')">
                {{ms.filters.translate('Register Now')}}
            </a>
        </span>
    </template>
</ms-login>