awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-08 14:28:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: frontend lint errors

Browse Source
This commit is contained in:
quinton11
2023-06-21 07:29:05 +00:00
parent 9b447a4ab0
commit 8a5e655122
7 changed files with 119 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/login/InitialLoginStep.tsx
+25 -25
View File
@@ -1,16 +1,16 @@
import { useState } from 'react'; import { useState } from "react";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import Link from 'next/link'; import Link from "next/link";
import { useRouter } from 'next/router'; import { useRouter } from "next/router";
import axios from "axios" import axios from "axios"
import attemptLogin from "@app/components/utilities/attemptLogin"; import attemptLogin from "@app/components/utilities/attemptLogin";
import Error from "../basic/Error"; import Error from "../basic/Error";
import attemptCliLogin from "../utilities/attemptCliLogin";
// import { faGoogle } from '@fortawesome/free-brands-svg-icons'; // import { faGoogle } from '@fortawesome/free-brands-svg-icons';
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Button, Input } from '../v2'; import { Button, Input } from "../v2";
import attemptCliLogin from '../utilities/attemptCliLogin';
export default function InitialLoginStep({ export default function InitialLoginStep({
setStep, setStep,
@@ -38,11 +38,11 @@ export default function InitialLoginStep({
} }
setIsLoading(true); setIsLoading(true);
const queryParams = new URLSearchParams(location.search) const queryParams = new URLSearchParams(window.location.search)
if (queryParams && queryParams.get("callback_port")) { if (queryParams && queryParams.get("callback_port")) {
const callbackPort = queryParams.get("callback_port") const callbackPort = queryParams.get("callback_port")
//attemptCliLogin // attemptCliLogin
const isCliLoginSuccessful = await attemptCliLogin({ const isCliLoginSuccessful = await attemptCliLogin({
email, email,
password, password,
@@ -59,15 +59,15 @@ export default function InitialLoginStep({
// case: login was successful // case: login was successful
const cliUrl = `http://localhost:${callbackPort}` const cliUrl = `http://localhost:${callbackPort}`
//send request to server endpoint // send request to server endpoint
const instance = axios.create() const instance = axios.create()
const cliResp = await instance.post(cliUrl,{...isCliLoginSuccessful.loginResponse}) const cliResp = await instance.post(cliUrl, { ...isCliLoginSuccessful.loginResponse })
console.log(cliResp) console.log(cliResp)
//cli page // cli page
router.push("/cli-redirect"); router.push("/cli-redirect");
//on success, router.push to cli Login Successful page // on success, router.push to cli Login Successful page
} }
} else { } else {
@@ -86,7 +86,7 @@ export default function InitialLoginStep({
} }
// case: login does not require MFA step // 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> </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="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"> <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
<Input <Input
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
type="password" type="password"
placeholder="Enter your password..." placeholder="Enter your password..."
isRequired isRequired
autoComplete="current-password" autoComplete="current-password"
id="current-password" id="current-password"
className="h-12 select:-webkit-autofill:focus" className="h-12 select:-webkit-autofill:focus"
/> />
</div> </div>
</div> </div>
{!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />} {!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'> <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
frontend/src/components/login/MFAStep.tsx
+13 -13
View File
@@ -1,13 +1,13 @@
/* eslint-disable react/jsx-props-no-spreading */ /* eslint-disable react/jsx-props-no-spreading */
import React, { useState } from 'react'; import React, { useState } from "react";
import ReactCodeInput from 'react-code-input'; import ReactCodeInput from "react-code-input";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import { useRouter } from 'next/router'; import { useRouter } from "next/router";
import axios from "axios" import axios from "axios"
import attemptLoginMfa from '@app/components/utilities/attemptLoginMfa'; import attemptCliLoginMfa from "@app/components/utilities/attemptCliLoginMfa"
import attemptCliLoginMfa from '@app/components/utilities/attemptCliLoginMfa' import attemptLoginMfa from "@app/components/utilities/attemptLoginMfa";
import { useSendMfaToken } from '@app/hooks/api/auth'; import { useSendMfaToken } from "@app/hooks/api/auth";
import Error from "../basic/Error"; import Error from "../basic/Error";
import { Button } from "../v2"; import { Button } from "../v2";
@@ -78,11 +78,11 @@ export default function MFAStep({
} }
setIsLoading(true); setIsLoading(true);
const queryParams = new URLSearchParams(location.search) const queryParams = new URLSearchParams(window.location.search)
if (queryParams && queryParams.get("callback_port")){ if (queryParams && queryParams.get("callback_port")){
const callbackPort = queryParams.get("callback_port") const callbackPort = queryParams.get("callback_port")
//attemptCliLogin // attemptCliLogin
const isCliLoginSuccessful = await attemptCliLoginMfa({ const isCliLoginSuccessful = await attemptCliLoginMfa({
email, email,
password, password,
@@ -94,11 +94,11 @@ export default function MFAStep({
// case: login was successful // case: login was successful
const cliUrl = `http://localhost:${callbackPort}` const cliUrl = `http://localhost:${callbackPort}`
//send request to server endpoint // send request to server endpoint
const instance = axios.create() 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"); router.push("/cli-redirect");
} }
}else{ }else{
@@ -111,7 +111,7 @@ export default function MFAStep({
if (isLoginSuccessful) { if (isLoginSuccessful) {
setIsLoading(false); setIsLoading(false);
router.push(`/dashboard/${localStorage.getItem('projectData.id')}`); router.push(`/dashboard/${localStorage.getItem("projectData.id")}`);
} }
} }
frontend/src/components/utilities/attemptCliLogin.ts
+37 -12
View File
@@ -1,15 +1,15 @@
/* eslint-disable prefer-destructuring */ /* eslint-disable prefer-destructuring */
import jsrp from 'jsrp'; import jsrp from "jsrp";
import login1 from '@app/pages/api/auth/Login1'; import login1 from "@app/pages/api/auth/Login1";
import login2 from '@app/pages/api/auth/Login2'; import login2 from "@app/pages/api/auth/Login2";
import getOrganizations from '@app/pages/api/organization/getOrgs'; import getOrganizations from "@app/pages/api/organization/getOrgs";
import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects'; import getOrganizationUserProjects from "@app/pages/api/organization/GetOrgUserProjects";
import KeyService from '@app/services/KeyService'; import KeyService from "@app/services/KeyService";
import Telemetry from './telemetry/Telemetry'; import Telemetry from "./telemetry/Telemetry";
import { saveTokenToLocalStorage } from './saveTokenToLocalStorage'; import { saveTokenToLocalStorage } from "./saveTokenToLocalStorage";
import SecurityClient from './SecurityClient'; import SecurityClient from "./SecurityClient";
// eslint-disable-next-line new-cap // eslint-disable-next-line new-cap
const client = new jsrp.client(); const client = new jsrp.client();
@@ -101,7 +101,7 @@ const attemptLogin = async (
// case: MFA is not enabled // case: MFA is not enabled
// unset provider auth token in case it was used // unset provider auth token in case it was used
SecurityClient.setProviderAuthToken(''); SecurityClient.setProviderAuthToken("");
// set JWT token // set JWT token
SecurityClient.setToken(token); SecurityClient.setToken(token);
@@ -117,11 +117,36 @@ const attemptLogin = async (
protectedKeyTag 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({ resolve({
mfaEnabled: false, mfaEnabled: false,
loginResponse: { loginResponse: {
email: email, email,
privateKey: privateKey, privateKey,
JTWToken: token JTWToken: token
}, },
success: true success: true
frontend/src/components/utilities/attemptCliLoginMfa.ts
+15 -15
View File
@@ -1,19 +1,19 @@
/* eslint-disable prefer-destructuring */ /* eslint-disable prefer-destructuring */
import jsrp from 'jsrp'; import jsrp from "jsrp";
import login1 from '@app/pages/api/auth/Login1'; import login1 from "@app/pages/api/auth/Login1";
import verifyMfaToken from '@app/pages/api/auth/verifyMfaToken'; import verifyMfaToken from "@app/pages/api/auth/verifyMfaToken";
import getOrganizations from '@app/pages/api/organization/getOrgs'; import getOrganizations from "@app/pages/api/organization/getOrgs";
import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects'; import getOrganizationUserProjects from "@app/pages/api/organization/GetOrgUserProjects";
import KeyService from '@app/services/KeyService'; import KeyService from "@app/services/KeyService";
import { saveTokenToLocalStorage } from './saveTokenToLocalStorage'; import { saveTokenToLocalStorage } from "./saveTokenToLocalStorage";
import SecurityClient from './SecurityClient'; import SecurityClient from "./SecurityClient";
// eslint-disable-next-line new-cap // eslint-disable-next-line new-cap
const client = new jsrp.client(); const client = new jsrp.client();
interface isMfaLoginSuccessful { interface IsMfaLoginSuccessful {
success: boolean; success: boolean;
loginResponse:{ loginResponse:{
privateKey: string; privateKey: string;
@@ -39,7 +39,7 @@ const attemptLoginMfa = async ({
password: string; password: string;
providerAuthToken?: string, providerAuthToken?: string,
mfaToken: string; mfaToken: string;
}): Promise<isMfaLoginSuccessful> => { }): Promise<IsMfaLoginSuccessful> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
client.init({ client.init({
username: email, username: email,
@@ -69,9 +69,9 @@ const attemptLoginMfa = async ({
}); });
// unset temporary (MFA) JWT token and set JWT token // unset temporary (MFA) JWT token and set JWT token
SecurityClient.setMfaToken(''); SecurityClient.setMfaToken("");
SecurityClient.setToken(token); SecurityClient.setToken(token);
SecurityClient.setProviderAuthToken(''); SecurityClient.setProviderAuthToken("");
const privateKey = await KeyService.decryptPrivateKey({ const privateKey = await KeyService.decryptPrivateKey({
encryptionVersion, encryptionVersion,
@@ -98,17 +98,17 @@ const attemptLoginMfa = async ({
// and not initializing the login details // and not initializing the login details
const userOrgs = await getOrganizations(); const userOrgs = await getOrganizations();
const orgId = userOrgs[0]._id; const orgId = userOrgs[0]._id;
localStorage.setItem('orgData.id', orgId); localStorage.setItem("orgData.id", orgId);
const orgUserProjects = await getOrganizationUserProjects({ const orgUserProjects = await getOrganizationUserProjects({
orgId orgId
}); });
localStorage.setItem('projectData.id', orgUserProjects[0]._id); localStorage.setItem("projectData.id", orgUserProjects[0]._id);
resolve({ resolve({
success: true, success: true,
loginResponse:{ loginResponse:{
privateKey: privateKey, privateKey,
JTWToken: token JTWToken: token
} }
}); });
frontend/src/hooks/api/users/queries.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ const userKeys = {
}; };
export const fetchUserDetails = async () => { 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; return data.user;
}; };
frontend/src/pages/cli-redirect.tsx
+3 -4
View File
@@ -1,6 +1,5 @@
import Head from 'next/head'; import Head from "next/head";
import Image from 'next/image'; import Image from "next/image";
import Link from 'next/link';
export default function CliRedirect() { export default function CliRedirect() {
return ( 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'> <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='text-4xl mt-32'>Head back to your terminal!</p>
<p className='mt-2 mb-1 text-lg'> <p className='mt-2 mb-1 text-lg'>
You've successfully logged into infisical-cli You&apos;ve successfully logged into infisical-cli
</p> </p>
<Image <Image
src='/images/dragon-404.svg' src='/images/dragon-404.svg'
frontend/src/pages/login.tsx
+21 -20
View File
@@ -1,18 +1,19 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { useTranslation } from 'react-i18next'; import { useTranslation } from "react-i18next";
import Head from 'next/head'; import Head from "next/head";
import Image from 'next/image'; import Image from "next/image";
import Link from 'next/link'; import Link from "next/link";
import { useRouter } from 'next/router'; import { useRouter } from "next/router";
import axios from "axios" import axios from "axios"
// import ListBox from '@app/components/basic/Listbox'; // import ListBox from '@app/components/basic/Listbox';
import InitialLoginStep from '@app/components/login/InitialLoginStep'; import InitialLoginStep from "@app/components/login/InitialLoginStep";
import MFAStep from '@app/components/login/MFAStep'; import MFAStep from "@app/components/login/MFAStep";
import PasswordInputStep from '@app/components/login/PasswordInputStep'; import PasswordInputStep from "@app/components/login/PasswordInputStep";
import { useProviderAuth } from '@app/hooks/useProviderAuth'; import { useProviderAuth } from "@app/hooks/useProviderAuth";
import { getAuthToken, isLoggedIn } from '@app/reactQuery'; import { getAuthToken, isLoggedIn } from "@app/reactQuery";
import { fetchUserDetails } from '~/hooks/api/users/queries';
import { fetchUserDetails } from "~/hooks/api/users/queries";
import getWorkspaces from "./api/workspace/getWorkspaces"; import getWorkspaces from "./api/workspace/getWorkspaces";
@@ -48,18 +49,18 @@ export default function Login() {
const userWorkspaces = await getWorkspaces(); const userWorkspaces = await getWorkspaces();
userWorkspace = userWorkspaces[0] && userWorkspaces[0]._id; userWorkspace = userWorkspaces[0] && userWorkspaces[0]._id;
//user details // user details
const userDetails = await fetchUserDetails() const userDetails = await fetchUserDetails()
//send details back to client // send details back to client
const queryParams = new URLSearchParams(location.search) const queryParams = new URLSearchParams(window.location.search)
if(queryParams && queryParams.get("callback_port")){ if (queryParams && queryParams.get("callback_port")) {
const callback_port = queryParams.get("callback_port") const callbackPort = queryParams.get("callback_port")
//send post request to cli with details // send post request to cli with details
const cliUrl = `http://localhost:${callback_port}` const cliUrl = `http://localhost:${callbackPort}`
const instance = axios.create() 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}`); router.push(`/dashboard/${userWorkspace}`);
} catch (error) { } catch (error) {