feat: Updated placeholders

apps/web/components/signin/OnboardUserForm.tsx

@@ -4,7 +4,7 @@ import { Title, Text, Stack, TextInput, Select, Radio, Group, Container, Flex, B
 
 import { Button } from '@ui/button';
 import { useApp } from '@hooks/useApp';
-import { colors, COMPANY_SIZES, HOW_HEARD_ABOUT_US, ROLES } from '@config';
+import { colors, COMPANY_SIZES, HOW_HEARD_ABOUT_US, PLACEHOLDERS, ROLES } from '@config';
 import { useOnboardUserProjectForm } from '@hooks/useOnboardUserProjectForm';
 
 export function OnboardUserForm() {
@@ -29,11 +29,11 @@ export function OnboardUserForm() {
       <Title mb="md">
         <Group position="left">
           <span style={{ fontSize: '30px' }}>👋</span>
-          <span>Welcome, {profile?.firstName}</span>
+          <span>Welcome {profile?.firstName}</span>
         </Group>
       </Title>
       <Text size="md" color="dimmed" align="left" mb="lg">
-        We just need to confirm a couple of details, it&lsquo;s only take a minute.
+        Let&apos;s customize your experience. Your answers will decrease the time to get started.
       </Text>
       <form onSubmit={handleSubmit(onSubmit)}>
         <FocusTrap active>
@@ -49,9 +49,9 @@ export function OnboardUserForm() {
               }}
               render={({ field }) => (
                 <TextInput
-                  label="Project Name"
                   required
-                  placeholder="Enter Your Project Name"
+                  label="Project Name"
+                  placeholder={PLACEHOLDERS.project}
                   description="E.g. your company name or workspace name."
                   error={errors.projectName?.message}
                   {...field}
@@ -98,11 +98,11 @@ export function OnboardUserForm() {
                   searchable
                   required
                   data={role}
-                  label="Your Role"
                   value={field.value}
                   onChange={field.onChange}
+                  label={PLACEHOLDERS.role}
                   error={errors.role?.message}
-                  placeholder="Engineer, Manager, Founder..."
+                  placeholder={PLACEHOLDERS.role}
                 />
               )}
             />
@@ -116,7 +116,7 @@ export function OnboardUserForm() {
                   label="How did you hear about us first?"
                   required
                   data={about}
-                  placeholder="Google Search, Colleague"
+                  placeholder={PLACEHOLDERS.source}
                   searchable
                   creatable
                   value={field.value}

apps/web/components/signin/index.tsx

@@ -5,7 +5,7 @@ import { Title, Text, Stack, Divider, Flex, Box, Alert, TextInput as Input } fro
 import { Button } from '@ui/button';
 import { useSignin } from '@hooks/auth/useSignin';
 import { PasswordInput } from '@ui/password-input';
-import { CONSTANTS, ROUTES, colors } from '@config';
+import { CONSTANTS, PLACEHOLDERS, ROUTES, colors } from '@config';
 
 import DarkLogo from '@assets/images/logo-dark.png';
 import { GithubIcon } from '@assets/icons/Github.icon';
@@ -59,8 +59,21 @@ export const Signin = ({ API_URL, error }: SigninProps) => {
               {errorMessage.message}
             </Alert>
           ) : null}
-          <Input label="Email" {...register('email')} size="md" placeholder="Email" type="email" required />
-          <PasswordInput label="Password" register={register('password')} size="md" placeholder="Password" required />
+          <Input
+            required
+            size="md"
+            type="email"
+            label="Email"
+            {...register('email')}
+            placeholder={PLACEHOLDERS.email}
+          />
+          <PasswordInput
+            required
+            size="md"
+            label="Password"
+            register={register('password')}
+            placeholder={PLACEHOLDERS.password}
+          />
           <Link href={ROUTES.REQUEST_FORGOT_PASSWORD}>
             <Text size="md" align="right">
               Forgot password?

apps/web/config/constants.config.ts

@@ -279,3 +279,14 @@ export const HOW_HEARD_ABOUT_US = [
   { value: 'Colleague', label: 'Colleague' },
   { value: 'Linkdin', label: 'Linkdin' },
 ];
+
+export const PLACEHOLDERS = {
+  email: '[email protected]',
+  password: '********',
+  project: 'Acme Inc',
+  fullName: 'John Doe',
+  companySize: 'Only me',
+  role: 'Engineer',
+  source: 'Google Search, Recommendation...',
+  about: 'Google Search',
+};

apps/web/pages/auth/reset/[token].tsx

@@ -2,12 +2,12 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { Title, Stack, Flex, Text } from '@mantine/core';
 
-import { ROUTES, colors } from '@config';
 import { Button } from '@ui/button';
 import { PasswordInput } from '@ui/password-input';
 import DarkLogo from '@assets/images/logo-dark.png';
 import { OnboardLayout } from '@layouts/OnboardLayout';
 import { useResetPassword } from '@hooks/auth/useResetPassword';
+import { PLACEHOLDERS, ROUTES, colors } from '@config';
 
 export default function ResetPasswordPage({}) {
   const { register, resetPassword, error, isError } = useResetPassword();
@@ -34,8 +34,8 @@ export default function ResetPasswordPage({}) {
             required
             size="md"
             label="New Password"
-            placeholder="New Password here"
             register={register('password')}
+            placeholder={PLACEHOLDERS.password}
           />
           <Button fullWidth type="submit" size="md">
             Update password

apps/web/pages/auth/reset/request.tsx

@@ -2,8 +2,8 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { Title, Stack, Flex, Text, TextInput as Input } from '@mantine/core';
 
-import { colors, ROUTES } from '@config';
 import { Button } from '@ui/button';
+import { colors, PLACEHOLDERS, ROUTES } from '@config';
 import DarkLogo from '@assets/images/logo-dark.png';
 import { OnboardLayout } from '@layouts/OnboardLayout';
 import { useRequestForgotPassword } from '@hooks/auth/useRequestForgotPassword';
@@ -44,8 +44,8 @@ export default function RequestForgotPasswordPage() {
               size="md"
               type="email"
               label="Email"
-              placeholder="Email"
               {...register('email')}
+              placeholder={PLACEHOLDERS.email}
               description="Password reset link will be sent to the email!"
             />
             <Button fullWidth type="submit" size="md" disabled={requestSent} loading={isForgotPasswordRequesting}>

apps/web/pages/auth/signup.tsx

@@ -2,10 +2,10 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { Title, Text, Stack, Flex, TextInput as Input, FocusTrap } from '@mantine/core';
 
-import { ROUTES } from '@config';
 import { Button } from '@ui/button';
 import { PasswordInput } from '@ui/password-input';
 
+import { PLACEHOLDERS, ROUTES } from '@config';
 import { useSignup } from '@hooks/auth/useSignup';
 import DarkLogo from '@assets/images/logo-dark.png';
 import { OnboardLayout } from '@layouts/OnboardLayout';
@@ -36,25 +36,31 @@ export default function SignupPage({}) {
               required
               size="md"
               label="Full Name"
-              placeholder="Full Name"
+              placeholder={PLACEHOLDERS.fullName}
               error={errors.fullName?.message}
               {...register('fullName', {
                 pattern: {
                   value: /\w+\s\w+/gm,
-                  message: 'Please enter your full name',
+                  message: 'Please enter your full name. E.g. John Doe',
                 },
               })}
             />
             <Input
               size="md"
               required
               label="Email"
-              placeholder="Email"
               {...register('email')}
               error={errors.email?.message}
+              placeholder={PLACEHOLDERS.email}
               description="Verification code will be sent to your email!"
             />
-            <PasswordInput label="Password" register={register('password')} size="md" placeholder="Password" required />
+            <PasswordInput
+              required
+              size="md"
+              label="Password"
+              register={register('password')}
+              placeholder={PLACEHOLDERS.password}
+            />
             <Button id="signup" loading={isSignupLoading} fullWidth type="submit" size="md">
               Create an account
             </Button>