feat: change copy /signup route (#8783)

* feat: change copy /signup route

* feat: remove firstName from payload

frontend/src/pages/SignUp/SignUp.styles.scss

@@ -59,7 +59,7 @@
 	}
 
 	.signup-page-content {
-		width: 720px;
+		width: 540px;
 
 		display: flex;
 		flex-direction: column;
@@ -102,7 +102,7 @@
 			flex-direction: column;
 
 			.ant-input {
-				width: 60%;
+				width: 100%;
 			}
 		}
 

frontend/src/pages/SignUp/SignUp.tsx

@@ -10,7 +10,6 @@ import afterLogin from 'AppRoutes/utils';
 import ROUTES from 'constants/routes';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
-import { ArrowRight } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
@@ -23,7 +22,6 @@ import { FormContainer, Label } from './styles';
 import { isPasswordNotValidMessage, isPasswordValid } from './utils';
 
 type FormValues = {
-	firstName: string;
 	email: string;
 	organizationName: string;
 	password: string;
@@ -114,10 +112,9 @@ function SignUp(): JSX.Element {
 
 	const signUp = async (values: FormValues): Promise<void> => {
 		try {
-			const { organizationName, password, firstName, email } = values;
+			const { organizationName, password, email } = values;
 			const response = await signUpApi({
 				email,
-				name: firstName,
 				orgDisplayName: organizationName,
 				password,
 				token: params.get('token') || undefined,
@@ -142,11 +139,10 @@ function SignUp(): JSX.Element {
 
 	const acceptInvite = async (values: FormValues): Promise<void> => {
 		try {
-			const { password, email, firstName } = values;
+			const { password, email } = values;
 			await accept({
 				password,
 				token: params.get('token') || '',
-				displayName: firstName,
 			});
 			const loginResponse = await loginApi({
 				email,
@@ -208,7 +204,6 @@ function SignUp(): JSX.Element {
 				if (!isPasswordValid(values.password)) {
 					logEvent('Account Creation Page - Invalid Password', {
 						email: values.email,
-						name: values.firstName,
 					});
 					setIsPasswordPolicyError(true);
 					setLoading(false);
@@ -219,7 +214,6 @@ function SignUp(): JSX.Element {
 					await signUp(values);
 					logEvent('Account Created Successfully', {
 						email: values.email,
-						name: values.firstName,
 					});
 				} else {
 					await acceptInvite(values);
@@ -235,11 +229,6 @@ function SignUp(): JSX.Element {
 		})();
 	};
 
-	const getIsNameVisible = (): boolean =>
-		!(form.getFieldValue('firstName') === 0 && !isSignUp);
-
-	const isNameVisible = getIsNameVisible();
-
 	const handleValuesChange: (changedValues: Partial<FormValues>) => void = (
 		changedValues,
 	) => {
@@ -260,7 +249,6 @@ function SignUp(): JSX.Element {
 			loading ||
 			!values.email ||
 			(!precheck.sso && (!values.password || !values.confirmPassword)) ||
-			(!isDetailsDisable && !values.firstName) ||
 			confirmPasswordError ||
 			isPasswordPolicyError
 		);
@@ -288,8 +276,8 @@ function SignUp(): JSX.Element {
 				>
 					<div className="signup-form-header">
 						<Typography.Paragraph className="signup-form-header-text">
-							Create your account to monitor, trace, and troubleshoot your applications
+							You&apos;re almost in. Create a password to start monitoring your
-							effortlessly.
+							applications with SigNoz.
 						</Typography.Paragraph>
 					</div>
 
@@ -307,47 +295,22 @@ function SignUp(): JSX.Element {
 						</FormContainer.Item>
 					</div>
 
-					{isNameVisible && (
-						<div className="first-name-container">
-							<Label htmlFor="signupFirstName">Name</Label>{' '}
-							<FormContainer.Item noStyle name="firstName">
-								<Input
-									placeholder="Your Name"
-									required
-									id="signupFirstName"
-									disabled={isDetailsDisable && form.getFieldValue('firstName')}
-								/>
-							</FormContainer.Item>
-						</div>
-					)}
-
-					<div className="org-name-container">
-						<Label htmlFor="organizationName">Organization Name</Label>{' '}
-						<FormContainer.Item noStyle name="organizationName">
-							<Input
-								placeholder="Your Company"
-								id="organizationName"
-								disabled={isDetailsDisable}
-							/>
-						</FormContainer.Item>
-					</div>
-
 					{!precheck.sso && (
-						<div className="password-section">
+						<>
 							<div className="password-container">
-								<label htmlFor="Password">Password</label>{' '}
+								<Label htmlFor="currentPassword">Password</Label>
 								<FormContainer.Item noStyle name="password">
 									<Input.Password required id="currentPassword" />
 								</FormContainer.Item>
 							</div>
 
 							<div className="password-container">
-								<label htmlFor="ConfirmPassword">Confirm Password</label>{' '}
+								<Label htmlFor="confirmPassword">Confirm Password</Label>
 								<FormContainer.Item noStyle name="confirmPassword">
 									<Input.Password required id="confirmPassword" />
 								</FormContainer.Item>
 							</div>
-						</div>
+						</>
 					)}
 
 					<div className="password-error-container">
@@ -382,9 +345,9 @@ function SignUp(): JSX.Element {
 							loading={loading}
 							disabled={isValidForm()}
 							className="periscope-btn primary next-btn"
-							icon={<ArrowRight size={12} />}
+							block
 						>
-							Sign Up
+							Access My Workspace
 						</Button>
 					</div>
 				</FormContainer>

frontend/src/types/api/user/signup.ts

@@ -1,5 +1,4 @@
 export interface Props {
-	name: string;
 	orgDisplayName: string;
 	email: string;
 	password: string;