register.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>register</title>
  7. <link rel="stylesheet" href="/static/css/011f6c1996a28b3efa2d.css">
  8. </head>
  9. <body>
  10. <div id="__next">
  11. <div class="layout-container">
  12. <header class="header header--pink header--branded layout__header">
  13. <svg
  14. aria-hidden="false"
  15. focusable="false"
  16. class="sprite header__logo"
  17. alt="PC Optimum"
  18. role="presentation"
  19. >
  20. <use xlink:href="/svg/sprite-banners.svg#pco-en"></use>
  21. </svg>
  22. </header>
  23. <div role="main" class="layout create-account">
  24. <form
  25. class="form create-account-form"
  26. novalidate=""
  27. id="create-account"
  28. >
  29. <fieldset class="form__fieldset">
  30. <legend class="form__legend">
  31. <div class="layout__heading form__heading">
  32. <svg
  33. aria-hidden="false"
  34. focusable="false"
  35. class="sprite layout__pcid-logo"
  36. alt="PCid Logo"
  37. role="presentation"
  38. >
  39. <use xlink:href="/svg/sprite-banners.svg#pc-id"></use>
  40. </svg>
  41. <h2 tabindex="0">
  42. Create a PC™<span aria-hidden="true">id</span
  43. ><span
  44. aria-hidden="false"
  45. style="
  46. position: absolute;
  47. width: 1px;
  48. height: 1px;
  49. padding: 0px;
  50. margin: -1px;
  51. overflow: hidden;
  52. clip: rect(0px, 0px, 0px, 0px);
  53. white-space: nowrap;
  54. border: 0px;
  55. "
  56. >ID</span
  57. >
  58. </h2>
  59. </div>
  60. <div class="breadcrumb form__breadcrumb">
  61. to continue to PC Optimum
  62. </div>
  63. </legend>
  64. <div
  65. class="input-group create-account-form__email text-group text-group--block"
  66. >
  67. <label
  68. id="email__label"
  69. for="email"
  70. class="input-label text-group__label"
  71. >Email<span
  72. aria-hidden="false"
  73. style="
  74. position: absolute;
  75. width: 1px;
  76. height: 1px;
  77. padding: 0px;
  78. margin: -1px;
  79. overflow: hidden;
  80. clip: rect(0px, 0px, 0px, 0px);
  81. white-space: nowrap;
  82. border: 0px;
  83. "
  84. >:</span
  85. ></label
  86. >
  87. <div class="text-group__input-container">
  88. <input
  89. aria-label="Email"
  90. aria-labelledby="email__label"
  91. aria-describedby="email__description"
  92. aria-disabled="false"
  93. name="email"
  94. required=""
  95. type="email"
  96. autocomplete="username"
  97. class="text-group__input"
  98. maxlength="255"
  99. spellcheck="false"
  100. id="email"
  101. value=""
  102. />
  103. </div>
  104. <div id="email__description" class="text-group__subtext">
  105. <div class="create-account-form__email-description">
  106. This will be your PC™<span aria-hidden="true">id</span
  107. ><span
  108. aria-hidden="false"
  109. style="
  110. position: absolute;
  111. width: 1px;
  112. height: 1px;
  113. padding: 0px;
  114. margin: -1px;
  115. overflow: hidden;
  116. clip: rect(0px, 0px, 0px, 0px);
  117. white-space: nowrap;
  118. border: 0px;
  119. "
  120. >ID</span
  121. >
  122. and you'll use it to sign in.
  123. </div>
  124. </div>
  125. </div>
  126. <div class="create-account-form__new-password password-group">
  127. <div class="input-group text-group text-group--block">
  128. <label
  129. id="newPassword__label"
  130. for="newPassword"
  131. class="input-label text-group__label"
  132. >Password<span
  133. aria-hidden="false"
  134. style="
  135. position: absolute;
  136. width: 1px;
  137. height: 1px;
  138. padding: 0px;
  139. margin: -1px;
  140. overflow: hidden;
  141. clip: rect(0px, 0px, 0px, 0px);
  142. white-space: nowrap;
  143. border: 0px;
  144. "
  145. >:</span
  146. ></label
  147. >
  148. <div class="text-group__input-container">
  149. <input
  150. aria-label="Password"
  151. aria-labelledby="newPassword__label"
  152. aria-describedby="newPassword__description"
  153. aria-disabled="false"
  154. name="newPassword"
  155. required=""
  156. type="password"
  157. maxlength="64"
  158. autocomplete="new-password"
  159. autocapitalize="off"
  160. class="text-group__input"
  161. spellcheck="false"
  162. id="newPassword"
  163. value=""
  164. />
  165. </div>
  166. <div
  167. id="newPassword__description"
  168. class="text-group__subtext"
  169. >
  170. <div class="password-strength" aria-live="polite">
  171. <div class="password-strength__meter">
  172. <span class="password-strength__label"
  173. >Password Strength</span
  174. ><i class="password-strength__bar"></i
  175. ><span class="password-strength__text"></span>
  176. </div>
  177. <div class="password-strength__tip">
  178. <strong>To make a strong password:</strong> use a
  179. sentence or phrase. Spaces, numbers, special characters
  180. are OK.
  181. </div>
  182. <ul class="password-strength__requirement-list">
  183. <li class="password-strength__requirement">
  184. Your password must reach a password strength rating of
  185. good
  186. </li>
  187. <li class="password-strength__requirement">
  188. Your password must have a minimum of 10 characters
  189. </li>
  190. </ul>
  191. </div>
  192. </div>
  193. </div>
  194. <button
  195. class="button button--inline button--theme-link-grey link link--inline password-group__toggle-button"
  196. type="button"
  197. 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"
  198. aria-disabled="false"
  199. >
  200. Show Password
  201. </button>
  202. </div>
  203. <div class="create-account-form__confirm-password password-group">
  204. <div class="input-group text-group text-group--block">
  205. <label
  206. id="confirmPassword__label"
  207. for="confirmPassword"
  208. class="input-label text-group__label"
  209. >Confirm password<span
  210. aria-hidden="false"
  211. style="
  212. position: absolute;
  213. width: 1px;
  214. height: 1px;
  215. padding: 0px;
  216. margin: -1px;
  217. overflow: hidden;
  218. clip: rect(0px, 0px, 0px, 0px);
  219. white-space: nowrap;
  220. border: 0px;
  221. "
  222. >:</span
  223. ></label
  224. >
  225. <div class="text-group__input-container">
  226. <input
  227. aria-label="Confirm password"
  228. aria-labelledby="confirmPassword__label"
  229. aria-disabled="false"
  230. name="confirmPassword"
  231. required=""
  232. type="password"
  233. maxlength="64"
  234. autocomplete="new-password"
  235. autocapitalize="off"
  236. class="text-group__input"
  237. spellcheck="false"
  238. id="confirmPassword"
  239. value=""
  240. />
  241. </div>
  242. </div>
  243. <button
  244. class="button button--inline button--theme-link-grey link link--inline password-group__toggle-button"
  245. type="button"
  246. 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"
  247. aria-disabled="false"
  248. >
  249. Show Password
  250. </button>
  251. </div>
  252. <div class="create-account-form__privacy-terms-description">
  253. To proceed with creating an account, you must accept both our
  254. Privacy Policy and Terms and Conditions.
  255. </div>
  256. <div class="input-group checkbox-group">
  257. <div class="checkbox-group__input-wrapper">
  258. <input
  259. aria-label="I agree to the Privacy Policy."
  260. aria-labelledby="privacyPolicy__label"
  261. aria-disabled="false"
  262. name="privacyPolicy"
  263. id="privacyPolicy"
  264. required=""
  265. type="checkbox"
  266. class="checkbox-group__input"
  267. aria-checked="false"
  268. value="false"
  269. /><label
  270. class="checkbox-group__icon"
  271. for="privacyPolicy"
  272. ></label>
  273. </div>
  274. <div class="checkbox-group__text">
  275. <label
  276. id="privacyPolicy__label"
  277. for="privacyPolicy"
  278. class="input-label checkbox-group__label"
  279. ><span class="create-account__privacy-policy"
  280. >I agree to the
  281. <a
  282. class="link link--theme-base link--inline link--external"
  283. href="https://www.loblaw.ca/en/privacy.html"
  284. target="_blank"
  285. ><span>Privacy Policy</span></a
  286. >.</span
  287. ><span
  288. aria-hidden="false"
  289. style="
  290. position: absolute;
  291. width: 1px;
  292. height: 1px;
  293. padding: 0px;
  294. margin: -1px;
  295. overflow: hidden;
  296. clip: rect(0px, 0px, 0px, 0px);
  297. white-space: nowrap;
  298. border: 0px;
  299. "
  300. >:</span
  301. ></label
  302. >
  303. </div>
  304. </div>
  305. <div class="input-group checkbox-group">
  306. <div class="checkbox-group__input-wrapper">
  307. <input
  308. aria-label="I agree to the PC Optimum Terms and Conditions."
  309. aria-labelledby="termsAndConditions__label"
  310. aria-disabled="false"
  311. name="termsAndConditions"
  312. id="termsAndConditions"
  313. required=""
  314. type="checkbox"
  315. class="checkbox-group__input"
  316. aria-checked="false"
  317. value="false"
  318. /><label
  319. class="checkbox-group__icon"
  320. for="termsAndConditions"
  321. ></label>
  322. </div>
  323. <div class="checkbox-group__text">
  324. <label
  325. id="termsAndConditions__label"
  326. for="termsAndConditions"
  327. class="input-label checkbox-group__label"
  328. ><span class="create-account-page__terms-and-conditions"
  329. >I agree to the PC Optimum
  330. <a
  331. class="link link--theme-base link--inline link--external"
  332. href="https://www.pcoptimum.ca/company-policy/terms-and-conditions?locale=en-ca"
  333. target="_blank"
  334. ><span>Terms and Conditions</span></a
  335. >.</span
  336. ><span
  337. aria-hidden="false"
  338. style="
  339. position: absolute;
  340. width: 1px;
  341. height: 1px;
  342. padding: 0px;
  343. margin: -1px;
  344. overflow: hidden;
  345. clip: rect(0px, 0px, 0px, 0px);
  346. white-space: nowrap;
  347. border: 0px;
  348. "
  349. >:</span
  350. ></label
  351. >
  352. </div>
  353. </div>
  354. <button
  355. class="button button--block button--submit button--theme-base button--theme-dark submit-button"
  356. type="submit"
  357. aria-disabled="false"
  358. >
  359. Create a PC™<span aria-hidden="true">id</span
  360. ><span
  361. aria-hidden="false"
  362. style="
  363. position: absolute;
  364. width: 1px;
  365. height: 1px;
  366. padding: 0px;
  367. margin: -1px;
  368. overflow: hidden;
  369. clip: rect(0px, 0px, 0px, 0px);
  370. white-space: nowrap;
  371. border: 0px;
  372. "
  373. >ID</span
  374. >
  375. </button>
  376. </fieldset>
  377. </form>
  378. <div class="layout__secondary-cta create-account-form__secondary-cta">
  379. Already have a PC™<span aria-hidden="true">id</span
  380. ><span
  381. aria-hidden="false"
  382. style="
  383. position: absolute;
  384. width: 1px;
  385. height: 1px;
  386. padding: 0px;
  387. margin: -1px;
  388. overflow: hidden;
  389. clip: rect(0px, 0px, 0px, 0px);
  390. white-space: nowrap;
  391. border: 0px;
  392. "
  393. >ID</span
  394. >?
  395. <a class="link link--theme-base link--inline" href="/login"
  396. ><span>Sign In</span></a
  397. >
  398. </div>
  399. </div>
  400. <footer class="footer layout__footer">
  401. <div class="footer__section">
  402. <div class="footer__tagline">
  403. <svg
  404. aria-hidden="false"
  405. focusable="false"
  406. class="sprite footer__pcid-logo"
  407. alt="PCid Logo"
  408. role="presentation"
  409. >
  410. <use xlink:href="/svg/sprite-banners.svg#pc-id"></use>
  411. </svg>
  412. <div>Access all our sites with one simple login</div>
  413. </div>
  414. </div>
  415. <hr class="footer__divider" />
  416. <div class="footer__section">
  417. <ul class="footer__help-and-support-link-list">
  418. <li class="footer__help-and-support-link">
  419. <a
  420. class="link link--theme-base link--inline link--external"
  421. href="https://loblaw.force.com/pcid/s/about-us?language=en_US&amp;rp=pco"
  422. target="_blank"
  423. rel="noopener noreferrer"
  424. ><span
  425. >About PC™<span aria-hidden="true">id</span
  426. ><span
  427. aria-hidden="false"
  428. style="
  429. position: absolute;
  430. width: 1px;
  431. height: 1px;
  432. padding: 0px;
  433. margin: -1px;
  434. overflow: hidden;
  435. clip: rect(0px, 0px, 0px, 0px);
  436. white-space: nowrap;
  437. border: 0px;
  438. "
  439. >ID</span
  440. ></span
  441. ></a
  442. >
  443. </li>
  444. <li class="footer__help-and-support-link">
  445. <a
  446. class="link link--theme-base link--inline link--external"
  447. href="https://loblaw.force.com/pcid/s/?language=en_US&amp;rp=pco"
  448. target="_blank"
  449. rel="noopener noreferrer"
  450. ><span>Help</span></a
  451. >
  452. </li>
  453. <li class="footer__help-and-support-link">
  454. <a
  455. class="link link--theme-base link--inline"
  456. href="/terms?locale=en-CA"
  457. target="_blank"
  458. rel="noopener noreferrer"
  459. ><span>Terms</span></a
  460. >
  461. </li>
  462. <li class="footer__help-and-support-link">
  463. <a
  464. class="link link--theme-base link--inline link--external"
  465. href="https://www.loblaw.ca/en/privacy.html"
  466. target="_blank"
  467. rel="noopener noreferrer"
  468. ><span>Privacy</span></a
  469. >
  470. </li>
  471. </ul>
  472. <div class="footer__copyright">
  473. © 2024 Loblaws Inc. All Rights Reserved.
  474. </div>
  475. <button
  476. class="button button--inline button--theme-link link link--inline language-toggle footer__language-toggle"
  477. type="button"
  478. aria-label="Changer pour la version française de ce site"
  479. aria-disabled="false"
  480. id="language-toggle"
  481. lang="fr-CA"
  482. >
  483. <span
  484. class="language-toggle__option language-toggle__option--active"
  485. aria-hidden="true"
  486. >EN</span
  487. ><span class="language-toggle__option" aria-hidden="true"
  488. >FR</span
  489. >
  490. </button>
  491. </div>
  492. </footer>
  493. </div>
  494. </div>
  495. </body>
  496. </html>