Skip to content

Commit

Permalink
Merge pull request #387 from credebl/length-of-the-input-field-charac…
Browse files Browse the repository at this point in the history 
…ters

fix: length of the input field characters
  • Loading branch information
@sanjay-k1910
sanjay-k1910 authored Oct 26, 2023
2 parents 393fff7 + a291236 commit 4e8088e
Show file tree
Hide file tree
Showing 5 changed files with 224 additions and 55 deletions.
127 changes: 93 additions & 34 deletions src/components/Authentication/SignUpUserName.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
import 'react-toastify/dist/ReactToastify.css';

import * as yup from 'yup';

import { Button, Label } from 'flowbite-react';
import {
Field,
Form,
Formik
} from 'formik';
import { useState } from 'react';

import React from 'react';
import SignUpUserPasskey from './SignUpUserPasskey.js';
import SignUpUser from './SignUpUser.js';
import NavBar from './NavBar.js';
import FooterBar from './FooterBar.js';
import React from 'react';

interface nameValues {
firstName: string;
Expand Down Expand Up @@ -126,13 +123,13 @@ const SignUpUserName = () => {
.string()
.required('First name is required')
.min(2, 'First name must be at least 2 characters')
.max(50, 'First name must be at most 255 characters')
.max(50, 'First name must be at most 50 characters')
.trim(),
lastName: yup
.string()
.required('Last name is required')
.min(2, 'Last name must be at least 2 characters')
.max(50, 'Last name must be at most 255 characters')
.max(50, 'Last name must be at most 50 characters')
.trim()
})}
validateOnBlur
Expand All @@ -151,72 +148,134 @@ const SignUpUserName = () => {
lastName: formikHandlers.values.lastName
})
return (
<Form className="mt-10 space-y-6" onSubmit={formikHandlers.handleSubmit}>
<Form
className="mt-10 space-y-6"
onSubmit={formikHandlers.handleSubmit}
>
<div>
<div className="text-primary-700 font-inter text-base font-medium leading-5">

<div className="block mb-2 text-sm font-medium dark:text-white">
<Label className="text-primary-700 dark:!text-primary-700" htmlFor="firstName" value="First name" />
<span className='text-red-500 text-xs'>*</span>
<Label
className="text-primary-700 dark:!text-primary-700"
htmlFor="firstName"
value="First name"
/>
<span className="text-red-500 text-xs">*</span>
</div>
<Field
id="signupfirstname"
name="firstName"
placeholder="Please enter your first name"
className="truncate w-full bg-gray-200 px-4 py-2 text-gray-700 text-sm rounded-md focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-600"
onChange={(e) => {
const value = e.target.value;
formikHandlers.setFieldValue(
'firstName',
value,
);
formikHandlers.setFieldTouched(
'firstName',
true,
);

if (value.length > 50) {
formikHandlers.setFieldError(
'firstName',
'First name must be at most 50 characters',
);
} else {
formikHandlers.setFieldError(
'firstName',
undefined,
);
}
}}
/>
{
(formikHandlers?.errors?.firstName && formikHandlers?.touched?.firstName) &&
<span className="text-red-500 text-xs">{formikHandlers?.errors?.firstName}</span>
}

{formikHandlers?.errors?.firstName &&
formikHandlers?.touched?.firstName && (
<span className="text-red-500 text-xs">
{formikHandlers?.errors?.firstName}
</span>
)}
</div>
<div className="text-primary-700 font-inter text-base font-medium leading-5 mt-6">

<div className="block mb-2 text-sm font-medium dark:text-white">
<Label className="text-primary-700 dark:!text-primary-700" htmlFor="lastName" value="Last name" />
<span className='text-red-500 text-xs'>*</span>
<Label
className="text-primary-700 dark:!text-primary-700"
htmlFor="lastName"
value="Last name"
/>
<span className="text-red-500 text-xs">*</span>
</div>
<Field
id="signuplastname"
name="lastName"
placeholder="Please enter your last name"
className="truncate w-full bg-gray-200 px-4 py-2 text-gray-700 text-sm rounded-md focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-600"
onChange={(e) => {
const value = e.target.value;
formikHandlers.setFieldValue('lastName', value);
formikHandlers.setFieldTouched(
'lastName',
true,
);

if (value.length > 50) {
formikHandlers.setFieldError(
'lastName',
'Last name must be at most 50 characters',
);
} else {
formikHandlers.setFieldError(
'lastName',
undefined,
);
}
}}
/>
{
(formikHandlers?.errors?.lastName && formikHandlers?.touched?.lastName) &&
<span className="text-red-500 text-xs">{formikHandlers?.errors?.lastName}</span>
}
{formikHandlers?.errors?.lastName &&
formikHandlers?.touched?.lastName && (
<span className="text-red-500 text-xs">
{formikHandlers?.errors?.lastName}
</span>
)}
</div>
<div className="flex mt-8">

<Button
id='signupuserdetailsnextbutton'
id="signupuserdetailsnextbutton"
type="submit"
isProcessing={""}
className='w-full font-medium text-center text-white bg-primary-700 hover:!bg-primary-800 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'

isProcessing={''}
className="w-full font-medium text-center text-white bg-primary-700 hover:!bg-primary-800 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 30 20" fill="none">
<path d="M29.8369 10.763C29.9991 10.3984 30.0415 9.99721 29.9588 9.61015C29.876 9.22309 29.6717 8.86759 29.3719 8.58861L20.7999 0.609018C20.6022 0.418485 20.3657 0.26651 20.1043 0.161959C19.8428 0.0574089 19.5616 0.00237707 19.2771 7.53215e-05C18.9925 -0.00222642 18.7103 0.0482475 18.447 0.148553C18.1836 0.248858 17.9443 0.396985 17.7431 0.584292C17.5419 0.771598 17.3828 0.994332 17.275 1.2395C17.1673 1.48466 17.1131 1.74735 17.1155 2.01223C17.118 2.27711 17.1771 2.53888 17.2894 2.78227C17.4018 3.02566 17.565 3.24578 17.7697 3.4298L22.6857 8.0061H2.14299C1.57464 8.0061 1.02956 8.21628 0.627668 8.59039C0.225779 8.96451 0 9.47192 0 10.001C0 10.5301 0.225779 11.0375 0.627668 11.4116C1.02956 11.7857 1.57464 11.9959 2.14299 11.9959H22.6857L17.7718 16.5702C17.5672 16.7542 17.4039 16.9743 17.2916 17.2177C17.1793 17.4611 17.1202 17.7229 17.1177 17.9878C17.1152 18.2526 17.1694 18.5153 17.2772 18.7605C17.3849 19.0057 17.5441 19.2284 17.7453 19.4157C17.9465 19.603 18.1858 19.7511 18.4491 19.8514C18.7125 19.9518 18.9947 20.0022 19.2792 19.9999C19.5638 19.9976 19.845 19.9426 20.1064 19.838C20.3679 19.7335 20.6043 19.5815 20.802 19.391L29.374 11.4114C29.5725 11.2257 29.7298 11.0054 29.8369 10.763Z" fill="white" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 30 20"
fill="none"
>
<path
d="M29.8369 10.763C29.9991 10.3984 30.0415 9.99721 29.9588 9.61015C29.876 9.22309 29.6717 8.86759 29.3719 8.58861L20.7999 0.609018C20.6022 0.418485 20.3657 0.26651 20.1043 0.161959C19.8428 0.0574089 19.5616 0.00237707 19.2771 7.53215e-05C18.9925 -0.00222642 18.7103 0.0482475 18.447 0.148553C18.1836 0.248858 17.9443 0.396985 17.7431 0.584292C17.5419 0.771598 17.3828 0.994332 17.275 1.2395C17.1673 1.48466 17.1131 1.74735 17.1155 2.01223C17.118 2.27711 17.1771 2.53888 17.2894 2.78227C17.4018 3.02566 17.565 3.24578 17.7697 3.4298L22.6857 8.0061H2.14299C1.57464 8.0061 1.02956 8.21628 0.627668 8.59039C0.225779 8.96451 0 9.47192 0 10.001C0 10.5301 0.225779 11.0375 0.627668 11.4116C1.02956 11.7857 1.57464 11.9959 2.14299 11.9959H22.6857L17.7718 16.5702C17.5672 16.7542 17.4039 16.9743 17.2916 17.2177C17.1793 17.4611 17.1202 17.7229 17.1177 17.9878C17.1152 18.2526 17.1694 18.5153 17.2772 18.7605C17.3849 19.0057 17.5441 19.2284 17.7453 19.4157C17.9465 19.603 18.1858 19.7511 18.4491 19.8514C18.7125 19.9518 18.9947 20.0022 19.2792 19.9999C19.5638 19.9976 19.845 19.9426 20.1064 19.838C20.3679 19.7335 20.6043 19.5815 20.802 19.391L29.374 11.4114C29.5725 11.2257 29.7298 11.0054 29.8369 10.763Z"
fill="white"
/>
</svg>
<span className="ml-2">Continue</span>
</Button>

</div>
</div>
<div className="text-sm font-medium text-gray-500 dark:text-gray-400 pt-4 flex items-center justify-center">
Already have an account?
&nbsp;<a
id='navigatetosignup'
Already have an account? &nbsp;
<a
id="navigatetosignup"
href="/authentication/sign-in"
className="text-primary-700 hover:underline dark:text-primary-500"
>
{` Login here`}
</a>
</div>

</Form>
)
);
}}
</Formik>

Expand Down
32 changes: 27 additions & 5 deletions src/components/CreateEcosystemOrgModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { createOrganization } from "../../api/organization";
import { getFromLocalStorage } from "../../api/Auth";
import { createEcosystems } from "../../api/ecosystem";
import { getOrgDetails } from "../../config/ecosystem";
import React from "react";

interface Values {
name: string;
Expand Down Expand Up @@ -340,7 +341,19 @@ const CreateEcosystemOrgModal = (props: IProps) => {
name="name"
value={formikHandlers.values.name}
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder={`Enter ${popupName} Name`} />
placeholder={`Enter ${popupName} Name`}
onChange={(e) => {
const value = e.target.value;
formikHandlers.setFieldValue('name', value);
formikHandlers.setFieldTouched('name', true);

if (value.length > 50) {
formikHandlers.setFieldError('name', props.isorgModal ? 'Organization name must be at most 50 characters' : 'Ecosystem name must be at most 50 characters');
} else {
formikHandlers.setFieldError('name', undefined);
}
}}
/>
{
(formikHandlers?.errors?.name && formikHandlers?.touched?.name) &&
<span className="text-red-500 text-xs">{formikHandlers?.errors?.name}</span>
Expand All @@ -365,7 +378,19 @@ const CreateEcosystemOrgModal = (props: IProps) => {
value={formikHandlers.values.description}
as='textarea'
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder={`Enter ${popupName} Description`} />
placeholder={`Enter ${popupName} Description`}
onChange={(e) => {
const value = e.target.value;
formikHandlers.setFieldValue('description', value);
formikHandlers.setFieldTouched('description', true);

if (value.length > 50) {
formikHandlers.setFieldError('description', 'Description must be at most 255 characters');
} else {
formikHandlers.setFieldError('description', undefined);
}
}}
/>
{
(formikHandlers?.errors?.description && formikHandlers?.touched?.description) &&
<span className="text-red-500 text-xs">{formikHandlers?.errors?.description}</span>
Expand All @@ -385,14 +410,11 @@ const CreateEcosystemOrgModal = (props: IProps) => {
</Button>
</Form>
)}

</Formik>
</Modal.Body>

</Modal>
)
}

return (
<>
{renderEcosystemModal()}
Expand Down
24 changes: 24 additions & 0 deletions src/components/EditEcosystemOrgModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,18 @@ const EditPopupModal = (props: EditEntityModalProps) => {
value={formikHandlers.values.name}
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder={`Enter ${props.isOrganization ? "Organization" : "Ecosystem"} Name`}
onChange={(e) => {
const value = e.target.value;
formikHandlers.setFieldValue('name', value);
formikHandlers.setFieldTouched('name', true);

if (value.length > 50) {
formikHandlers.setFieldError('name', props.isOrganization ? 'Organization name must be at most 50 characters' : 'Ecosystem name must be at most 50 characters');
} else {
formikHandlers.setFieldError('name', undefined);
}
}}

/>
{formikHandlers?.errors?.name && formikHandlers?.touched?.name && (
<span className="text-red-500 text-xs">{formikHandlers?.errors?.name}</span>
Expand All @@ -312,6 +324,18 @@ const EditPopupModal = (props: EditEntityModalProps) => {
as='textarea'
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder={`Enter ${props.isOrganization ? "Organization" : "Ecosystem"} Description`}
onChange={(e) => {
const value = e.target.value;
formikHandlers.setFieldValue('description', value);
formikHandlers.setFieldTouched('description', true);

if (value.length > 50) {
formikHandlers.setFieldError('description', 'Description must be at most 255 characters');
} else {
formikHandlers.setFieldError('description', undefined);
}
}}

/>
{formikHandlers?.errors?.description && formikHandlers?.touched?.description && (
<span className="text-red-500 text-xs">{formikHandlers?.errors?.description}</span>
Expand Down
Loading

0 comments on commit 4e8088e

Please sign in to comment.