fix: frontend lint errors

2026-09-22 13:39:35 +00:00 · 2023-06-21 07:29:05 +00:00
parent 9b447a4ab0
commit 8a5e655122
7 changed files with 119 additions and 94 deletions
--- a/frontend/src/components/login/InitialLoginStep.tsx
+++ b/frontend/src/components/login/InitialLoginStep.tsx
@@ -1,16 +1,16 @@
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import Link from "next/link";
+import { useRouter } from "next/router";
 import axios from "axios"

 import attemptLogin from "@app/components/utilities/attemptLogin";

 import Error from "../basic/Error";
+import attemptCliLogin from "../utilities/attemptCliLogin";
 // import { faGoogle } from '@fortawesome/free-brands-svg-icons';
 // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Input } from '../v2';
-import attemptCliLogin from '../utilities/attemptCliLogin';
+import { Button, Input } from "../v2";

 export default function InitialLoginStep({
    setStep,
@@ -38,11 +38,11 @@ export default function InitialLoginStep({
            }

            setIsLoading(true);
-            const queryParams = new URLSearchParams(location.search)
+            const queryParams = new URLSearchParams(window.location.search)
            if (queryParams && queryParams.get("callback_port")) {
                const callbackPort = queryParams.get("callback_port")

-                //attemptCliLogin
+                // attemptCliLogin
                const isCliLoginSuccessful = await attemptCliLogin({
                    email,
                    password,
@@ -59,15 +59,15 @@ export default function InitialLoginStep({
                    // case: login was successful
                    const cliUrl = `http://localhost:${callbackPort}`

-                    //send request to server endpoint
+                    // send request to server endpoint
                    const instance = axios.create()
-                    const cliResp = await instance.post(cliUrl,{...isCliLoginSuccessful.loginResponse})
+                    const cliResp = await instance.post(cliUrl, { ...isCliLoginSuccessful.loginResponse })
                    console.log(cliResp)

-                    //cli page
+                    // cli page
                    router.push("/cli-redirect");

-                    //on success, router.push to cli Login Successful page
+                    // on success, router.push to cli Login Successful page

                }
            } else {
@@ -86,7 +86,7 @@ export default function InitialLoginStep({
                    }

                    // case: login does not require MFA step
-                    router.push(`/dashboard/${localStorage.getItem('projectData.id')}`);
+                    router.push(`/dashboard/${localStorage.getItem("projectData.id")}`);
                }
            }

@@ -127,18 +127,18 @@ export default function InitialLoginStep({
            </div>
        </div>
        <div className="relative pt-2 md:pt-0 md:px-1.5 flex items-center justify-center w-1/4 lg:w-1/6 min-w-[21.3rem] md:min-w-[22rem] mx-auto rounded-lg max-h-24 md:max-h-28">
-          <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
-            <Input
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              type="password"
-              placeholder="Enter your password..."
-              isRequired
-              autoComplete="current-password"
-              id="current-password"
-              className="h-12 select:-webkit-autofill:focus"
-            />
-          </div>
+            <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
+                <Input
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    type="password"
+                    placeholder="Enter your password..."
+                    isRequired
+                    autoComplete="current-password"
+                    id="current-password"
+                    className="h-12 select:-webkit-autofill:focus"
+                />
+            </div>
        </div>
        {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
        <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
--- a/frontend/src/components/login/MFAStep.tsx
+++ b/frontend/src/components/login/MFAStep.tsx
@@ -1,13 +1,13 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { useState } from 'react';
-import ReactCodeInput from 'react-code-input';
-import { useTranslation } from 'react-i18next';
-import { useRouter } from 'next/router';
+import React, { useState } from "react";
+import ReactCodeInput from "react-code-input";
+import { useTranslation } from "react-i18next";
+import { useRouter } from "next/router";
 import axios from "axios"

-import attemptLoginMfa from '@app/components/utilities/attemptLoginMfa';
-import attemptCliLoginMfa from '@app/components/utilities/attemptCliLoginMfa'
-import { useSendMfaToken } from '@app/hooks/api/auth';
+import attemptCliLoginMfa from "@app/components/utilities/attemptCliLoginMfa"
+import attemptLoginMfa from "@app/components/utilities/attemptLoginMfa";
+import { useSendMfaToken } from "@app/hooks/api/auth";

 import Error from "../basic/Error";
 import { Button } from "../v2";
@@ -78,11 +78,11 @@ export default function MFAStep({
      }

      setIsLoading(true);
-      const queryParams = new URLSearchParams(location.search)
+      const queryParams = new URLSearchParams(window.location.search)
      if (queryParams && queryParams.get("callback_port")){
        const callbackPort = queryParams.get("callback_port")

-        //attemptCliLogin
+        // attemptCliLogin
        const isCliLoginSuccessful = await attemptCliLoginMfa({
          email,
          password,
@@ -94,11 +94,11 @@ export default function MFAStep({
          // case: login was successful
          const cliUrl = `http://localhost:${callbackPort}`

-          //send request to server endpoint 
+          // send request to server endpoint 
          const instance = axios.create()
-          const cliResp = await instance.post(cliUrl,{...isCliLoginSuccessful.loginResponse,email})
+          await instance.post(cliUrl,{...isCliLoginSuccessful.loginResponse,email})

-          //cli page
+          // cli page
          router.push("/cli-redirect");
        }
      }else{
@@ -111,7 +111,7 @@ export default function MFAStep({
  
        if (isLoginSuccessful) {
          setIsLoading(false);
-          router.push(`/dashboard/${localStorage.getItem('projectData.id')}`);
+          router.push(`/dashboard/${localStorage.getItem("projectData.id")}`);
        }
      }
      
--- a/frontend/src/components/utilities/attemptCliLogin.ts
+++ b/frontend/src/components/utilities/attemptCliLogin.ts
@@ -1,15 +1,15 @@
 /* eslint-disable prefer-destructuring */
-import jsrp from 'jsrp';
+import jsrp from "jsrp";

-import login1 from '@app/pages/api/auth/Login1';
-import login2 from '@app/pages/api/auth/Login2';
-import getOrganizations from '@app/pages/api/organization/getOrgs';
-import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects';
-import KeyService from '@app/services/KeyService';
+import login1 from "@app/pages/api/auth/Login1";
+import login2 from "@app/pages/api/auth/Login2";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
+import getOrganizationUserProjects from "@app/pages/api/organization/GetOrgUserProjects";
+import KeyService from "@app/services/KeyService";

-import Telemetry from './telemetry/Telemetry';
-import { saveTokenToLocalStorage } from './saveTokenToLocalStorage';
-import SecurityClient from './SecurityClient';
+import Telemetry from "./telemetry/Telemetry";
+import { saveTokenToLocalStorage } from "./saveTokenToLocalStorage";
+import SecurityClient from "./SecurityClient";

 // eslint-disable-next-line new-cap
 const client = new jsrp.client();
@@ -101,7 +101,7 @@ const attemptLogin = async (
                        // case: MFA is not enabled

                        // unset provider auth token in case it was used
-                        SecurityClient.setProviderAuthToken('');
+                        SecurityClient.setProviderAuthToken("");
                        // set JWT token
                        SecurityClient.setToken(token);

@@ -117,11 +117,36 @@ const attemptLogin = async (
                            protectedKeyTag
                        });

+                        saveTokenToLocalStorage({
+                            publicKey,
+                            encryptedPrivateKey,
+                            iv,
+                            tag,
+                            privateKey
+                          });
+
+                        const userOrgs = await getOrganizations();
+                        const orgId = userOrgs[0]._id;
+                        localStorage.setItem("orgData.id", orgId);
+
+                        const orgUserProjects = await getOrganizationUserProjects({
+                            orgId
+                        });
+
+                        if (orgUserProjects.length > 0) {
+                            localStorage.setItem("projectData.id", orgUserProjects[0]._id);
+                        }
+
+                        if (email) {
+                            telemetry.identify(email, email);
+                            telemetry.capture("User Logged In");
+                        }
+
                        resolve({
                            mfaEnabled: false,
                            loginResponse: {
-                                email: email,
-                                privateKey: privateKey,
+                                email,
+                                privateKey,
                                JTWToken: token
                            },
                            success: true
--- a/frontend/src/components/utilities/attemptCliLoginMfa.ts
+++ b/frontend/src/components/utilities/attemptCliLoginMfa.ts
@@ -1,19 +1,19 @@
 /* eslint-disable prefer-destructuring */
-import jsrp from 'jsrp';
+import jsrp from "jsrp";

-import login1 from '@app/pages/api/auth/Login1';
-import verifyMfaToken from '@app/pages/api/auth/verifyMfaToken';
-import getOrganizations from '@app/pages/api/organization/getOrgs';
-import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects';
-import KeyService from '@app/services/KeyService';
+import login1 from "@app/pages/api/auth/Login1";
+import verifyMfaToken from "@app/pages/api/auth/verifyMfaToken";
+import getOrganizations from "@app/pages/api/organization/getOrgs";
+import getOrganizationUserProjects from "@app/pages/api/organization/GetOrgUserProjects";
+import KeyService from "@app/services/KeyService";

-import { saveTokenToLocalStorage } from './saveTokenToLocalStorage';
-import SecurityClient from './SecurityClient';
+import { saveTokenToLocalStorage } from "./saveTokenToLocalStorage";
+import SecurityClient from "./SecurityClient";

 // eslint-disable-next-line new-cap
 const client = new jsrp.client();

-interface isMfaLoginSuccessful {
+interface IsMfaLoginSuccessful {
    success: boolean;
    loginResponse:{ 
        privateKey: string;
@@ -39,7 +39,7 @@ const attemptLoginMfa = async ({
    password: string;
    providerAuthToken?: string,
    mfaToken: string;
-}): Promise<isMfaLoginSuccessful> => {
+}): Promise<IsMfaLoginSuccessful> => {
    return new Promise((resolve, reject) => {
        client.init({
            username: email,
@@ -69,9 +69,9 @@ const attemptLoginMfa = async ({
                });

                // unset temporary (MFA) JWT token and set JWT token
-                SecurityClient.setMfaToken('');
+                SecurityClient.setMfaToken("");
                SecurityClient.setToken(token);
-                SecurityClient.setProviderAuthToken('');
+                SecurityClient.setProviderAuthToken("");

                const privateKey = await KeyService.decryptPrivateKey({
                    encryptionVersion,
@@ -98,17 +98,17 @@ const attemptLoginMfa = async ({
                // and not initializing the login details
                const userOrgs = await getOrganizations();
                const orgId = userOrgs[0]._id;
-                localStorage.setItem('orgData.id', orgId);
+                localStorage.setItem("orgData.id", orgId);

                const orgUserProjects = await getOrganizationUserProjects({
                    orgId
                });
-                localStorage.setItem('projectData.id', orgUserProjects[0]._id);
+                localStorage.setItem("projectData.id", orgUserProjects[0]._id);

                resolve({
                    success: true,
                    loginResponse:{
-                        privateKey: privateKey,
+                        privateKey,
                        JTWToken: token
                    }
                });
--- a/frontend/src/hooks/api/users/queries.tsx
+++ b/frontend/src/hooks/api/users/queries.tsx
@@ -25,7 +25,7 @@ const userKeys = {
 };

 export const fetchUserDetails = async () => {
-  const { data } = await apiRequest.get<{ user: User }>('/api/v1/user');
+  const { data } = await apiRequest.get<{ user: User }>("/api/v1/user");

  return data.user;
 };
--- a/frontend/src/pages/cli-redirect.tsx
+++ b/frontend/src/pages/cli-redirect.tsx
@@ -1,6 +1,5 @@
-import Head from 'next/head';
-import Image from 'next/image';
-import Link from 'next/link';
+import Head from "next/head";
+import Image from "next/image";

 export default function CliRedirect() {
  return (
@@ -12,7 +11,7 @@ export default function CliRedirect() {
      <div className='flex flex-col items-center justify-center text-gray-200 h-screen w-screen'>
        <p className='text-4xl mt-32'>Head back to your terminal!</p>
        <p className='mt-2 mb-1 text-lg'>
-          You've successfully logged into infisical-cli
+          You&apos;ve successfully logged into infisical-cli
        </p>
        <Image
          src='/images/dragon-404.svg'
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@@ -1,18 +1,19 @@
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Head from 'next/head';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
 import axios from "axios"

 // import ListBox from '@app/components/basic/Listbox';
-import InitialLoginStep from '@app/components/login/InitialLoginStep';
-import MFAStep from '@app/components/login/MFAStep';
-import PasswordInputStep from '@app/components/login/PasswordInputStep';
-import { useProviderAuth } from '@app/hooks/useProviderAuth';
-import { getAuthToken, isLoggedIn } from '@app/reactQuery';
-import { fetchUserDetails } from '~/hooks/api/users/queries';
+import InitialLoginStep from "@app/components/login/InitialLoginStep";
+import MFAStep from "@app/components/login/MFAStep";
+import PasswordInputStep from "@app/components/login/PasswordInputStep";
+import { useProviderAuth } from "@app/hooks/useProviderAuth";
+import { getAuthToken, isLoggedIn } from "@app/reactQuery";
+
+import { fetchUserDetails } from "~/hooks/api/users/queries";

 import getWorkspaces from "./api/workspace/getWorkspaces";

@@ -22,7 +23,7 @@ export default function Login() {
  const [password, setPassword] = useState("");
  const [step, setStep] = useState(1);
  const { t } = useTranslation();
-  
+
  // const lang = router.locale ?? 'en';
  const {
    providerAuthToken,
@@ -48,18 +49,18 @@ export default function Login() {
        const userWorkspaces = await getWorkspaces();
        userWorkspace = userWorkspaces[0] && userWorkspaces[0]._id;

-        //user details
+        // user details
        const userDetails = await fetchUserDetails()
-        //send details back to client
-        
-        const queryParams = new URLSearchParams(location.search)
-        if(queryParams && queryParams.get("callback_port")){
-          const callback_port = queryParams.get("callback_port")
-        
-          //send post request to cli with details
-          const cliUrl = `http://localhost:${callback_port}`
+        // send details back to client
+
+        const queryParams = new URLSearchParams(window.location.search)
+        if (queryParams && queryParams.get("callback_port")) {
+          const callbackPort = queryParams.get("callback_port")
+
+          // send post request to cli with details
+          const cliUrl = `http://localhost:${callbackPort}`
          const instance = axios.create()
-          const cliResp = await instance.post(cliUrl,{email:userDetails.email,privateKey:localStorage.getItem("PRIVATE_KEY"),JTWToken:getAuthToken()})
+          await instance.post(cliUrl, { email: userDetails.email, privateKey: localStorage.getItem("PRIVATE_KEY"), JTWToken: getAuthToken() })
        }
        router.push(`/dashboard/${userWorkspace}`);
      } catch (error) {
@@ -86,7 +87,7 @@ export default function Login() {
    }

    if (loginStep === 1) {
-      return <InitialLoginStep 
+      return <InitialLoginStep
        setStep={setStep}
        email={email}
        setEmail={setEmail}