Update production (#675)

* pushing changes to logic * clean up * update login and sign up screens * added fetch request * refactored code to use the useApi hook * refactored google login to use useLogin hook * feat: Add cursor pointer to CmButton2 component * close modals for changing password and email when successful * finished clean up for google login * made google login optional so it doesn't affect userb journey * added devmode * clean up * cleaned up * pushing changes to button * Bump @tanstack/react-query from 5.51.15 to 5.51.21 (#634) Bumps [@tanstack/react-query](https://github.com/TanStack/query/tree/HEAD/packages/react-query) from 5.51.15 to 5.51.21. - [Release notes](https://github.com/TanStack/query/releases) - [Commits](https://github.com/TanStack/query/commits/v5.51.21/packages/react-query) --- updated-dependencies: - dependency-name: "@tanstack/react-query" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump axios from 1.7.2 to 1.7.3 (#633) Bumps [axios](https://github.com/axios/axios) from 1.7.2 to 1.7.3. - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](axios/axios@v1.7.2...v1.7.3) --- updated-dependencies: - dependency-name: axios dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @mui/icons-material from 5.16.5 to 5.16.6 (#626) Bumps [@mui/icons-material](https://github.com/mui/material-ui/tree/HEAD/packages/mui-icons-material) from 5.16.5 to 5.16.6. - [Release notes](https://github.com/mui/material-ui/releases) - [Changelog](https://github.com/mui/material-ui/blob/v5.16.6/CHANGELOG.md) - [Commits](https://github.com/mui/material-ui/commits/v5.16.6/packages/mui-icons-material) --- updated-dependencies: - dependency-name: "@mui/icons-material" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump uuid and @types/uuid (#608) Bumps [uuid](https://github.com/uuidjs/uuid) and [@types/uuid](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/uuid). These dependencies needed to be updated together. Updates `uuid` from 9.0.1 to 10.0.0 - [Changelog](https://github.com/uuidjs/uuid/blob/main/CHANGELOG.md) - [Commits](uuidjs/uuid@v9.0.1...v10.0.0) Updates `@types/uuid` from 9.0.8 to 10.0.0 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/uuid) --- updated-dependencies: - dependency-name: uuid dependency-type: direct:production update-type: version-update:semver-major - dependency-name: "@types/uuid" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * 630 refactor google client logic (#636) * pushing changes to logic * clean up * added fetch request * refactored code to use the useApi hook * refactored google login to use useLogin hook * finished clean up for google login * made google login optional so it doesn't affect userb journey * added devmode * clean up * cleaned up * pushing changes to button * chore: Update Google login button text capitalization --------- Co-authored-by: Svenstar74 <[email protected]> * pushing changes * clean up * cleanup * google login code in place * pushing working code ready for refactoring * clean up credentials * pushing code so we can test backend * upgraded to @react-oauth/google so CI works * cleaned up code * clean up * clean up * clean up * changed style of button on login page to demonstrate it can be done * pushing sign up button chnages * clean up * small cleanup * chore: Clean up nginx.config file (#654) * chore: Add Content-Security-Policy header to nginx.config (#655) * chore: Update Content-Security-Policy header in nginx.config * chore: Update Content-Security-Policy header in nginx.config * chore: Update environment variables for Google OAuth * chore: Update serverdata.sh to include additional environment variable in index.html * Remove log statement * chore: Update Content-Security-Policy header in nginx.config * Update Content-Security-Policy header in nginx.config * clean up * Closes [661] - Customize the google login button (#662) * Customized the google button * login form styled * created custom google login component * cleaned and refactored * added devmode * cleanup --------- Co-authored-by: Svenstar74 <[email protected]> * chore: Update Content-Security-Policy header in nginx.config (#664) * Closes [665] - Create userb google login and sign in (#667) * feat: Add support for logging in with Google for User B * adding changes to logic * Added logic for userb if user does not exist * feat: Update Google login component for User B journey * logic implemented for both userb sign in and login * cleanup --------- Co-authored-by: Svenstar74 <[email protected]> * Bump @mui/material from 5.16.5 to 5.16.7 (#642) Bumps [@mui/material](https://github.com/mui/material-ui/tree/HEAD/packages/mui-material) from 5.16.5 to 5.16.7. - [Release notes](https://github.com/mui/material-ui/releases) - [Changelog](https://github.com/mui/material-ui/blob/v5.16.7/CHANGELOG.md) - [Commits](https://github.com/mui/material-ui/commits/v5.16.7/packages/mui-material) --- updated-dependencies: - dependency-name: "@mui/material" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump react-router-dom from 6.25.1 to 6.26.1 (#647) Bumps [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) from 6.25.1 to 6.26.1. - [Release notes](https://github.com/remix-run/react-router/releases) - [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md) - [Commits](https://github.com/remix-run/react-router/commits/[email protected]/packages/react-router-dom) --- updated-dependencies: - dependency-name: react-router-dom dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @sentry/react from 7.118.0 to 8.28.0 (#666) Bumps [@sentry/react](https://github.com/getsentry/sentry-javascript) from 7.118.0 to 8.28.0. - [Release notes](https://github.com/getsentry/sentry-javascript/releases) - [Changelog](https://github.com/getsentry/sentry-javascript/blob/develop/CHANGELOG.md) - [Commits](getsentry/sentry-javascript@7.118.0...8.28.0) --- updated-dependencies: - dependency-name: "@sentry/react" dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @sentry/cli from 2.33.0 to 2.35.0 (#669) Bumps [@sentry/cli](https://github.com/getsentry/sentry-cli) from 2.33.0 to 2.35.0. - [Release notes](https://github.com/getsentry/sentry-cli/releases) - [Changelog](https://github.com/getsentry/sentry-cli/blob/master/CHANGELOG.md) - [Commits](getsentry/sentry-cli@2.33.0...2.35.0) --- updated-dependencies: - dependency-name: "@sentry/cli" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump @tanstack/react-query from 5.51.21 to 5.55.0 (#670) Bumps [@tanstack/react-query](https://github.com/TanStack/query/tree/HEAD/packages/react-query) from 5.51.21 to 5.55.0. - [Release notes](https://github.com/TanStack/query/releases) - [Commits](https://github.com/TanStack/query/commits/v5.55.0/packages/react-query) --- updated-dependencies: - dependency-name: "@tanstack/react-query" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Kirstie <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
ClimateMind · Sep 8, 2024 · 561369a · 561369a
1 parent b16a0bd
commit 561369a
Show file tree

Hide file tree

Showing 32 changed files with 832 additions and 471 deletions.
diff --git a/.env.development b/.env.development
@@ -1,2 +1,3 @@
 REACT_APP_API_URL=https://app-backend-test-001.azurewebsites.net
 REACT_APP_SENTRY_DSN=https://[email protected]/6526369
+REACT_APP_GOOGLE_CLIENT_ID=40848962667-vu42kp42ba16q3mc1ah8l8rmm028jskf.apps.googleusercontent.com
diff --git a/.env.production b/.env.production
@@ -1,2 +1,3 @@
 REACT_APP_API_URL=https://app-backend-prod-001.azurewebsites.net
 REACT_APP_SENTRY_DSN=https://[email protected]/6526369
+REACT_APP_GOOGLE_CLIENT_ID=40848962667-vu42kp42ba16q3mc1ah8l8rmm028jskf.apps.googleusercontent.com
diff --git a/nginx.config b/nginx.config
@@ -9,7 +9,7 @@ server {
         try_files $$uri /index.html;
     }
 
-    add_header Content-Security-Policy "default-src 'self'; frame-src https://www.google.com/; script-src 'self' https://www.googletagmanager.com/ https://*.google-analytics.com  https://*.analytics.google.com https://www.google.com/ https://www.gstatic.com/ 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://*.typekit.net https://fonts.googleapis.com; img-src * www.googletagmanager.com 'self' data: https; font-src 'self' *.typekit.net fonts.googleapis.com fonts.gstatic.com; connect-src 'self' https://*.okta.com https://app-backend-test-001.azurewebsites.net https://app-backend-prod-001.azurewebsites.net https://sentry.io https://o1287611.ingest.sentry.io/api/6526369/envelope/?sentry_key=b0ca2fb00555461ba86f659a99cceb37&sentry_version=7 https://o1287611.ingest.sentry.io/api/6526369/security/?sentry_key=b0ca2fb00555461ba86f659a99cceb37; report-uri https://o1287611.ingest.sentry.io/api/6526369/security/?sentry_key=b0ca2fb00555461ba86f659a99cceb37;";
+    add_header Content-Security-Policy "default-src 'self'; frame-src https://www.google.com/ https://accounts.google.com/; script-src 'self'  https://www.googletagmanager.com/ https://*.google-analytics.com https://*.analytics.google.com https://www.google.com/ https://www.gstatic.com/ https://accounts.google.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline' https://*.typekit.net https://fonts.googleapis.com https://accounts.google.com; style-src-elem 'self' 'unsafe-inline' https://*.typekit.net https://fonts.googleapis.com https://accounts.google.com; img-src * www.googletagmanager.com 'self' data: https; font-src 'self' *.typekit.net fonts.googleapis.com fonts.gstatic.com; connect-src 'self' https://accounts.google.com https://accounts.google.com https://*.okta.com https://app-backend-test-001.azurewebsites.net https://app-backend-prod-001.azurewebsites.net https://sentry.io https://o1287611.ingest.sentry.io/api/6526369/envelope/?sentry_key=b0ca2fb00555461ba86f659a99cceb37&sentry_version=7 https://o1287611.ingest.sentry.io/api/6526369/security/?sentry_key=b0ca2fb00555461ba86f659a99cceb37; report-uri https://o1287611.ingest.sentry.io/api/6526369/security/?sentry_key=b0ca2fb00555461ba86f659a99cceb37;";
     add_header Referrer-Policy "no-referrer, strict-origin-when-cross-origin";
     add_header Strict-Transport-Security "max-age=63072000; includeSubDomains";
     add_header X-Content-Type-Options nosniff;

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,15 +20,17 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.20",
-    "@mui/material": "^5.15.18",
+    "@mui/icons-material": "^5.16.6",
+    "@mui/material": "^5.16.7",
+    "@react-oauth/google": "^0.12.1",
     "@reduxjs/toolkit": "^2.2.5",
-    "@sentry/cli": "^2.32.1",
-    "@sentry/react": "^7.114.0",
+    "@sentry/cli": "^2.35.0",
+    "@sentry/react": "^8.28.0",
     "@sentry/tracing": "^7.114.0",
-    "@tanstack/react-query": "^5.49.2",
-    "axios": "^1.7.2",
+    "@tanstack/react-query": "^5.55.0",
+    "axios": "^1.7.3",
     "chart.js": "^4.4.3",
+    "gapi-script": "^1.2.0",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
     "react": "^18.3.1",
@@ -38,9 +40,9 @@
     "react-markdown": "^9.0.1",
     "react-query": "^3.39.3",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.24.1",
+    "react-router-dom": "^6.26.1",
     "react-scripts": "^5.0.1",
-    "uuid": "^9.0.1"
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
@@ -50,7 +52,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-redux": "^7.1.33",
     "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^9.0.8",
+    "@types/uuid": "^10.0.0",
     "cypress": "^13.13.2",
     "eslint": "^9.6.0",
     "sass": "^1.77.6",

diff --git a/public/logos/cm-logo.png b/public/logos/cm-logo.png
diff --git a/public/logos/slogan.png b/public/logos/slogan.png
diff --git a/serverdata.sh b/serverdata.sh
@@ -1,6 +1,10 @@
 #!/usr/bin/env bash
 
 INDEXPATH=/usr/share/nginx/html/index.html
-JSON_STRING=$( jq -n --arg apiUrl "$REACT_APP_API_URL" '{REACT_APP_API_URL: $apiUrl}' )
-sed -i 's/__SERVERDATA__/$JSON_STRING/g' $INDEXPATH
-#awk '{sub("__SERVERDATA__",$JSON_STRING)}1' $1 > temp.txt && mv temp.txt $1
+
+# Create JSON_STRING with both environment variables
+JSON_STRING=$( jq -n --arg apiUrl "$REACT_APP_API_URL" --arg googleClientId "$REACT_APP_GOOGLE_CLIENT_ID" \
+  '{REACT_APP_API_URL: $apiUrl, REACT_APP_GOOGLE_CLIENT_ID: $googleClientId}' )
+
+# Replace the placeholder with the JSON_STRING in the index.html file
+sed -i "s/__SERVERDATA__/$JSON_STRING/g" $INDEXPATH
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { RouterProvider } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as Sentry from '@sentry/react';
+import { GoogleOAuthProvider } from '@react-oauth/google';
 
 import './global.css';
 import router from './router/Router';
@@ -12,15 +13,19 @@ import { store } from 'store/store';
 export const queryClient = new QueryClient();
 
 const App = () => {
+  const GOOGLE_CLIENT_ID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
+
   return (
     <React.StrictMode>
-      <Provider store={store}>
-        <QueryClientProvider client={queryClient}>
-          <ToastProvider>
-            <RouterProvider router={router} />
-          </ToastProvider>
-        </QueryClientProvider>
-      </Provider>
+      <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID!}>
+        <Provider store={store}>
+          <QueryClientProvider client={queryClient}>
+            <ToastProvider>
+              <RouterProvider router={router} />
+            </ToastProvider>
+          </QueryClientProvider>
+        </Provider>
+      </GoogleOAuthProvider>
     </React.StrictMode>
   );
 };

diff --git a/src/api/responses.ts b/src/api/responses.ts
@@ -1,6 +1,6 @@
-import { Alignment, ClimateEffect2, ClimateEffect3, Solution2, Solution3 } from "shared/types";
-import { TSharedImpact } from "types/SharedImpacts";
-import { TSharedSolution } from "types/SharedSolutions";
+import { Alignment, ClimateEffect2, ClimateEffect3, Solution2, Solution3 } from 'shared/types';
+import { TSharedImpact } from 'types/SharedImpacts';
+import { TSharedSolution } from 'types/SharedSolutions';
 
 export type PostSession = {
   sessionId: string;
@@ -52,6 +52,18 @@ export type Login = {
   };
 };
 
+export type googleLogin = {
+  message: string;
+  access_token: string;
+  user: {
+    email: string;
+    first_name: string;
+    last_name: string;
+    quiz_id: string;
+    user_uuid: string;
+  };
+};
+
 export type CreateConversation = {
   conversationId: string;
   message: string;

diff --git a/src/features/auth/components/ChangeEmailModal.tsx b/src/features/auth/components/ChangeEmailModal.tsx
@@ -21,6 +21,14 @@ function ChangeEmailModal({ isOpen, onClose }: Props) {
   const emailsMatch = newEmail.value === confirmEmail.value;
   const formIsValid = emailValid && emailsMatch && password.value !== '';
 
+  async function onConfirm() {
+    const isSuccessful = await updateEmail(newEmail.value, confirmEmail.value, password.value);
+
+    if (isSuccessful) {
+      onClose();
+    }
+  }
+
   useEffect(() => {
     setNewEmail({ value: '', touched: false });
     setConfirmEmail({ value: '', touched: false });
@@ -67,7 +75,7 @@ function ChangeEmailModal({ isOpen, onClose }: Props) {
 
       <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 50, marginTop: 50 }}>
         <CmButton variant='text' text='Cancel' onClick={onClose} />
-        <CmButton variant='text' text='Confirm' isLoading={isLoading} onClick={() => updateEmail(newEmail.value, confirmEmail.value, password.value)} disabled={!formIsValid} />
+        <CmButton variant='text' text='Confirm' isLoading={isLoading} onClick={onConfirm} disabled={!formIsValid} />
       </div>
     </CmModal>
   );

diff --git a/src/features/auth/components/ChangePasswordModal.tsx b/src/features/auth/components/ChangePasswordModal.tsx
@@ -18,6 +18,13 @@ function ChangePasswordModal({isOpen, onClose}: Props) {
   const passwordsMatch = newPassword.value === confirmPassword.value;
   const formIsValid = passwordValid && passwordsMatch && currentPassword.value !== '';
 
+  async function onConfirm() {
+    const isSuccessful = await changePassword(currentPassword.value, newPassword.value, confirmPassword.value);
+    if (isSuccessful) {
+      onClose();
+    }
+  }
+
   useEffect(() => {
     setCurrentPassword({ value: '', touched: false });
     setNewPassword({ value: '', touched: false });
@@ -64,7 +71,7 @@ function ChangePasswordModal({isOpen, onClose}: Props) {
 
       <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 50, marginTop: 50 }}>
         <CmButton variant='text' text='Cancel' onClick={onClose} />
-        <CmButton variant='text' text='Confirm' isLoading={isLoading} onClick={() => changePassword(currentPassword.value, newPassword.value, confirmPassword.value)} disabled={!formIsValid}
+        <CmButton variant='text' text='Confirm' isLoading={isLoading} onClick={onConfirm} disabled={!formIsValid}
         />
       </div>
     </CmModal>

diff --git a/src/features/auth/components/GoogleLogin.tsx b/src/features/auth/components/GoogleLogin.tsx
@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { CredentialResponse } from '@react-oauth/google';
+
+import ROUTES from 'router/RouteConfig';
+import { CmButton2 } from 'shared/components';
+import { useLogin } from '../hooks';
+import useToastMessage from '../../../shared/hooks/useToastMessage';
+
+interface Props {
+  navigateAfterLogin: () => void;
+  text?: string;
+}
+
+function GoogleLogin({ navigateAfterLogin, text }: Props) {
+  const GOOGLE_CLIENT_ID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
+
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { conversationId } = useParams();
+
+  const { showErrorToast } = useToastMessage();
+  const { loginGoogleUserA, loginGoogleUserB } = useLogin();
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function handleGoogleSuccess(credentialResponse: CredentialResponse) {
+    setIsLoading(true);
+    try {
+      if (conversationId) {
+        const isSuccessful = await loginGoogleUserB(credentialResponse);
+        if (isSuccessful && location.pathname === ROUTES.USERB_LOGIN_PAGE + '/' + conversationId) {
+          navigate(ROUTES.USERB_CORE_VALUES_PAGE + '/' + conversationId);
+        } else if (isSuccessful && location.pathname === ROUTES.USERB_CORE_VALUES_PAGE + '/' + conversationId) {
+        } else if (!isSuccessful) {
+          navigate(ROUTES.USERB_HOW_CM_WORKS_PAGE + '/' + conversationId);
+          showErrorToast('Please Do The Quiz First');
+        } else if (location.pathname === ROUTES.USERB_SIGN_UP_PAGE + '/' + conversationId) {
+          const isSuccessful = await loginGoogleUserA(credentialResponse);
+          if (isSuccessful) {
+            navigate(ROUTES.CLIMATE_FEED_PAGE);
+          }
+        }
+      } else {
+        const isSuccessful = await loginGoogleUserA(credentialResponse);
+
+        if (isSuccessful) {
+          navigateAfterLogin();
+        } else if (!isSuccessful) {
+          navigate(ROUTES.PRE_QUIZ_PAGE);
+        }
+      }
+    } catch (error) {
+      console.error('Error in loginGoogleUser:', error);
+    }
+    setIsLoading(false);
+  }
+
+  useEffect(() => {
+    /* Initialize Google API client */
+    (window as any).google.accounts.id.initialize({
+      client_id: GOOGLE_CLIENT_ID,
+      callback: handleCredentialResponse,
+    });
+  }, []);
+
+  const handleCredentialResponse = (response: any) => {
+    const credential = response.credential;
+    // Pass the credential to your login function
+    handleGoogleSuccess(credential);
+  };
+
+  const handleGoogleLogin = () => {
+    (window as any).google.accounts.id.prompt(); // Triggers the Google sign-in prompt
+  };
+  return (
+    <CmButton2
+      text={text}
+      isLoading={isLoading}
+      onClick={handleGoogleLogin}
+      startIcon={<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/google/google-original.svg" style={{ width: 24, height: 24 }} />}
+      style={{ background: 'white', boxShadow: '0px 2px 3px 0px #0000002B, 0px 0px 3px 0px #00000015', border: 'none' }}
+    />
+  );
+}
+
+export default GoogleLogin;
diff --git a/src/features/auth/components/LoginForm.tsx b/src/features/auth/components/LoginForm.tsx
@@ -1,14 +1,13 @@
 import { useState } from 'react';
-import { CmButton, CmTextInput, CmTypography } from 'shared/components';
+import { CmButton, CmButton2, CmTextInput, CmTypography } from 'shared/components';
 
 interface Props {
   isLoading: boolean;
-  onCancel?: () => void;
   onLogin: (email: string, password: string) => void;
   onForgotPasswordClick: () => void;
 }
 
-function LoginForm({ isLoading, onCancel, onLogin, onForgotPasswordClick }: Props) {
+function LoginForm({ isLoading, onLogin, onForgotPasswordClick }: Props) {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
@@ -21,34 +20,18 @@ function LoginForm({ isLoading, onCancel, onLogin, onForgotPasswordClick }: Prop
 
   return (
     <form onSubmit={handleSubmit} style={styles.form}>
-      <CmTextInput
-        id='email'
-        label='Email'
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        placeholder='[email protected]'
-        type='email'
-        style={styles.textInput}
-      />
+      <CmTextInput id="email" label="Email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" type="email" style={styles.textInput} />
 
-      <CmTextInput
-        id='password'
-        label='Password'
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        placeholder='Super Secret Password'
-        type='password'
-        style={styles.textInput}
-      />
+      <CmTextInput id="password" label="Password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Super Secret Password" type="password" style={styles.textInput} />
 
       <div style={styles.passwordResetContainer}>
         <CmTypography variant="body">Forgot your password?</CmTypography>
-        <CmButton variant='text' text='Send reset link' onClick={onForgotPasswordClick} style={{ textTransform: 'none' }} />
+
+        <CmButton variant="text" text="Send reset link" onClick={onForgotPasswordClick} style={{ textTransform: 'none' }} />
       </div>
 
-      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 30, gap: 20 }}>
-        {onCancel && <CmButton text='Cancel' style={{ backgroundColor: 'transparent', borderColor: 'black' }} onClick={onCancel} />}
-        <CmButton text='Log In' type='submit' isLoading={isLoading} disabled={!email || !password} onClick={handleSubmit} style={{ marginLeft: 'auto' }} />
+      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', alignItems: 'center', marginTop: 30, gap: 20 }}>
+        <CmButton2 text="Log In" type="submit" isLoading={isLoading} disabled={!email || !password} onClick={handleSubmit} />
       </div>
     </form>
   );
@@ -67,10 +50,17 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
   passwordResetContainer: {
     display: 'flex',
+    flexDirection: 'column',
     alignItems: 'center',
-    gap: 15,
-    marginTop: 10,
-    marginBottom: 30,
+    marginTop: 40,
+    marginBottom: '20%',
+  },
+  resetLinkButton: {
+    textTransform: 'none',
+    textDecoration: 'underline',
+    letterSpacing: 0,
+    fontWeight: 800,
+    paddingTop: 0,
   },
 };