added login route

app/components/header.hbs

@@ -51,7 +51,7 @@
           class="nav__element"
           href={{this.STATUS_URL}}
         >Status</a></li>
-        {{#if @dev}}
+      {{#if @dev}}
         <li>
           {{! TODO - remove query for dev when it goes to production }}
           <LinkTo
@@ -92,17 +92,25 @@
           <Fa-Icon data-test-icon @icon="chevron-down" />
         </button>
       {{else}}
-        <a data-test-login class="login" href={{this.AUTH_URL}}>
-          <span class="login__signin">Sign In</span>
-          <span class="login__github">with GitHub</span>
-          <img
-            data-test-login-img
-            class="login__logo"
-            src="assets/icons/github-logo.png"
-            alt="GitHub"
-            height="20px"
-            width="20px"
-          />
+        <a
+          data-test-login
+          class="login"
+          href={{if @dev "/login?dev=true" this.AUTH_URL}}
+        >
+          {{#if @dev}}
+            <span class="login__signin">Sign In</span>
+          {{else}}
+            <span class="login__signin">Sign In</span>
+            <span class="login__github">with GitHub</span>
+            <img
+              data-test-login-img
+              class="login__logo"
+              src="assets/icons/github-logo.png"
+              alt="GitHub"
+              height="20px"
+              width="20px"
+            />
+          {{/if}}
         </a>
       {{/if}}
     {{/if}}

app/components/header.js

@@ -43,6 +43,6 @@ export default class HeaderComponent extends Component {
         this.fastboot.request.host +
         this.fastboot.request.path
       : window.location.href;
-    return `${AUTH.SIGN_IN}?redirectURL=${currentURL}`;
+    return `${AUTH.GITHUB_SIGN_IN}?redirectURL=${currentURL}`;
   }
 }

app/components/login.hbs

@@ -0,0 +1,26 @@
+<div class="login__container">
+  <img class="logo__img" src="assets/images/rds-logo.png" alt="RealDevSquad" />
+  <h3>
+    Sign In to
+    <br />
+    <span>Real Dev Squad</span>
+  </h3>
+
+  <Reusables::LoginLink
+    @label="For Developers:"
+    @auth="github"
+    @authUrl={{this.AUTH_URL.GITHUB}}
+    @signInText="Sign In with GitHub"
+    @iconSrc="assets/icons/github-logo.png"
+    @altText="GitHub"
+  />
+
+  <Reusables::LoginLink
+    @label="For Designers/PMs:"
+    @auth="google"
+    @authUrl={{this.AUTH_URL.GOOGLE}}
+    @signInText="Sign In with Google"
+    @iconSrc="assets/icons/google-logo.png"
+    @altText="Google"
+  />
+</div>

app/components/login.js

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+import { AUTH } from '../constants/urls';
+import { service } from '@ember/service';
+
+export default class LoginComponent extends Component {
+  @service router;
+  @service fastboot;
+
+  AUTH_URL = this.generateAuthURL();
+
+  generateAuthURL() {
+    let currentURL = this.fastboot.isFastBoot
+      ? this.fastboot.request.protocol +
+        '//' +
+        this.fastboot.request.host +
+        this.fastboot.request.path
+      : window.location.href;
+
+    if (currentURL) {
+      currentURL = currentURL.includes('login')
+        ? currentURL.replace('login', '')
+        : currentURL;
+    }
+
+    return {
+      GITHUB: `${AUTH.GITHUB_SIGN_IN}?redirectURL=${currentURL}`,
+      GOOGLE: `${AUTH.GOOGLE_SIGN_IN}&redirectURL=${currentURL}`,
+    };
+  }
+}

app/components/reusables/login-link.hbs

@@ -0,0 +1,14 @@
+<div class="link__container">
+  <small>{{@label}}</small>
+  <a data-test-login={{@auth}} class="join__link" href={{@authUrl}}>
+    <span>{{@signInText}}</span>
+    <img
+      data-test-login-img
+      class="login__logo"
+      src={{@iconSrc}}
+      alt={{@altText}}
+      height="24px"
+      width="24px"
+    />
+  </a>
+</div>

app/constants/urls.js

@@ -67,7 +67,8 @@ export const ABOUT = {
 };
 
 export const AUTH = {
-  SIGN_IN: `${APPS.API_BACKEND}/auth/github/login`,
+  GITHUB_SIGN_IN: `${APPS.API_BACKEND}/auth/github/login`,
+  GOOGLE_SIGN_IN: `${APPS.API_BACKEND}/auth/google/login?dev=true`,
   SIGN_UP: `${APPS.PROFILE}/new-signup`,
 };
 

app/router.js

@@ -16,4 +16,5 @@ Router.map(function () {
   this.route('events');
   this.route('debug');
   this.route('subscribe');
+  this.route('login');
 });

app/routes/application.js

@@ -1,2 +1,23 @@
 import Route from '@ember/routing/route';
-export default class ApplicationRoute extends Route {}
+import { service } from '@ember/service';
+import { TOAST_OPTIONS } from '../constants/toast-options';
+
+export default class ApplicationRoute extends Route {
+  @service router;
+  @service toast;
+
+  showToast(transition) {
+    this.toast.error(transition.to.queryParams.error, 'Error', TOAST_OPTIONS);
+  }
+
+  beforeModel(transition) {
+    if (
+      transition?.to?.queryParams?.dev === 'true' &&
+      transition?.to?.queryParams?.error
+    ) {
+      if (transition?.to?.queryParams?.error !== '') {
+        this.showToast(transition);
+      }
+    }
+  }
+}

app/routes/login.js

@@ -0,0 +1,13 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class LoginRoute extends Route {
+  @service router;
+  @service login;
+
+  beforeModel(transition) {
+    if (transition?.to?.queryParams?.dev !== 'true') {
+      this.router.transitionTo('/page-not-found');
+    }
+  }
+}

app/styles/app.css

@@ -43,6 +43,7 @@
 @import url("unauthenticated.module.css");
 @import url("subscribe.module.css");
 @import url("phone-input.module.css");
+@import url("login.module.css");
 
 * {
   margin: 0;

app/styles/login.module.css

@@ -0,0 +1,85 @@
+.login__container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: white;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.login__container h3 {
+  text-align: center;
+  margin-top: 1rem;
+  font-size: 2.5rem;
+}
+
+.link__container {
+  margin-top: 1.5rem;
+}
+
+.link__container .join__link {
+  margin: 0;
+}
+
+.link__container small {
+  font-size: medium;
+  margin: 12px;
+}
+
+.login__container h3 span {
+  font-size: 3rem;
+  color: var(--color-pink);
+}
+
+.login__container a {
+  display: flex;
+  gap: 8px;
+}
+
+@media (width <= 625px) {
+  .logo__img {
+    width: 5rem;
+  }
+
+  .login__container h3 {
+    font-size: 2rem;
+  }
+
+  .login__container h3 span {
+    font-size: 2.5rem;
+  }
+
+  .link__container small {
+    font-size: small;
+    margin: 0.5rem;
+  }
+
+  .login__container a img {
+    height: 20px;
+    width: 20px;
+  }
+}
+
+@media (width <= 425px) {
+  .login__container h3 {
+    font-size: 1.5rem;
+  }
+
+  .login__container h3 span {
+    font-size: 2rem;
+  }
+
+  .link__container {
+    margin-top: 1rem;
+  }
+
+  .login__container a img {
+    height: 12rem;
+    width: 12rem;
+  }
+}

app/templates/login.hbs

@@ -0,0 +1,2 @@
+{{page-title "Login"}}
+<Login/>

tests/constants/urls.js

@@ -8,6 +8,7 @@ export const APPS = {
   TASKS: 'https://my.realdevsquad.com/tasks',
   IDENTITY: 'https://my.realdevsquad.com/identity',
   MY_STATUS: 'https://my.realdevsquad.com',
+  STAGING_API_BACKEND: 'https://staging-api.realdevsquad.com',
 };
 
 export const ABOUT = {

tests/integration/components/header-test.js

@@ -8,11 +8,12 @@ module('Integration | Component | header', function (hooks) {
   setupRenderingTest(hooks);
 
   test('header elements renders', async function (assert) {
-    assert.expect(13);
+    assert.expect(15);
 
     this.setProperties({
       isLoggedIn: false,
       isLoading: false,
+      dev: false,
     });
 
     this.set('signOut', () => {
@@ -24,6 +25,7 @@ module('Integration | Component | header', function (hooks) {
         @isLoggedIn={{this.isLoggedIn}}
         @isLoading={{this.isLoading}}
         @signOut={{this.signOut}}
+        @dev={{this.dev}}
       />
     `);
 
@@ -52,6 +54,10 @@ module('Integration | Component | header', function (hooks) {
      */
     // assert.dom('[data-test-login]').hasAttribute('href', AUTH.SIGN_IN);
     assert.dom('[data-test-login-img]').exists();
+
+    this.set('dev', true);
+    assert.dom('[data-test-login]').hasAttribute('href', '/login?dev=true');
+    assert.dom('[data-test-login]').hasText('Sign In');
   });
 
   test('toggle nav menu in mobile view', async function (assert) {

tests/integration/components/login-link-test.js

@@ -0,0 +1,49 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | login-link', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders content', async function (assert) {
+    this.set('label', 'For Developers:');
+    this.set('auth', 'github');
+    this.set('signInText', 'Sign In with GitHub');
+    this.set('iconSrc', 'assets/icons/github-logo.png');
+    this.set('altText', 'GitHub');
+
+    await render(hbs`
+      <Reusables::LoginLink @label={{this.label}} 
+        @auth={{this.auth}}
+        @signInText={{this.signInText}}
+        @iconSrc={{this.iconSrc}}
+        @altText={{this.altText}} 
+    />`);
+
+    assert.dom('small').exists('Label element exists');
+    assert.dom('small').hasText('For Developers:', 'Label text is correct');
+
+    assert
+      .dom('.join__link span')
+      .hasText('Sign In with GitHub', 'Sign in text is correct');
+
+    assert.dom('.login__logo').exists('Logo image exists');
+    assert
+      .dom('.login__logo')
+      .hasAttribute(
+        'src',
+        'assets/icons/github-logo.png',
+        'Image has correct src',
+      );
+    assert
+      .dom('.login__logo')
+      .hasAttribute('alt', 'GitHub', 'Image has correct alt text');
+    assert
+      .dom('.login__logo')
+      .hasAttribute('height', '24px', 'Image has correct height');
+    assert
+      .dom('.login__logo')
+      .hasAttribute('width', '24px', 'Image has correct width');
+  });
+});