auth e2e test

jam-ui/.gitignore

@@ -19,6 +19,8 @@
 .env.test.local
 .env.production.local
 
+.cypress.env.json
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

jam-ui/cypress.env.json

@@ -0,0 +1,6 @@
+{
+  "baseUrl": "http://beta.jamkazam.local:4000",
+  "legacyBaseUrl": "http://www.jamkazam.local:3000",
+  "apiBaseUrl": "http://www.jamkazam.local:3000/api"
+  
+}

jam-ui/cypress.json

@@ -1,6 +1,7 @@
 {
-  "baseUrl": "http://beta.jamkazam.local:3000",
+  "baseUrl": "http://beta.jamkazam.local:4000",
   "env": {
-    "apiBaseUrl": "http://www.jamkazam.local:4000/api"
+    "legacyBaseUrl": "http://www.jamkazam.local:3000",
+    "apiBaseUrl": "http://www.jamkazam.local:3000/api"
   }
 }

jam-ui/cypress/integration/auth/signup_signin.spec.js

@@ -0,0 +1,84 @@
+/// <reference types="cypress" />
+
+import {email} from 'chance';
+
+describe('sign up and sign in', () => {
+  it('redirects to rails app', () => {
+    cy.visit('/')
+    cy.contains('Signin to begin')
+    cy.contains('Please sign in to your jamkazam account')
+    cy.get('.btn').contains('Sign in').click()
+    //cy.visit(Cypress.env('baseUrl'))
+    //legacy app sign in page
+    cy.url().should('eq', `${Cypress.env('legacyBaseUrl')}/signin`)
+    //cy.get('a.show-signup-dialog').first().click()
+    //cy.get('a.signup-email').first().click()
+    //cy.url().should('eq', `${Cypress.env('legacyBaseUrl')}/signup`)
+
+    //legacy app sign up page
+    
+  })
+
+  // it('signs up', () => {
+  //   cy.visit(`${Cypress.env('legacyBaseUrl')}/signup`)
+  //   cy.get('#jam_ruby_user_first_name').type('David')
+  //   cy.get('#jam_ruby_user_last_name').type('Miller')
+  //   cy.get('#jam_ruby_user_email').type(chance.email()  )
+  //   cy.get('#jam_ruby_user_password').type('jam123')
+  //   cy.get('#jam_ruby_user_password_confirmation').type('jam123')
+  //   cy.get('#jam_ruby_user_terms_of_service').check()
+  //   cy.get('#create-account-submit').click()
+  // })
+
+  // it('access dashboard', () => {
+  //   cy.visit(Cypress.env('baseUrl'))
+  //   cy.contains('Dashboard')
+  // })
+})
+
+describe.only('Dashboard', () => {
+  before(() => {
+    cy.visit(`${Cypress.env('legacyBaseUrl')}/signin`)
+    cy.get('.signin-form').first().within(() => {
+      cy.get('#session_email').type('nuwan@jamkazam.com')
+      cy.get('#session_password').type('jam123')
+      cy.get('input.signin-submit').click()
+    })
+  })
+
+  beforeEach(() => {
+    // before each test, we can automatically preserve the
+    // 'session_id' and 'remember_token' cookies. this means they
+    // will not be cleared before the NEXT test starts.
+    //
+    // the name of your cookies will likely be different
+    // this is an example
+    Cypress.Cookies.preserveOnce('session_id', 'remember_token')
+  })
+
+  it('is on dashboard', () => {
+    cy.visit(Cypress.env('baseUrl'))
+    cy.contains('Dashboard')
+  })
+
+})
+
+
+
+// describe('with authenticated user', () => {
+//   beforeEach(() => {
+//     cy.visit(`${Cypress.env('legacyBaseUrl')}/signin`)
+//     cy.get('.signin-form').first().within(() => {
+//       cy.get('#session_email').type('nuwan@jamkazam.com')
+//       cy.get('#session_password').type('jam123')
+//       cy.get('input.signin-submit').click()
+//     })
+//   })
+
+//   it('user in legacy app', () => {
+//     cy.url().should('contain', 'client')
+//     cy.visit(Cypress.env('baseUrl'))
+//     cy.contains('Dashboard')
+//   })
+// })
+

jam-ui/package-lock.json

@@ -4379,6 +4379,11 @@
         "supports-color": "^5.3.0"
       }
     },
+    "chance": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/chance/-/chance-1.1.8.tgz",
+      "integrity": "sha512-v7fi5Hj2VbR6dJEGRWLmJBA83LJMS47pkAbmROFxHWd9qmE1esHRZW8Clf1Fhzr3rjxnNZVCjOEv/ivFxeIMtg=="
+    },
     "change-emitter": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",

jam-ui/package.json

@@ -20,6 +20,7 @@
     "@reduxjs/toolkit": "^1.6.1",
     "attr-accept": "^2.2.2",
     "bootstrap": "^4.5.3",
+    "chance": "^1.1.8",
     "chart.js": "^2.9.3",
     "classnames": "^2.2.6",
     "echarts": "^4.9.0",

jam-ui/src/assets/scss/custom/_user.scss

@@ -103,3 +103,8 @@
   height: 100%;
   object-fit: cover;
 }
+
+.swiper-person-card{
+  box-shadow: none !important;
+  border: solid 1px #eee;
+}

jam-ui/src/components/auth/JKLoginRequest.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import { Card, CardBody, Row, Col } from 'reactstrap';
 import Logo from '../navbar/Logo';
 import Section from '../common/Section';
@@ -13,7 +13,9 @@ function JKLoginRequest() {
             <CardBody className="fs--1 font-weight-normal p-5">
               <Row className="justify-content-center">
                 <h3 className="mt-3 mt-md-4 font-weight-normal fs-2">Signin to begin</h3>
-                <p>Please login to your jamkazam account before accessing this interface.</p>
+                <p>Please sign in to your jamkazam account</p>
+              </Row>
+              <Row className="justify-content-center">
                 <a className="btn btn-primary" href={`${process.env.REACT_APP_LEGACY_BASE_URL}/signin`}>
                   Sign in
                 </a>
@@ -23,7 +25,7 @@ function JKLoginRequest() {
         </Col>
       </Row>
     </Section>
-  )
+  );
 }
 
-export default JKLoginRequest
+export default JKLoginRequest;

jam-ui/src/components/navbar/JKNavbarTopProfile.js

@@ -1,58 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useAuth } from '../../context/AuthContext';
-import { getCurrentUser } from '../../helpers/rest';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-import { Link } from 'react-router-dom';
-import JKCurrentUserAvatar from './JKCurrentUserAvatar'
-
-const JKNavbarTopCurrentUser = () => {
-  const { currentUser } = useAuth();
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-
-  const toggle = () => setDropdownOpen(prevState => !prevState);
-
-  // const fetchCurrentUser = () => {
-  //   getCurrentUser()
-  //     .then(resp => {
-  //       if (resp.ok) {
-  //         return resp.json();
-  //       }
-  //     })
-  //     .then(data => {
-  //       console.log('CURRENT_USER', data);
-  //       setCurrentUser(data);
-  //     })
-  //     .catch(error => console.log(error));
-  // };
-
-  const handleLogout = () => {};
-
-  // useEffect(() => {
-  //   fetchCurrentUser();
-  // }, []);
-
-  return (
-    <div>
-      {currentUser && 
-        <Dropdown isOpen={dropdownOpen} toggle={toggle} data-testid="navbarTopProfileDropdown">
-        <DropdownToggle nav={true}>
-          <JKCurrentUserAvatar />
-          <span className="d-none d-lg-inline navbar-text">
-          {currentUser.name}
-          </span>
-          
-        </DropdownToggle>
-        <DropdownMenu right={true}>
-          <DropdownItem tag={Link} to="/pages/settings">
-            My Profile
-          </DropdownItem>
-          <DropdownItem onClick={handleLogout}>Sign out</DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-      }
-      
-    </div>
-  );
-};
-
-export default JKNavbarTopCurrentUser;

jam-ui/src/components/navbar/JKProfileDropdown.js

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { DropdownItem, DropdownMenu, DropdownToggle, Dropdown } from 'reactstrap';
 import { useAuth } from '../../context/AuthContext';
+import JKProfileAvatar from '../profile/JKProfileAvatar';
 
 const ProfileDropdown = () => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -13,21 +14,18 @@ const ProfileDropdown = () => {
 
   const handleLogout = () => {
     setCurrentUser(null);
-    //localStorage.setItem('user', null);
-    // removeCookie("remember_token", {
-    //   domain: ".jamkazam.local"
-    // });
-    // history.push('/authentication/basic/logout');
     console.log("signout...");
   }
 
 
   return (
     
-    // <Avatar src={team3} />
+    <>
+    
     <Dropdown
       nav
       inNavbar
+      data-testid="navbarTopProfileDropdown"
       isOpen={dropdownOpen}
       toggle={toggle}
       onMouseOver={() => {
@@ -40,7 +38,10 @@ const ProfileDropdown = () => {
       }}
     >
       <DropdownToggle nav className="pr-0">
+        <JKProfileAvatar url={currentUser.photo_url} className="d-block d-lg-none d-xl-none" />
+        <span className="d-none d-lg-block">
           {currentUser && currentUser.name}
+        </span>
       </DropdownToggle>
       <DropdownMenu right className="dropdown-menu-card">
         <div className="bg-white rounded-soft py-2">
@@ -48,11 +49,12 @@ const ProfileDropdown = () => {
             My Profile
           </DropdownItem> 
           <DropdownItem onClick={handleLogout}>
-            Logout
+            Sign out
           </DropdownItem>
         </div>
       </DropdownMenu>
     </Dropdown>
+    </>
   );
 };
 

jam-ui/src/components/page/JKPeopleSwiper.js

@@ -44,7 +44,7 @@ const JKPeopleSwiper = ({ people, goNextPage }) => {
       >
         {people.map((person, index) => (
           <SwiperSlide key={person.id}>
-            <Card>
+            <Card className="swiper-person-card">
               <CardHeader className="bg-200">
                 <div className="avatar avatar-xl d-inline-block me-2 mr-2">
                   <JKProfileAvatar url={person.photo_url} size="xl"/>

jam-ui/src/components/profile/JKProfileAvatar.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import defaultAvatarUrl from '../../assets/img/team/avatar.png';
 import Avatar from '../common/Avatar';
 
-const JKProfileAvatar = ({ url, size }) => {
+const JKProfileAvatar = ({ url, size, className }) => {
   const avatarUrl = () => {
     if (url) {
       return url;
@@ -12,7 +12,7 @@ const JKProfileAvatar = ({ url, size }) => {
     }
   };
 
-  return <Avatar src={avatarUrl()} size={size} />;
+  return <Avatar src={avatarUrl()} size={size} className={className}  />;
 };
 
 JKProfileAvatar.propTypes = {