|
|
@@ -0,0 +1,496 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>register</title>
|
|
|
+ <link rel="stylesheet" href="/static/css/011f6c1996a28b3efa2d.css">
|
|
|
+ </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="/svg/sprite-banners.svg#pco-en"></use>
|
|
|
+ </svg>
|
|
|
+ </header>
|
|
|
+ <div role="main" class="layout create-account">
|
|
|
+ <form
|
|
|
+ class="form create-account-form"
|
|
|
+ novalidate=""
|
|
|
+ id="create-account"
|
|
|
+ >
|
|
|
+ <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="/svg/sprite-banners.svg#pc-id"></use>
|
|
|
+ </svg>
|
|
|
+ <h2 tabindex="0">
|
|
|
+ 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
|
|
|
+ >
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <div class="breadcrumb form__breadcrumb">
|
|
|
+ to continue to PC Optimum
|
|
|
+ </div>
|
|
|
+ </legend>
|
|
|
+ <div
|
|
|
+ class="input-group create-account-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-describedby="email__description"
|
|
|
+ aria-disabled="false"
|
|
|
+ name="email"
|
|
|
+ required=""
|
|
|
+ type="email"
|
|
|
+ autocomplete="username"
|
|
|
+ class="text-group__input"
|
|
|
+ maxlength="255"
|
|
|
+ spellcheck="false"
|
|
|
+ id="email"
|
|
|
+ value=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div id="email__description" class="text-group__subtext">
|
|
|
+ <div class="create-account-form__email-description">
|
|
|
+ This will be your 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
|
|
|
+ >
|
|
|
+ and you'll use it to sign in.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="create-account-form__new-password password-group">
|
|
|
+ <div class="input-group text-group text-group--block">
|
|
|
+ <label
|
|
|
+ id="newPassword__label"
|
|
|
+ for="newPassword"
|
|
|
+ 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="newPassword__label"
|
|
|
+ aria-describedby="newPassword__description"
|
|
|
+ aria-disabled="false"
|
|
|
+ name="newPassword"
|
|
|
+ required=""
|
|
|
+ type="password"
|
|
|
+ maxlength="64"
|
|
|
+ autocomplete="new-password"
|
|
|
+ autocapitalize="off"
|
|
|
+ class="text-group__input"
|
|
|
+ spellcheck="false"
|
|
|
+ id="newPassword"
|
|
|
+ value=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ id="newPassword__description"
|
|
|
+ class="text-group__subtext"
|
|
|
+ >
|
|
|
+ <div class="password-strength" aria-live="polite">
|
|
|
+ <div class="password-strength__meter">
|
|
|
+ <span class="password-strength__label"
|
|
|
+ >Password Strength</span
|
|
|
+ ><i class="password-strength__bar"></i
|
|
|
+ ><span class="password-strength__text"></span>
|
|
|
+ </div>
|
|
|
+ <div class="password-strength__tip">
|
|
|
+ <strong>To make a strong password:</strong> use a
|
|
|
+ sentence or phrase. Spaces, numbers, special characters
|
|
|
+ are OK.
|
|
|
+ </div>
|
|
|
+ <ul class="password-strength__requirement-list">
|
|
|
+ <li class="password-strength__requirement">
|
|
|
+ Your password must reach a password strength rating of
|
|
|
+ good
|
|
|
+ </li>
|
|
|
+ <li class="password-strength__requirement">
|
|
|
+ Your password must have a minimum of 10 characters
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </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="create-account-form__confirm-password password-group">
|
|
|
+ <div class="input-group text-group text-group--block">
|
|
|
+ <label
|
|
|
+ id="confirmPassword__label"
|
|
|
+ for="confirmPassword"
|
|
|
+ class="input-label text-group__label"
|
|
|
+ >Confirm 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="Confirm password"
|
|
|
+ aria-labelledby="confirmPassword__label"
|
|
|
+ aria-disabled="false"
|
|
|
+ name="confirmPassword"
|
|
|
+ required=""
|
|
|
+ type="password"
|
|
|
+ maxlength="64"
|
|
|
+ autocomplete="new-password"
|
|
|
+ autocapitalize="off"
|
|
|
+ class="text-group__input"
|
|
|
+ spellcheck="false"
|
|
|
+ id="confirmPassword"
|
|
|
+ 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="create-account-form__privacy-terms-description">
|
|
|
+ To proceed with creating an account, you must accept both our
|
|
|
+ Privacy Policy and Terms and Conditions.
|
|
|
+ </div>
|
|
|
+ <div class="input-group checkbox-group">
|
|
|
+ <div class="checkbox-group__input-wrapper">
|
|
|
+ <input
|
|
|
+ aria-label="I agree to the Privacy Policy."
|
|
|
+ aria-labelledby="privacyPolicy__label"
|
|
|
+ aria-disabled="false"
|
|
|
+ name="privacyPolicy"
|
|
|
+ id="privacyPolicy"
|
|
|
+ required=""
|
|
|
+ type="checkbox"
|
|
|
+ class="checkbox-group__input"
|
|
|
+ aria-checked="false"
|
|
|
+ value="false"
|
|
|
+ /><label
|
|
|
+ class="checkbox-group__icon"
|
|
|
+ for="privacyPolicy"
|
|
|
+ ></label>
|
|
|
+ </div>
|
|
|
+ <div class="checkbox-group__text">
|
|
|
+ <label
|
|
|
+ id="privacyPolicy__label"
|
|
|
+ for="privacyPolicy"
|
|
|
+ class="input-label checkbox-group__label"
|
|
|
+ ><span class="create-account__privacy-policy"
|
|
|
+ >I agree to the
|
|
|
+ <a
|
|
|
+ class="link link--theme-base link--inline link--external"
|
|
|
+ href="https://www.loblaw.ca/en/privacy.html"
|
|
|
+ target="_blank"
|
|
|
+ ><span>Privacy Policy</span></a
|
|
|
+ >.</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;
|
|
|
+ "
|
|
|
+ >:</span
|
|
|
+ ></label
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input-group checkbox-group">
|
|
|
+ <div class="checkbox-group__input-wrapper">
|
|
|
+ <input
|
|
|
+ aria-label="I agree to the PC Optimum Terms and Conditions."
|
|
|
+ aria-labelledby="termsAndConditions__label"
|
|
|
+ aria-disabled="false"
|
|
|
+ name="termsAndConditions"
|
|
|
+ id="termsAndConditions"
|
|
|
+ required=""
|
|
|
+ type="checkbox"
|
|
|
+ class="checkbox-group__input"
|
|
|
+ aria-checked="false"
|
|
|
+ value="false"
|
|
|
+ /><label
|
|
|
+ class="checkbox-group__icon"
|
|
|
+ for="termsAndConditions"
|
|
|
+ ></label>
|
|
|
+ </div>
|
|
|
+ <div class="checkbox-group__text">
|
|
|
+ <label
|
|
|
+ id="termsAndConditions__label"
|
|
|
+ for="termsAndConditions"
|
|
|
+ class="input-label checkbox-group__label"
|
|
|
+ ><span class="create-account-page__terms-and-conditions"
|
|
|
+ >I agree to the PC Optimum
|
|
|
+ <a
|
|
|
+ class="link link--theme-base link--inline link--external"
|
|
|
+ href="https://www.pcoptimum.ca/company-policy/terms-and-conditions?locale=en-ca"
|
|
|
+ target="_blank"
|
|
|
+ ><span>Terms and Conditions</span></a
|
|
|
+ >.</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;
|
|
|
+ "
|
|
|
+ >:</span
|
|
|
+ ></label
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ class="button button--block button--submit button--theme-base button--theme-dark submit-button"
|
|
|
+ type="submit"
|
|
|
+ aria-disabled="false"
|
|
|
+ >
|
|
|
+ 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
|
|
|
+ >
|
|
|
+ </button>
|
|
|
+ </fieldset>
|
|
|
+ </form>
|
|
|
+ <div class="layout__secondary-cta create-account-form__secondary-cta">
|
|
|
+ Already have 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
|
|
|
+ >?
|
|
|
+ <a class="link link--theme-base link--inline" href="/login"
|
|
|
+ ><span>Sign In</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="/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&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&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>
|
|
|
+</html>
|
