From 84efc3de46ec54ffb6a09a5cb3ed50ffb6760ebd Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Thu, 3 Aug 2023 13:30:22 -0400
Subject: [PATCH] pushed out soem changes

---
 .../components/signup/InitialSignupStep.tsx   | 13 +--
 frontend/src/components/v2/Input/Input.tsx    |  1 -
 .../SecretInputRow/SecretInputRow.tsx         |  1 -
 .../components/InitialStep/InitialStep.tsx    | 92 +++++++++----------
 .../UserInfoSSOStep/UserInfoSSOStep.tsx       |  9 +-
 5 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/signup/InitialSignupStep.tsx b/frontend/src/components/signup/InitialSignupStep.tsx
index 01ede6411..0a1248b2d 100644
--- a/frontend/src/components/signup/InitialSignupStep.tsx
+++ b/frontend/src/components/signup/InitialSignupStep.tsx
@@ -3,6 +3,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { faGithub,faGoogle } from "@fortawesome/free-brands-svg-icons";
 import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
+import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { Button } from "../v2";
@@ -26,7 +27,7 @@ export default function InitialSignupStep({
                     window.close();
                 }}
                 leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-                className="h-14 w-full mx-0"
+                className="h-12 w-full mx-0"
             >
                 {t("signup.continue-with-google")}
             </Button>
@@ -40,7 +41,7 @@ export default function InitialSignupStep({
                     window.close();
                 }}
                 leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
-                className="h-14 w-full mx-0"
+                className="h-12 w-full mx-0"
             >
                 Continue with GitHub
             </Button>
@@ -53,7 +54,7 @@ export default function InitialSignupStep({
                     setIsSignupWithEmail(true);
                 }}
                 leftIcon={<FontAwesomeIcon icon={faEnvelope} className="mr-2" />}
-                className="h-14 w-full mx-0"
+                className="h-12 w-full mx-0"
             >
                 Continue with Email
             </Button>
@@ -63,10 +64,10 @@ export default function InitialSignupStep({
                 colorSchema="primary" 
                 variant="outline_bg"
                 onClick={() => router.push("/saml-sso")} 
-                isFullWidth
-                className="h-14 w-full mx-0"
+                leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
+                className="h-12 w-full mx-0"
             > 
-                Continue with SAML SSO
+                Continue with SSO
             </Button>
         </div>
         <div className='lg:w-1/6 w-1/4 min-w-[20rem] px-8 text-center mt-6 text-xs text-bunker-400'>
diff --git a/frontend/src/components/v2/Input/Input.tsx b/frontend/src/components/v2/Input/Input.tsx
index 17573e527..7ec540232 100644
--- a/frontend/src/components/v2/Input/Input.tsx
+++ b/frontend/src/components/v2/Input/Input.tsx
@@ -87,7 +87,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     ref
   ): JSX.Element => {
     const handleInput = (event: ChangeEvent<HTMLInputElement>) => {
-      console.log(123, props, autoCapitalization)
       if (autoCapitalization) {
         // eslint-disable-next-line no-param-reassign
         event.target.value = event.target.value.toUpperCase();
diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
index a2f95e4a4..aba283b27 100644
--- a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
+++ b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
@@ -281,7 +281,6 @@ export const SecretInputRow = memo(
                     value={editorRef}
                     isVisible={!isSecretValueHidden}
                     onChange={(val, html) => {
-                      console.log(val);
                       onChange(val);
                       setEditorRef(html);
                     }}
diff --git a/frontend/src/views/Login/components/InitialStep/InitialStep.tsx b/frontend/src/views/Login/components/InitialStep/InitialStep.tsx
index c814cd510..2bee45669 100644
--- a/frontend/src/views/Login/components/InitialStep/InitialStep.tsx
+++ b/frontend/src/views/Login/components/InitialStep/InitialStep.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { faGithub,faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import axios from "axios"
 
@@ -116,47 +117,6 @@ export const InitialStep = ({
     return (
         <form onSubmit={handleLogin} className='flex flex-col mx-auto w-full justify-center items-center'>
             <h1 className='text-xl font-medium text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 text-center mb-8' >Login to Infisical</h1>
-            <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center my-4 py-2'>
-                <div className='w-full border-t border-mineshaft-500' />
-            </div>
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md'>
-                <Input
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    type="email"
-                    placeholder="Enter your email..."
-                    isRequired
-                    autoComplete="username"
-                    className="h-12"
-                />
-            </div>
-            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
-                <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='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
-                <Button
-                    type="submit"
-                    size="sm"
-                    isFullWidth
-                    className='h-12'
-                    colorSchema="primary"
-                    variant="solid"
-                    isLoading={isLoading}
-                > Continue with Email </Button>
-            </div>
-            {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
-            <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center mt-4 py-2'>
-                <div className='w-full border-t border-mineshaft-500' />
-            </div>
             <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
                 <Button
                     colorSchema="primary" 
@@ -168,7 +128,7 @@ export const InitialStep = ({
                         window.close();
                     }} 
                     leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-                    className="h-12 w-full mx-0"
+                    className="h-11 w-full mx-0"
                 > 
                     {t("login.continue-with-google")}
                 </Button>
@@ -185,7 +145,7 @@ export const InitialStep = ({
                         window.close();
                     }} 
                     leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
-                    className="h-12 w-full mx-0"
+                    className="h-11 w-full mx-0"
                 > 
                     Continue with GitHub
                 </Button>
@@ -197,12 +157,52 @@ export const InitialStep = ({
                     onClick={() => {
                         setStep(2);
                     }}
-                    isFullWidth
-                    className="h-12 w-full mx-0"
+                    leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
+                    className="h-11 w-full mx-0"
                 >
-                    Continue with SAML SSO
+                    Continue with SSO
                 </Button>
             </div>
+            <div className='lg:w-1/6 w-1/4 min-w-[20rem] flex flex-row items-center my-4 py-2'>
+                <div className='w-full border-t border-mineshaft-400/60' /> 
+                <span className="mx-2 text-mineshaft-200 text-xs">or</span>
+                <div className='w-full border-t border-mineshaft-400/60' />
+            </div>
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md'>
+                <Input
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    type="email"
+                    placeholder="Enter your email..."
+                    isRequired
+                    autoComplete="username"
+                    className="h-11"
+                />
+            </div>
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-4'>
+                <Input
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    type="password"
+                    placeholder="Enter your password..."
+                    isRequired
+                    autoComplete="current-password"
+                    id="current-password"
+                    className="h-11 select:-webkit-autofill:focus"
+                />
+            </div>
+            <div className='lg:w-1/6 w-1/4 min-w-[21.2rem] md:min-w-[20.1rem] text-center rounded-md mt-5'>
+                <Button
+                    type="submit"
+                    size="sm"
+                    isFullWidth
+                    className='h-11'
+                    colorSchema="primary"
+                    variant="solid"
+                    isLoading={isLoading}
+                > Continue with Email </Button>
+            </div>
+            {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
             {
                 !serverDetails?.inviteOnlySignup ?
                 <div className="mt-6 text-bunker-400 text-sm flex flex-row">
diff --git a/frontend/src/views/Signup/components/UserInfoSSOStep/UserInfoSSOStep.tsx b/frontend/src/views/Signup/components/UserInfoSSOStep/UserInfoSSOStep.tsx
index fed039467..032552958 100644
--- a/frontend/src/views/Signup/components/UserInfoSSOStep/UserInfoSSOStep.tsx
+++ b/frontend/src/views/Signup/components/UserInfoSSOStep/UserInfoSSOStep.tsx
@@ -3,7 +3,7 @@ import crypto from "crypto";
 
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faInfoCircle, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import jsrp from "jsrp";
 import nacl from "tweetnacl";
@@ -198,7 +198,7 @@ export const UserInfoSSOStep = ({
               localStorage.setItem("orgData.id", orgId);
               localStorage.setItem("projectData.id", project._id);
 
-                setStep(1);
+              setStep(1);
             } catch (error) {
               setIsLoading(false);
               console.error(error);
@@ -256,7 +256,7 @@ export const UserInfoSSOStep = ({
         )}
         <div className="mt-2 flex lg:w-1/6 w-1/4 min-w-[20rem] max-h-60 w-full flex-col items-center justify-center rounded-lg py-2">
           <InputField
-            label={t("section.password.password")}
+            label="Infisical Password"
             onChangeHandler={(pass: string) => {
               setPassword(pass);
               checkPassword({
@@ -272,6 +272,7 @@ export const UserInfoSSOStep = ({
             autoComplete="new-password"
             id="new-password"
           />
+          <div className="mt-2 w-min min-w-[20rem] max-h-60 flex-col items-center justify-center rounded-md px-1.5 bg-mineshaft-500 text-mineshaft-300 text-xs p-1.5"><FontAwesomeIcon icon={faInfoCircle} className="mr-1.5" />Infisical Password is used as part of the encryption mechanism so that even the authentication provider is not able to access your secrets.</div>
           {Object.keys(errors).length > 0 && (
             <div className="mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-2 py-2">
               <div className="mb-2 text-sm text-gray-400">{t("section.password.validate-base")}</div> 
@@ -307,7 +308,7 @@ export const UserInfoSSOStep = ({
               onClick={signupErrorCheck}
               size="sm"
               isFullWidth
-              className='h-14'
+              className='h-12'
               colorSchema="primary"
               variant="outline_bg"
               isLoading={isLoading}