More style changes to login

2026-09-22 13:39:35 +00:00 · 2023-05-09 23:24:37 -07:00
parent 4e7145dfe5
commit 1fce8cc769
6 changed files with 141 additions and 144 deletions
--- a/frontend/src/components/basic/InputField.tsx
+++ b/frontend/src/components/basic/InputField.tsx
@@ -61,22 +61,6 @@ const InputField = ({
    <div className="flex-col w-full">
      <div className="flex flex-row text-mineshaft-300 items-center mb-0.5">
        <p className="text-sm font-semibold mr-1">{label}</p>
-        {/* {label === "Password" && router.asPath !== "/login" && (
-						<div className="mb-0.5 relative inline-block text-gray-400 underline hover:text-primary duration-200">
-							<FontAwesomeIcon
-								icon={faCircleExclamation}
-								className={`text-sm peer ${
-									error && "text-red"
-								}`}
-							/>
-							<span className="absolute hidden peer-hover:block duration-200 w-60 -left-28 -top-2 -translate-y-full px-2 py-2 bg-gray-700 rounded-md text-center text-gray-200 text-sm after:content-[''] after:absolute after:left-1/2 after:top-[100%] after:-translate-x-1/2 after:border-8 after:border-x-transparent after:border-b-transparent after:border-t-gray-700">
-								The password should contain at least 8
-								characters including at least 1 lowercase
-								character, uppercase character, number, and a
-								special character.
-							</span>
-						</div>
-					)} */}
      </div>
      <div
        className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
@@ -95,7 +79,7 @@ const InputField = ({
              : ''
          } ${
            error ? 'focus:ring-red/50' : 'focus:ring-primary/50'
-          } relative peer bg-bunker-800 rounded-md text-gray-400 text-md p-2 w-full min-w-16 outline-none focus:ring-4 duration-200`}
+          } relative peer bg-mineshaft-900 rounded-md text-gray-400 text-md p-2 w-full min-w-16 outline-none focus:ring-4 duration-200`}
          name={name}
          spellCheck="false"
          autoComplete={autoComplete}
--- a/frontend/src/components/signup/DonwloadBackupPDFStep.tsx
+++ b/frontend/src/components/signup/DonwloadBackupPDFStep.tsx
@@ -2,8 +2,8 @@ import { useTranslation } from 'next-i18next';
 import { faWarning } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

-import Button from '../basic/buttons/Button';
 import issueBackupKey from '../utilities/cryptography/issueBackupKey';
+import { Button } from '../v2';

 interface DownloadBackupPDFStepProps {
  incrementStep: () => void;
@@ -30,33 +30,37 @@ export default function DonwloadBackupPDFStep({
  const { t } = useTranslation();

  return (
-    <div className="bg-bunker flex flex-col items-center w-full max-w-xs md:max-w-lg h-7/12 py-8 px-4 md:px-6 mx-auto mb-36 md:mb-16 rounded-xl drop-shadow-xl">
-      <p className="text-4xl text-center font-semibold flex justify-center text-primary">
+    <div className="flex flex-col items-center w-full h-full px-4 md:px-6 mx-auto mb-36 md:mb-16">
+      <p className="text-xl text-center font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
        {t('signup:step4-message')}
      </p>
-      <div className="flex flex-col items-center justify-center w-full mt-4 md:mt-8 max-w-md text-gray-400 text-md rounded-md px-2">
-        <div>{t('signup:step4-description1')}</div>
-        <div className="mt-3">{t('signup:step4-description2')}</div>
-      </div>
-      <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-400 rounded-md max-w-xs md:max-w-md mx-auto mt-4">
-        <FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-4xl" />
-        {t('signup:step4-description3')}
-      </div>
-      <div className="flex flex-col items-center justify-center md:px-4 md:py-5 mt-4 px-2 py-3 max-h-24 max-w-max mx-auto text-lg">
-        <Button
-          text="Download PDF"
-          onButtonPressed={async () => {
-            await issueBackupKey({
-              email,
-              password,
-              personalName: name,
-              setBackupKeyError: () => { },
-              setBackupKeyIssued: () => { }
-            });
-            incrementStep();
-          }}
-          size="lg"
-        />
+      <div className="flex flex-col pb-2 bg-mineshaft-900 border border-mineshaft-700 items-center justify-center text-center lg:w-1/6 w-1/4 min-w-[27rem] mt-4 md:mt-8 max-w-md text-bunker-300 text-md rounded-md">
+        <div className="w-full px-3 pt-1 mt-8 flex flex-row text-center items-center m-2 text-bunker-300 rounded-md lg:w-1/6 w-1/4 min-w-[26rem] mx-auto">
+          <FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-5xl my-2" />
+          <span className='mb-2'>{t('signup:step4-description1')} {t('signup:step4-description3')}</span>
+          {/* {t('signup:step4-description2')} */}
+        </div>
+        <div className="flex flex-col items-center justify-center mt-4 mb-4 lg:w-1/6 w-1/4 min-w-[20rem] mt-2 md:max-w-md mx-auto text-sm text-center md:text-left">
+          <div className="text-l py-1 text-lg w-full">
+            <Button
+              onClick={async () => {
+                await issueBackupKey({
+                  email,
+                  password,
+                  personalName: name,
+                  setBackupKeyError: () => { },
+                  setBackupKeyIssued: () => { }
+                });
+                incrementStep();
+              }}
+              size="sm"
+              isFullWidth
+              className='h-12'
+              colorSchema="primary" 
+              variant="outline_bg"
+            > Download PDF </Button>
+          </div>
+        </div>
      </div>
    </div>
  );
--- a/frontend/src/components/signup/EnterEmailStep.tsx
+++ b/frontend/src/components/signup/EnterEmailStep.tsx
@@ -61,8 +61,6 @@ export default function EnterEmailStep({
            onChange={(e) => setEmail(e.target.value)}
            value={email}
            isRequired
-            // error={emailError}
-            // errorText={emailErrorMessage}
            autoComplete="username"
            className="h-12"
          />
--- a/frontend/src/components/signup/TeamInviteStep.tsx
+++ b/frontend/src/components/signup/TeamInviteStep.tsx
@@ -39,50 +39,52 @@ export default function TeamInviteStep(): JSX.Element {
  };

  return (
-    <div className="bg-bunker w-max mx-auto h-7/12 pt-6 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-32">
-      <p className="text-4xl font-semibold flex justify-center text-primary">
+    <div className="w-max mx-auto min-w-lg h-full pb-4 px-8 mb-64 md:mb-32">
+      <p className="text-2xl font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
        {t('signup:step5-invite-team')}
      </p>
-      <p className="text-center flex justify-center text-bunker-300 max-w-xs md:max-w-sm md:mx-8 mb-6 mt-4">
+      <p className="text-center flex justify-center text-bunker-400 md:mx-8 mb-6 mt-4">
        {t('signup:step5-subtitle')}
      </p>
-      <div>
-        <div className="overflow-auto bg-bunker-800">
-          <div className="whitespace-pre-wrap break-words bg-transparent" />
+      <div className="bg-mineshaft-800 border border-mineshaft-600 w-max mx-auto pt-6 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-32">
+        <div>
+          <div className="text-bunker-300 font-medium pl-1 pb-1 text-sm">
+            <span>Emails</span>
+          </div>
+          <textarea
+            className="bg-mineshaft-900 min-w-[30rem] h-20 w-full placeholder:text-bunker-400 py-1 px-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+            value={emails}
+            onChange={(e) => setEmails(e.target.value)}
+            placeholder="email@example.com, email2@example.com..."
+          />
        </div>
-        <textarea
-          className="bg-bunker-800 h-20 w-full placeholder:text-bunker-400 py-1 px-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
-          value={emails}
-          onChange={(e) => setEmails(e.target.value)}
-          placeholder="email@example.com, email2@example.com..."
+        <div className="flex flex-row max-w-max min-w-28 items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
+          <div
+            onKeyDown={() => null}
+            role="button"
+            tabIndex={0}
+            className="text-md md:text-sm mx-3 text-bunker-300 bg-mineshaft-700 py-3 md:py-3.5 px-5 rounded-md cursor-pointer hover:bg-mineshaft-500 duration-200"
+            onClick={redirectToHome}
+          >
+            {t('signup:step5-skip')}
+          </div>
+          <Button
+            text={t('signup:step5-send-invites') ?? ''}
+            onButtonPressed={() => {
+              if(serverDetails?.emailConfigured){
+                inviteUsers({ emails })
+              }else{
+                handlePopUpOpen('setUpEmail');
+              }
+            }}
+            size="lg"
+          />
+        </div>
+        <EmailServiceSetupModal
+          isOpen={popUp.setUpEmail?.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
        />
      </div>
-      <div className="flex flex-row max-w-max min-w-28 items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
-        <div
-          onKeyDown={() => null}
-          role="button"
-          tabIndex={0}
-          className="text-md md:text-sm mx-3 text-bunker-300 bg-mineshaft-700 py-3 md:py-3.5 px-5 rounded-md cursor-pointer hover:bg-mineshaft-500 duration-200"
-          onClick={redirectToHome}
-        >
-          {t('signup:step5-skip')}
-        </div>
-        <Button
-          text={t('signup:step5-send-invites') ?? ''}
-          onButtonPressed={() => {
-            if(serverDetails?.emailConfigured){
-              inviteUsers({ emails })
-            }else{
-              handlePopUpOpen('setUpEmail');
-            }
-          }}
-          size="lg"
-        />
-      </div>
-      <EmailServiceSetupModal
-        isOpen={popUp.setUpEmail?.isOpen}
-        onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
-      />
    </div>
  );
 }
--- a/frontend/src/components/signup/UserInfoStep.tsx
+++ b/frontend/src/components/signup/UserInfoStep.tsx
@@ -2,7 +2,7 @@ import crypto from 'crypto';

 import React, { useState } from 'react';
 import { useTranslation } from 'next-i18next';
-import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
+import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import jsrp from 'jsrp';
 import nacl from 'tweetnacl';
@@ -19,6 +19,7 @@ import Aes256Gcm from '../utilities/cryptography/aes-256-gcm';
 import { deriveArgonKey } from '../utilities/cryptography/crypto';
 import { saveTokenToLocalStorage } from '../utilities/saveTokenToLocalStorage';
 import SecurityClient from '../utilities/SecurityClient';
+import { Input } from '../v2';

 // eslint-disable-next-line new-cap
 const client = new jsrp.client();
@@ -28,10 +29,12 @@ interface UserInfoStepProps {
  email: string;
  password: string;
  setPassword: (value: string) => void;
-  firstName: string;
-  setFirstName: (value: string) => void;
-  lastName: string;
-  setLastName: (value: string) => void;
+  name: string;
+  setName: (value: string) => void;
+  organizationName: string;
+  setOrganizationName: (value: string) => void;
+  attributionSource: string;
+  setAttributionSource: (value: string) => void;
  providerAuthToken?: string;
 }

@@ -53,14 +56,16 @@ export default function UserInfoStep({
  email,
  password,
  setPassword,
-  firstName,
-  setFirstName,
-  lastName,
-  setLastName,
+  name,
+  setName,
+  organizationName,
+  setOrganizationName,
+  attributionSource, 
+  setAttributionSource,
  providerAuthToken,
 }: UserInfoStepProps): JSX.Element {
-  const [firstNameError, setFirstNameError] = useState(false);
-  const [lastNameError, setLastNameError] = useState(false);
+  const [nameError, setNameError] = useState(false);
+  const [organizationNameError, setOrganizationNameError] = useState(false);
  const [passwordErrorLength, setPasswordErrorLength] = useState(false);
  const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
  const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false);
@@ -73,17 +78,17 @@ export default function UserInfoStep({
  const signupErrorCheck = async () => {
    setIsLoading(true);
    let errorCheck = false;
-    if (!firstName) {
-      setFirstNameError(true);
+    if (!name) {
+      setNameError(true);
      errorCheck = true;
    } else {
-      setFirstNameError(false);
+      setNameError(false);
    }
-    if (!lastName) {
-      setLastNameError(true);
+    if (!organizationName) {
+      setOrganizationNameError(true);
      errorCheck = true;
    } else {
-      setLastNameError(false);
+      setOrganizationNameError(false);
    }
    errorCheck = passwordCheck({
      password,
@@ -149,8 +154,8 @@ export default function UserInfoStep({

              const response = await completeAccountInformationSignup({
                email,
-                firstName,
-                lastName,
+                firstName: name.split(" ")[0],
+                lastName: name.split(" ")[1],
                protectedKey,
                protectedKeyIV,
                protectedKeyTag,
@@ -161,7 +166,7 @@ export default function UserInfoStep({
                providerAuthToken,
                salt: result.salt,
                verifier: result.verifier,
-                organizationName: `${firstName}'s organization`,
+                organizationName,
              });

              // unset signup JWT token and set JWT token
@@ -202,43 +207,44 @@ export default function UserInfoStep({
  };

  return (
-    <div className="bg-bunker w-max mx-auto h-7/12 py-10 px-8 rounded-xl drop-shadow-xl mb-36 md:mb-16">
-      <p className="text-4xl font-bold flex justify-center mb-6 mx-8 md:mx-16 text-primary">
-        {t('signup:step3-message')}
+    <div className="w-max mx-auto h-full px-8 mb-36 md:mb-16">
+      <p className="text-xl font-medium flex justify-center mb-6 mx-8 md:mx-16 text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
+        Tell us a bit about yourself
      </p>
-      <div className="relative z-0 flex items-center justify-end w-full md:p-2 rounded-lg max-h-24">
-        <InputField
-          label={t('common:first-name')}
-          onChangeHandler={setFirstName}
-          type="name"
-          value={firstName}
+      <div className="relative z-0 flex flex-col items-center justify-end w-full md:p-2 rounded-lg max-h-24">
+        <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Your Name</p>
+        <Input
+          placeholder="Jane Doe"
+          onChange={(e) => setName(e.target.value)}
+          value={name}
          isRequired
-          errorText={
-            t('common:validate-required', {
-              name: t('common:first-name')
-            }) as string
-          }
-          error={firstNameError}
          autoComplete="given-name"
+          className="h-12"
        />
+        {nameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your name</p>}
      </div>
-      <div className="mt-2 flex items-center justify-center w-full md:p-2 rounded-lg max-h-24">
-        <InputField
-          label={t('common:last-name')}
-          onChangeHandler={setLastName}
-          type="name"
-          value={lastName}
+      <div className="relative z-0 flex flex-col items-center justify-end w-full md:p-2 rounded-lg max-h-24">
+        <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Organization Name</p>
+        <Input
+          placeholder="Infisical"
+          onChange={(e) => setOrganizationName(e.target.value)}
+          value={organizationName}
          isRequired
-          errorText={
-            t('common:validate-required', {
-              name: t('common:last-name')
-            }) as string
-          }
-          error={lastNameError}
-          autoComplete="family-name"
+          className="h-12"
+        />
+        {organizationNameError && <p className='text-left w-full text-xs text-red-600 mt-1 ml-1'>Please, specify your organization name</p>}
+      </div>
+      <div className="relative z-0 flex flex-col items-center justify-end w-full md:p-2 rounded-lg max-h-24">
+        <p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Where did you hear about us? <span className="font-light">(optional)</span></p>
+        <Input
+          placeholder=""
+          onChange={(e) => setAttributionSource(e.target.value)}
+          value={attributionSource}
+          isRequired
+          className="h-12"
        />
      </div>
-      <div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
+      <div className="flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
        <InputField
          label={t('section-password:password')}
          onChangeHandler={(pass: string) => {
@@ -263,7 +269,7 @@ export default function UserInfoStep({
            <div className="text-gray-400 text-sm mb-1">{t('section-password:validate-base')}</div>
            <div className="flex flex-row justify-start items-center ml-1">
              {passwordErrorLength ? (
-                <FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
+                <FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" />
              ) : (
                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
              )}
@@ -273,7 +279,7 @@ export default function UserInfoStep({
            </div>
            <div className="flex flex-row justify-start items-center ml-1">
              {passwordErrorLowerCase ? (
-                <FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
+                <FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" />
              ) : (
                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
              )}
@@ -285,7 +291,7 @@ export default function UserInfoStep({
            </div>
            <div className="flex flex-row justify-start items-center ml-1">
              {passwordErrorNumber ? (
-                <FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
+                <FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" />
              ) : (
                <FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
              )}
--- a/frontend/src/pages/signup.tsx
+++ b/frontend/src/pages/signup.tsx
@@ -25,11 +25,12 @@ import getWorkspaces from './api/workspace/getWorkspaces';
 export default function SignUp() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
-  const [firstName, setFirstName] = useState('');
-  const [lastName, setLastName] = useState('');
+  const [name, setName] = useState('');
+  const [organizationName, setOrganizationName] = useState('');
+  const [attributionSource, setAttributionSource] = useState('');
  const [code, setCode] = useState('123456');
  const [codeError, setCodeError] = useState(false);
-  const [step, setStep] = useState(1);
+  const [step, setStep] = useState(5);
  const router = useRouter();
  const { data: serverDetails } = useFetchServerStatus();
  const [isSignupWithEmail, setIsSignupWithEmail] = useState(false);
@@ -124,10 +125,12 @@ export default function SignUp() {
          email={email || providerEmail}
          password={password}
          setPassword={setPassword}
-          firstName={firstName}
-          setFirstName={setFirstName}
-          lastName={lastName}
-          setLastName={setLastName}
+          name={name}
+          setName={setName}
+          organizationName={organizationName}
+          setOrganizationName={setOrganizationName}
+          attributionSource={attributionSource}
+          setAttributionSource={setAttributionSource}
          providerAuthToken={providerAuthToken}
        />
      )
@@ -139,14 +142,14 @@ export default function SignUp() {
          incrementStep={incrementStep}
          email={email || providerEmail}
          password={password}
-          name={`${firstName} ${lastName}`}
+          name={name}
        />
      )
    }

-    if (serverDetails?.emailConfigured) {
+    // if (serverDetails?.emailConfigured) {
      return <TeamInviteStep />
-    }
+    // }

    return ""
  }