calcom/components/ui/UsernameInput.tsx
Syed Ali Shahbaz fa35af7bd8
Cal 262 refactor edit teams according to the design reference (#516)
* refactored settings/team landing page

* changed team edit flow, WIP

* merge conflict fix for teams.tsx

* minor fixes to edit team, WIP

* invite-member and disband team APIs attached inside edit-team page

* added remove-member API in edit-team page, minor fixes

* minor code fix, WIP

* WIP

* add logo, bio, branding to team schema

* bio, logo, branding, slug patch API and minor code fix-- WIP

* fn to Disband team directly from the dropdown menu in settings/teams page, removed debug remnants --WIP

* Pull latest data after an action in settings/teams-edit page

* added slug conflict check at Patch time

* code clean-up

* initial change request fixes --WIP

* prop type fix and add warn button color theme --WIP

* added warn Button to Dialog

* remaining change request fixes

* added noop from react-query

* updated invited team-list design

* prettier fix for api/teams/profile

* removed noop import and added custom noop

* minor Button fix

* requested changes addressed
2021-09-06 14:22:22 +01:00

29 lines
1,007 B
TypeScript

import React from "react";
const UsernameInput = React.forwardRef((props, ref) => (
// todo, check if username is already taken here?
<div>
<label htmlFor="username" className="block text-sm font-medium text-gray-700">
{props.label ? props.label : "Username"}
</label>
<div className="flex mt-1 rounded-md shadow-sm">
<span className="inline-flex items-center px-3 text-gray-500 border border-r-0 border-gray-300 rounded-l-sm bg-gray-50 sm:text-sm">
{typeof window !== "undefined" && window.location.hostname}/{props.label && "team/"}
</span>
<input
ref={ref}
type="text"
name="username"
id="username"
autoComplete="username"
required
{...props}
className="flex-grow block w-full min-w-0 lowercase border-gray-300 rounded-none rounded-r-sm focus:ring-black focus:border-black sm:text-sm"
/>
</div>
</div>
));
UsernameInput.displayName = "UsernameInput";
export { UsernameInput };