ms.form.affiliateLogin

Examples

Ms form affiliate login (vuejs themes)

<ms-login role="formName" @success="ms.goTo('/admin', true)">
    <div :set="loginField = 'email'"></div>
    <div :set="passwordField = 'password'"></div>
    <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 v-show="otpSent">
            <p><a role="button" @click="otpSent = false"> {{ms.filters.translate('Back')}}</a></p>
        </div>
        <div >
            <div v-if="(!loginField || loginField == 'email') || !ms.temp.otp_login">
                <input type="email" v-model="username" :placeholder="ms.filters.translate('Enter Email Id')" @keyup.enter="login()" />
                <div  v-show="errors.username">
                    {{ms.filters.translate(errors.username)}}
                </div>
            </div>
            <div v-if="loginField  == 'phone' && ms.temp.otp_login && !otpSent">
                <ms-addon-tel-input v-model="username" :placeholder="ms.filters.translate('Enter Phone')" autocomplete="off"></ms-addon-tel-input>
                <div  v-show="errors.username">
                    {{ms.filters.translate(errors.username)}}
                </div>
                <div  v-show="ms.temp.user_login_error && ms.temp.otp_login">
                    {{ms.filters.translate('Need to register first')}}
                </div>
            </div>
            <div v-if="loginField  == 'both' && ms.temp.otp_login && !otpSent">
                <ms-addon-tel-input v-model="username" :placeholder="ms.filters.translate('Enter Phone')" autocomplete="off"></ms-addon-tel-input>
                <div  v-show="errors.username">
                    {{ms.filters.translate(errors.username)}}
                </div>
                <div v-if="ms.temp.otp_login && !otpSent">
                    <a role="button" @click="username='';errors.username='';loginField = 'email';ms.temp.otp_login = false"> {{ms.filters.translate('Login with email')}}</a>
                </div>
            </div>
        </div>
        <div v-if="(!passwordField || passwordField == 'password') || !ms.temp.otp_login">
            <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('Password')"
                    v-model="password"
                />
            </div>
            <span v-show="errors.password">{{ms.filters.translate(errors.password)}}</span>
            <div v-if="!ms.temp.otp_login && !otpSent">
                <a role="button" role="button" href="/user/forgotten"> {{ms.filters.translate('Forgot password?')}}</a>
                <a role="button" @click="username='';errors.username='';ms.temp.user_login_error='';loginField = 'phone';ms.temp.otp_login = true"> {{ms.filters.translate('Login with phone')}}</a>
            </div>
            <a @click="login()">
                {{ms.filters.translate('Sign in')}}
            </a>
        </div>
        <div v-if="passwordField == 'otp' && ms.temp.otp_login">
            <div v-if="otpSent">
                <div v-if="ms.otp?.length" :set="password = ms.otp"></div>
                <input :type="ms.temp.show_password?'password':'text'" pattern="[0-9]*" inputmode="numeric" autocomplete="off" @keyup.enter="login()" :placeholder="ms.filters.translate('Enter OTP')" v-model="password" maxlength="6" onkeypress="return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));"/>                            
                <span v-show="errors.password">{{ms.filters.translate(errors.password)}}</span>
            </div>
            <div>
                <div :set="passwordField='otp'"></div>
                <div v-if="!otpSentTime || !otpSent">
                    <button @click="sendOTP(username)" :disabled="username.length == 0 || username.length <= 12">{{ms.filters.translate('Send OTP')}}</button>
                </div>
                <div v-if="otpSentTime && otpSent">
                    <span  v-show="errors.password"> {{ms.filters.translate(errors.password)}}</span>
                    <a @click="login()">
                        {{ms.filters.translate('Sign in')}}
                    </a>
                </div>
            </div>
        </div>
    </div>            
    <div>
        {{ms.filters.translate('New on')}} {{ms.settings.store_title}}?
        <a role="button" :title="ms.filters.translate('Create Account')" @click="ms.goTo('/affiliate/register')">
            {{ms.filters.translate('Register Now')}}
        </a>
    </div>            
</ms-login>