@openedx/frontend-app-authn 1.0.0-alpha.0

package/src/sass/_registration.scss

@@ -0,0 +1,123 @@
+@use "@openedx/paragon/scss/core/core" as paragon;
+@use "sass:map";
+
+.register-button {
+  min-width: 14.4rem;
+}
+
+.pgn__form-autosuggest__wrapper>.pgn__form-group {
+  margin-bottom: 0 !important;
+}
+
+.email-suggestion-alert-error {
+  padding: 0.5rem 1rem;
+
+  .email-suggestion__close {
+    float: right;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .email-suggestion__text {
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+  }
+
+  .alert-link {
+    color: paragon.$primary !important;
+
+    &:hover {
+      text-decoration: underline;
+      color: paragon.$info-700 !important;
+    }
+  }
+}
+
+.email-suggestion-alert-warning {
+  color: paragon.$info-500 !important;
+
+  &:hover {
+    text-decoration: underline;
+    color: paragon.$info-700 !important;
+  }
+}
+
+.form-field--checkbox {
+  .pgn__form-label {
+    font-size: 0.75rem;
+    line-height: 1.25rem;
+  }
+
+  margin-left: 3px;
+}
+
+.username-suggestions--chip {
+  padding: 1px 0.5rem;
+  margin: 0.25rem;
+  border-radius: 0.375rem;
+  line-height: 24px;
+  font-size: 12px;
+  font-weight: normal;
+  color: paragon.$primary-700;
+}
+
+.username-suggestion--label {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  margin-right: 0.25rem;
+}
+
+.username-suggestions {
+  position: relative;
+  margin-top: -2.5rem;
+  margin-left: 15px;
+}
+
+.username-suggestions__close__button {
+  right: 1rem;
+  position: absolute;
+}
+
+.username-suggestions__error {
+  position: relative;
+  margin-top: -13.7%;
+  margin-bottom: 11%;
+  margin-left: 15px;
+}
+
+.username-scroll-suggested--form-field {
+  width: 20rem;
+  white-space: nowrap;
+  overflow-x: auto;
+  display: inline-flex;
+}
+
+@media (max-width: 372px) {
+  .username-scroll-suggested--form-field {
+    width: 11rem !important;
+  }
+
+  .username-suggestions__close__button {
+    right: 0.5rem;
+  }
+}
+
+@media (max-width: map.get(paragon.$grid-breakpoints, "sm")) {
+  .username-scroll-suggested--form-field {
+    width: 15rem;
+  }
+
+  .username-suggestions__close__button {
+    right: 0.5rem;
+  }
+}
+
+.form-field-error {
+  border: 1px solid var(--danger-300, #CA3A2F) !important;
+
+  input {
+    border: none;
+  }
+}

package/src/sass/_reset_password.scss

@@ -0,0 +1,3 @@
+.reset-password--button {
+    width: 12rem;
+};

package/src/sass/_style.scss

@@ -0,0 +1,465 @@
+@use "@openedx/paragon/scss/core/core" as paragon;
+
+// Load component based styles
+@use "_base_component.scss";
+@use "_registration.scss";
+@use "_reset_password.scss";
+@use "_progressive_profiling_page.scss";
+@use "_login_page.scss";
+@use "_forgot_password.scss";
+
+//
+// ----------------------------
+// #COLORS
+// ----------------------------
+$white: #FFFFFF;
+
+// social platforms
+$facebook-blue: #1877F2;
+$facebook-focus-blue: #29487d;
+$google-blue: #4285f4;
+$google-focus-blue: #287ae6;
+$microsoft-black: #2f2f2f;
+$microsoft-focus-black: #000;
+$apple-black: #000000;
+$apple-focus-black: $apple-black;
+
+$elevation-level-2-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
+
+
+// Forgot Password Page
+.forgot-password-button-width {
+  min-width: 6rem;
+}
+
+.spinner--position-centered {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  position: absolute;
+  margin: auto;
+}
+
+.main-content {
+  @extend .pt-4;
+  min-width: 464px !important;
+}
+
+.welcome-page-content {
+  min-width: 464px !important;
+}
+
+.stateful-button-width {
+  width: 12rem;
+}
+
+.tpa-skeleton {
+  margin-bottom: 0.75rem;
+}
+
+.sr-only {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.close {
+  padding-bottom: 0px !important;
+  padding-top: 3px !important;
+}
+
+.focus-out {
+  position: absolute;
+  padding-left: 17px;
+  opacity: 0.75;
+  z-index: 1;
+}
+
+.alert-link {
+  font-weight: normal;
+  text-decoration: underline;
+  color: paragon.$info-300 !important;
+
+  &:hover {
+    color: paragon.$info-500 !important;
+  }
+}
+
+.form-control {
+  background-color: $white !important;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  height: 2.75rem;
+
+}
+
+.btn-social {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  margin-bottom: 1rem;
+  font-size: 14px;
+
+  background-color: $white;
+  border: 1px solid paragon.$primary;
+  width: 224px;
+  height: 36px;
+  color: paragon.$primary;
+
+  .btn-tpa__image-icon {
+    background-color: transparent;
+    max-height: 24px;
+    max-width: 24px;
+  }
+}
+
+.btn-tpa {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 1rem;
+  width: 14rem;
+
+  .btn-tpa__image-icon {
+    background-color: transparent;
+    max-height: 24px;
+    max-width: 24px;
+  }
+}
+
+.btn-tpa__font-container {
+  background-color: paragon.$primary;
+  color: $white;
+  font-size: 11px;
+
+  margin-left: -6px;
+  padding-top: 10px;
+  min-width: 30px;
+  height: 35px;
+}
+
+.btn-oa2-facebook {
+  color: $white;
+  border-color: $facebook-blue;
+  background-color: $facebook-blue;
+
+  &:hover,
+  &:focus {
+    background-color: $facebook-focus-blue;
+    border: 1px solid $facebook-focus-blue;
+    color: $white;
+  }
+}
+
+.btn-oa2-google-oauth2 {
+  color: $white;
+  border-color: $google-blue;
+  background-color: $google-blue;
+
+  .ibtn-tpa__image-icon {
+    margin-left: -6px;
+    max-height: 34px;
+    max-width: 34px;
+    height: 34px;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $google-focus-blue;
+    border: 1px solid $google-focus-blue;
+    color: $white;
+  }
+}
+
+.btn-oa2-apple-id {
+  color: $white;
+  border-color: $apple-black;
+  background-color: $apple-black;
+  font-size: 16px;
+
+  .ibtn-tpa__image-icon {
+    max-height: 1.8em;
+    max-width: 2.0em;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: $apple-focus-black;
+    border: 1px solid $apple-focus-black;
+    color: $white;
+  }
+}
+
+.btn-oa2-azuread-oauth2 {
+  color: $white;
+  border-color: $microsoft-black;
+  background-color: $microsoft-black;
+
+  &:hover,
+  &:focus {
+    background-color: $microsoft-focus-black;
+    border: 1px solid $microsoft-focus-black;
+    color: $white;
+  }
+}
+
+.submit {
+  display: inherit;
+  margin: 0 auto;
+  margin-bottom: 2rem;
+}
+
+.institute-icon {
+  @extend .mr-1;
+  @extend .text-gray;
+
+  display: inline-block;
+  margin-bottom: 0.25rem;
+  height: 18px;
+  width: 18px;
+
+  svg {
+    display: inline-block;
+  }
+}
+
+.login-help {
+  padding-left: 14px;
+}
+
+.invalid-feedback {
+  color: paragon.$red;
+}
+
+.full-vertical-height {
+  height: 100vh;
+}
+
+.help-links {
+  margin-left: -5px;
+}
+
+select.form-control {
+  background: none !important;
+}
+
+#honor-code p {
+  margin: 0;
+  padding: 0;
+}
+
+#honor-code a span {
+  @extend .sr-only;
+}
+
+.font-weight-500 {
+  font-weight: 500 !important;
+}
+
+.mw-420 {
+  max-width: 420px;
+}
+
+.mw-500 {
+  max-width: 500px;
+}
+
+.mw-32em {
+  max-width: 32em;
+}
+
+.h-90 {
+  height: 90%;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mt-7 {
+  margin-top: 7rem;
+}
+
+.pt-10 {
+  padding-top: 10px;
+}
+
+#password-requirement-left {
+  opacity: 1;
+  @extend .x-small;
+  filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
+  right: 0.2rem !important;
+
+  .tooltip-inner {
+    background: $white;
+    display: block;
+    color: paragon.$gray-500;
+  }
+
+  .arrow::before {
+    border-left-color: $white;
+  }
+}
+
+#password-requirement-top {
+  @extend .x-small;
+  filter: drop-shadow($elevation-level-2-shadow) drop-shadow($elevation-level-2-shadow) !important;
+  opacity: 1;
+  width: 90%;
+  bottom: 10px !important;
+  display: flex;
+  justify-content: center;
+
+  .tooltip-inner {
+    min-width: 464px !important;
+    background: $white;
+    display: block;
+    color: paragon.$gray-500;
+  }
+
+  .arrow::before {
+    border-top-color: $white;
+  }
+
+}
+
+.yellow-border {
+  border: 2px solid paragon.$accent-b;
+}
+
+.institutions__heading {
+  color: paragon.$primary-700;
+}
+
+.logistration-button {
+  color: paragon.$gray-700;
+}
+
+.logistration-button:hover {
+  color: paragon.$gray-700;
+  text-decoration: none;
+}
+
+
+#forgot-password {
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.icon-size {
+  width: 2.3rem;
+}
+
+.has-floating-label {
+  color: paragon.$gray-500;
+}
+
+.pgn__form-control-floating-label .pgn__form-control-floating-label-content {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.pgn__form-text {
+  font-size: 0.75rem;
+}
+
+.form-group__form-field .form-control:focus~.pgn__form-control-floating-label .pgn__form-control-floating-label-content {
+  font-size: 16px;
+  color: paragon.$primary-700;
+}
+
+.form-group__form-field .form-control:not([value='']):not(:focus)~.pgn__form-control-floating-label .pgn__form-control-floating-label-content {
+  font-size: 16px;
+}
+
+.pgn__form-group {
+  margin-bottom: 1.75rem;
+}
+
+.form-text-size {
+  margin-top: 0.188rem !important;
+  line-height: 1.25rem;
+}
+
+@media (min-width: 1024px) {
+  .mw-500 {
+    width: 500px;
+  }
+}
+
+@media (max-width: 600px) {
+  .form-control {
+    width: 100%;
+  }
+}
+
+@media (min-width: 463px) {
+  .reset-password-container {
+    width: 420px;
+    max-width: 420px;
+  }
+
+  .tpa-skeleton {
+    min-width: 464px !important;
+  }
+}
+
+
+@media (max-width: 767px) {
+  .welcome-page-content {
+    padding-top: 1.5rem !important;
+  }
+}
+
+
+.alert {
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Smaller than Extra Small (Mobile Screens)
+@media (max-width: 464px) {
+  .btn-social {
+    min-width: 100%;
+    margin-bottom: 0.75rem;
+    margin-right: 0 !important;
+  }
+
+  .welcome-page-content,
+  .main-content {
+    min-width: 100vw !important;
+    padding: 1.5rem !important;
+  }
+
+  #password-requirement-top {
+    display: unset;
+
+    .tooltip-inner {
+      max-width: inherit;
+      min-width: unset !important;
+    }
+  }
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: paragon.$light-200;
+}
+
+.institutions--provider-link {
+  font-weight: normal;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  color: paragon.$primary-700
+}
+
+.pgn__form-control-decorator-trailing {
+  right: 0 !important;
+}

package/src/setupTest.js

@@ -0,0 +1,68 @@
+import siteConfig from 'site.config';
+
+import { addAppConfigs, configureAnalytics, configureAuth, configureLogging, getSiteConfig, mergeSiteConfig, MockAnalyticsService, MockAuthService, MockLoggingService } from '@openedx/frontend-base';
+
+mergeSiteConfig(siteConfig);
+addAppConfigs();
+
+export function initializeMockServices() {
+  const loggingService = configureLogging(MockLoggingService, {
+    config: getSiteConfig(),
+  });
+
+  const authService = configureAuth(MockAuthService, {
+    config: getSiteConfig(),
+    loggingService,
+  });
+
+  const analyticsService = configureAnalytics(MockAnalyticsService, {
+    config: getSiteConfig(),
+    httpClient: authService.getAuthenticatedHttpClient(),
+    loggingService,
+  });
+
+  return { analyticsService, authService, loggingService };
+}
+
+class ResizeObserver {
+  observe() {
+    // do nothing
+  }
+
+  unobserve() {
+    // do nothing
+  }
+
+  disconnect() {
+    // do nothing
+  }
+}
+
+window.ResizeObserver = ResizeObserver;
+window.scrollTo = (x, y) => {
+  document.documentElement.scrollTop = y;
+};
+
+const location = new URL('https://authn.edx.org');
+location.assign = jest.fn();
+location.replace = jest.fn();
+location.reload = jest.fn();
+delete window.location;
+window.location = location;
+
+const localStorageMock = jest.fn(() => {
+  let store = {};
+  return {
+    getItem: (key) => (store[key] ?? null),
+    setItem: (key, value) => {
+      store[key] = value.toString();
+    },
+    clear: () => {
+      store = {};
+    },
+    removeItem: (key) => {
+      delete store[key];
+    },
+  };
+})();
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });