Update production

Dockerfile

@@ -11,7 +11,7 @@ COPY . ./
 RUN npm run build
 
 ##stage 2. build the production (server) environment
-FROM nginx:1.17-alpine
+FROM nginx:1.23.2-alpine
 
 #install curl and envsubst
 RUN apk --no-cache add curl

Dockerfile.local

@@ -11,7 +11,7 @@ COPY . ./
 RUN npm run build
 
 ##stage 2. build the production (server) environment
-FROM nginx:1.17-alpine
+FROM nginx:1.23.2-alpine
 
 #install curl and envsubst
 RUN apk --no-cache add curl

Dockerfile.production

@@ -11,7 +11,7 @@ COPY . ./
 RUN npm run build
 
 ##stage 2. build the production (server) environment
-FROM nginx:1.17-alpine
+FROM nginx:1.23.2-alpine
 
 # Install curl and envsubst
 RUN apk --no-cache add curl

Dockerfile.test

@@ -12,7 +12,7 @@ COPY .env.development .env.production
 RUN npm run build
 
 ## Stage 2. build the production (server) environment
-FROM nginx:1.17-alpine
+FROM nginx:1.23.2-alpine
 
 # Install curl and envsubst
 RUN apk --no-cache add curl

cypress/e2e/new-user-a.cy.ts

@@ -15,20 +15,26 @@ describe('New UserA', () => {
   it('allows new userA to go through 10 questions, see his results (personal values) and sign up', () => {
     // Load the HomePage and accept cookies
     cy.visit('/');
-    cy.get('button').contains(/accept/i).click();
+    cy.get('button')
+      .contains(/accept/i)
+      .click();
 
     // Transition to the PreQuizPage through button click
-    cy.get('button').contains(/get started/i).click({ force: true });
+    cy.get('button')
+      .contains(/get started/i)
+      .click({ force: true });
     cy.location('pathname').should('equal', '/start');
 
     // Transition to the QuizPage through button click
-    cy.get('button').contains(/take the quiz/i).click({ force: true });
+    cy.get('button')
+      .contains(/take the quiz/i)
+      .click({ force: true });
     cy.location('pathname').should('equal', '/questionnaire');
 
     // Complete the quiz.
     for (let i = 0; i < 10; i++) {
-      cy.contains('Q' + (i+1));
-      cy.contains('/10')
+      cy.contains('Q' + (i + 1));
+      cy.contains('/10');
       cy.contains(/not like me at all/i).click({ force: true });
       cy.tick(300); // Skip the animation between questions
       cy.wait(100); // Wait for the next question to appear
@@ -37,21 +43,32 @@ describe('New UserA', () => {
     // Submit the feedback and finish the quiz
     cy.contains(/bonus/i);
     cy.get('input').type('Some custom feedback');
-    cy.get('button').contains(/finish quiz/i).click();
+    cy.get('button')
+      .contains(/finish quiz/i)
+      .click();
 
     // Find out the results (personal values)
     cy.location('pathname').should('equal', '/submit');
-    cy.get('button').contains(/find out my climate personality/i).click();
+    cy.get('button')
+      .contains(/find out my climate personality/i)
+      .click();
     cy.location('pathname').should('equal', '/personal-values');
-
-    cy.contains(/power/i).should('be.visible');
-    cy.contains(/security/i).should('be.visible');
-    cy.contains(/tradition/i).should('be.visible');
-
-    cy.get('canvas[typeof="radar"]').should('be.visible');
+    cy.tick(300);
+    cy.wait(100);
+    cy.contains(/power/i).scrollIntoView().should('be.visible');
+    cy.contains(/security/i)
+      .scrollIntoView()
+      .should('be.visible');
+    cy.contains(/tradition/i)
+      .scrollIntoView()
+      .should('be.visible');
+
+    cy.get('canvas[typeof="radar"]').scrollIntoView().should('be.visible');
 
     // Complete by going to the sign up page
-    cy.get('button').contains(/dive in/i).click();
+    cy.get('button')
+      .contains(/dive in/i)
+      .click();
     cy.location('pathname').should('equal', '/sign-up');
 
     // At first the sign up button should be disabled
@@ -64,26 +81,34 @@ describe('New UserA', () => {
     cy.get('input[id="confirmPassword"]').type('asdf1234');
 
     // Now the sign up button should be enabled and login the user as well
-    cy.get('button').contains(/create account/i).click();
+    cy.get('button')
+      .contains(/create account/i)
+      .click();
     cy.location('pathname').should('equal', '/climate-feed');
   });
 
   it('allows new userA to go through 20 questions, see his results (personal values) and sign up', () => {
     // Load the HomePage and accept cookies
     cy.visit('/');
-    cy.get('button').contains(/accept/i).click();
+    cy.get('button')
+      .contains(/accept/i)
+      .click();
 
     // Transition to the PreQuizPage through button click
-    cy.get('button').contains(/get started/i).click({ force: true });
+    cy.get('button')
+      .contains(/get started/i)
+      .click({ force: true });
     cy.location('pathname').should('equal', '/start');
 
     // Transition to the QuizPage through button click
-    cy.get('button').contains(/take the quiz/i).click({ force: true });
+    cy.get('button')
+      .contains(/take the quiz/i)
+      .click({ force: true });
     cy.location('pathname').should('equal', '/questionnaire');
 
     // Complete the quiz.
     for (let i = 0; i < 10; i++) {
-      cy.contains('Q' + (i+1));
+      cy.contains('Q' + (i + 1));
       cy.contains('/10');
       cy.contains(/not like me at all/i).click({ force: true });
       cy.tick(300); // Skip the animation between questions
@@ -93,16 +118,20 @@ describe('New UserA', () => {
     // Submit the feedback and finish the quiz
     cy.contains(/bonus/i);
     cy.get('input').type('Some custom feedback');
-    cy.get('button').contains(/finish quiz/i).click();
+    cy.get('button')
+      .contains(/finish quiz/i)
+      .click();
 
     // Continue with the next 10 questions
     cy.location('pathname').should('equal', '/submit');
-    cy.get('button').contains(/continue/i).click();
+    cy.get('button')
+      .contains(/continue/i)
+      .click();
     cy.location('pathname').should('equal', '/questionnaire');
 
     // Complete the quiz.
     for (let i = 10; i < 20; i++) {
-      cy.contains('Q' + (i+1));
+      cy.contains('Q' + (i + 1));
       cy.contains('/20');
       cy.contains(/not like me at all/i).click({ force: true });
       cy.tick(300); // Skip the animation between questions
@@ -111,17 +140,26 @@ describe('New UserA', () => {
 
     // Find out the results (personal values)
     cy.location('pathname').should('equal', '/submit-set-two');
-    cy.get('button').contains(/find out my climate personality/i).click();
+    cy.get('button')
+      .contains(/find out my climate personality/i)
+      .click();
     cy.location('pathname').should('equal', '/personal-values');
-
-    cy.contains(/power/i).should('be.visible');
-    cy.contains(/security/i).should('be.visible');
-    cy.contains(/tradition/i).should('be.visible');
-
-    cy.get('canvas[typeof="radar"]').should('be.visible');
+    cy.tick(300);
+    cy.wait(100);
+    cy.contains(/power/i).scrollIntoView().should('be.visible');
+    cy.contains(/security/i)
+      .scrollIntoView()
+      .should('be.visible');
+    cy.contains(/tradition/i)
+      .scrollIntoView()
+      .should('be.visible');
+
+    cy.get('canvas[typeof="radar"]').scrollIntoView().should('be.visible');
 
     // Complete by going to the sign up page
-    cy.get('button').contains(/dive in/i).click();
+    cy.get('button')
+      .contains(/dive in/i)
+      .click();
     cy.location('pathname').should('equal', '/sign-up');
   });
 });

package.json

@@ -7,7 +7,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "eject": "react-scripts eject",
-    "test": "cypress run",
+    "test": "cypress run --headed",
     "docker:build": "docker build -t react-docker .",
     "docker:run": "docker run -p 3000:80 -e http://localhost:5000 --rm react-docker",
     "docker:dev:build": "docker build -f Dockerfile.dev -t react-docker-dev .",

src/api/responses.ts

@@ -55,6 +55,7 @@ export type Login = {
 export type googleLogin = {
   message: string;
   access_token: string;
+  refresh_token: string;
   user: {
     email: string;
     first_name: string;

src/features/auth/components/LoginForm.tsx

@@ -26,7 +26,6 @@ function LoginForm({ isLoading, onLogin, onForgotPasswordClick }: Props) {
 
       <div style={styles.passwordResetContainer}>
         <CmTypography variant="body">Forgot your password?</CmTypography>
-
         <CmButton variant="text" text="Send reset link" onClick={onForgotPasswordClick} style={{ textTransform: 'none' }} />
       </div>
 
@@ -42,7 +41,8 @@ const styles: { [key: string]: React.CSSProperties } = {
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    width: '100%',
+    width: '80vw',
+    maxWidth: 320,
   },
   textInput: {
     marginTop: 20,

src/features/auth/hooks/useLogin.tsx

@@ -8,7 +8,7 @@ function useLogin() {
   const dispatch = useAppDispatch();
   const quizIdB = useAppSelector((state) => state.auth.userB.quizId);
   const quizIdA = useAppSelector((state) => state.auth.userA.quizId);
-  
+
   const apiClient = useApiClient();
   const { showSuccessToast, showErrorToast } = useToastMessage();
 

src/features/quiz/components/QuizProgress.tsx

@@ -1,4 +1,3 @@
-import { useMediaQuery } from '@mui/material';
 import { CmBackButton, CmTypography } from 'shared/components';
 
 interface Props {
@@ -9,11 +8,9 @@ interface Props {
 }
 
 function QuizProgress({ onBack, currentQuestionIndex, maxQuestionIndex, alternativeText }: Props) {
-  const isSmall = useMediaQuery('(max-width: 960px)');
-
   // We only show the back button on the top for small screens. For larger screens it is beneath the question.
   // And of course we don't show it on the first question, because there's no question to go back to.
-  const showBackButtonTop = isSmall && (maxQuestionIndex - currentQuestionIndex) !== 9;
+  const showBackButtonTop =  (maxQuestionIndex - currentQuestionIndex) !== 9;
 
   // Calculate the current value of the progress bar.
   let progress = currentQuestionIndex / 10 - 0.1;

src/pages/UserAUnauthorizedPages/LoginPage.tsx

@@ -8,7 +8,6 @@ import { LoginForm, RequestPasswordResetModal, useLogin, useResetPassword } from
 import { useMobileView } from 'shared/hooks';
 
 function LoginPage() {
-  const devMode = localStorage.getItem('devMode') === 'true';
   const navigate = useNavigate();
   const location = useLocation();
   const isMobile = useMobileView();
@@ -51,7 +50,7 @@ function LoginPage() {
         <div style={{ display: 'flex', flexDirection: 'column', gap: 19, justifyContent: 'center', alignItems: 'center' }}>
           <LoginForm isLoading={isLoading} onLogin={handleSubmit} onForgotPasswordClick={() => setShowPasswordResetModal(true)} />
           <div style={{ borderBottom: '1px solid #0000001A', height: 1, width: 205 }}></div>
-          {devMode && <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Log In With Google" />}
+          <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Log In With Google" />
         </div>
 
         <RequestPasswordResetModal isOpen={showPasswordResetModal} onClose={() => setShowPasswordResetModal(false)} onSubmit={handlePasswordReset} />

src/pages/UserAUnauthorizedPages/SignUpPage.tsx

@@ -10,8 +10,6 @@ import { SignUpForm, useSignUp } from 'features/auth';
 import GoogleLogin from 'features/auth/components/GoogleLogin';
 
 function SignUpPage() {
-  const devMode = localStorage.getItem('devMode') === 'true';
-
   const signUpId = uuidv4();
   const navigate = useNavigate();
 
@@ -51,7 +49,7 @@ function SignUpPage() {
         <div style={{ display: 'flex', flexDirection: 'column', gap: 19, justifyContent: 'center', alignItems: 'center' }}>
           <SignUpForm isLoading={isLoading} onSignUp={signUpHandler} />
           <div style={{ borderBottom: '1px solid #0000001A', height: 1, width: 205 }}></div>
-          {devMode && <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Continue With Google" />}
+          <GoogleLogin navigateAfterLogin={navigateAfterLogin} text="Continue With Google" />
         </div>
       </PageContent>
     </Page>

src/pages/UserBPages/UserBSignUpPage.tsx

@@ -47,7 +47,9 @@ function UserBSignUpPage() {
         <CmTypography variant="h1">Welcome to Climate Mind</CmTypography>
 
         <div style={{ display: 'flex' }}>
-          <CmTypography variant="body" style={{ textAlign: 'center' }}>Already have an account?</CmTypography>
+          <CmTypography variant="body" style={{ textAlign: 'center' }}>
+            Already have an account?
+          </CmTypography>
           <CmButton variant="text" text="Login" onClick={() => navigate(ROUTES.LOGIN_PAGE)} style={styles.loginButton} />
         </div>
         <div style={{ display: 'flex', flexDirection: 'column', gap: 19, justifyContent: 'center', alignItems: 'center' }}>