Commit graph

33 commits

Author SHA1 Message Date
RachelElysia
0ac2ce8dfd
Fleet UI: Comb through registration buttons (#40444) 2026-02-26 12:13:53 -05:00
jacobshandling
efcab3e72d
Improve UX for email fields on mobile (#36218) 2025-11-25 09:26:15 -08:00
RachelElysia
efc64389b1
Fleet UI [Feature]: UI reskin (#33558) 2025-09-29 12:10:41 -05:00
Scott Gress
dc4fd676c5
Update password requirements check when setting up (#32261)
for #31876 

# Details

This PR updates the validation for password requirements to be
consistent in all places, and to show more specific error messages when
the entered password does not meet the requirements.

Previously the `valid_password` helper just returned a boolean
indicating whether a password was valid. It now returns an object with
`isValid`, `error` and `error_code` so that different types of password
issues can be surfaced. This allows us to continue having a single
source of truth for password validation, while providing more helpful
error messages when a password doesn't meet our criteria.

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [X] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/guides/committing-changes.md#changes-files)
for more information.

## Testing

- [X] Added/updated automated tests
- [X] QA'd all new/changed functionality manually
  - [X] First time setup (adding the initial user)
  - [X] Add user in settings -> manage users
  - [X] Changer user password in settings -> manage users
  - [X] Password reset form
2025-08-26 16:59:05 -05:00
RachelElysia
7f71866571
FE: Button renaming, better storybook view, remove unused code (#28245) 2025-04-16 09:56:09 -04:00
RachelElysia
6dabcd524c
Frontend: Improve URL and email validation (#18445) 2024-04-25 13:03:30 -04:00
Jacob Shandling
67c45d5417
UI – refactor forms and form fields (#16159)
## Addresses #15325 

- Define shared global styles for forms (`form` and `.form`s) and
`.form-field`s
- Sweep through the app, updating each form from being locally styled to
first prioritizing the global styles and only defining local styles
where needed for custom behavior
- Remove lots of unnecessary nesting of elements
- Other small bug fixes and improvements

### Samples, before (L) | after (R):
**Save query modal**
![Screenshot 2024-01-17 at 11 49
14 AM](https://github.com/fleetdm/fleet/assets/61553566/14f209fb-31db-41ef-8e63-e0d8994698c1)

**Edit query form**
![Screenshot 2024-01-17 at 11 50
35 AM](https://github.com/fleetdm/fleet/assets/61553566/b07e70ea-3095-4e4f-be73-95a3c499839b)

**Add hosts modal**
![Screenshot 2024-01-17 at 11 51
48 AM](https://github.com/fleetdm/fleet/assets/61553566/4ef1f410-a823-41d1-b2f6-ea8eb5231f93)


## QA Plan:
@xpkoala here's the same list from the issue, freshly de-checked for you
to use if it's helpful:
* Please check error states of each field

#### Specified by issue:
##### In "Save query" modal:
- [ ] Reduce space between checkboxes and their help text to 8px/0.5rem
for the following fields:
   - [ ] Observers can run
   - [ ] Discard data 
- [ ] Update the following checkbox labels to have normal font weight
(not bold):
   - [ ]  Discard data

##### On "Edit query" page:
- [ ] Update the following checkbox labels to have normal font weight
(not bold):
   - [ ] Observers can run
   - [ ] Discard data

##### In "Add hosts" modal, for copy text fields: 
- [ ]  match typical form form field styles
- [ ] Adjust the positioning of the copy icon to keep it from being too
far down

##### Further locations to check
- [ ] ChangeEmailForm.jsx 
- [ ] ChangePasswordForm.jsx 
- [ ] ConfirmInviteForm.jsx 
- [ ] ConfirmSSOInviteForm.jsx
- [ ] EnrollSecretModal.tsx
- [ ] ForgotPasswordForm.jsx
- [ ] LoginForm.tsx
- [ ] EditPackForm.tsx
- [ ] (New)PackForm.tsx
- [ ] AdminDetails.jsx
- [ ] ConfirmationPage.tsx
- [ ] FleetDetails.jsx
- [ ] OrgDetails.jsx
- [ ] ResetPasswordForm.tsx
- [ ] UserSettingsForm.jsx
- [ ] EditTeamModal.tsx
- [ ] IdpSection.tsx 
- [ ] DeleteIntegrationModal.tsx
- [ ] IntegrationForm.tsx 
- [ ] EndUserMigrationSection.tsx
- [ ] RequestCSRModal.tsx
- [ ] Advanced.tsx 
- [ ] Agents.tsx 
- [ ] FleetDesktop.tsx
- [ ] HostStatusWebhook.tsx front
- [ ] Info.tsx 
- [ ] Smtp.tsx 
- [ ] Sso.tsx 
- [ ] Statistics.tsx
- [ ] WebAddress.tsx
- [ ] CreateTeamModal.tsx
- [ ] DeleteTeamModal.tsx
- [ ] EditTeamModal.tsx
- [ ] AgentOptionsPage.tsx
- updated the layout of this page to align with the rest of the forms in
the UI – can easily revert if it's not what we want
- [ ] AddMemberModal.tsx
- [ ] RemoveMemberModal.tsx
- [ ] UserForm.tsx 
  - Used by both `EditUserModal` and `CreateUserModal`
  - A few different conditions that cause different rendering behavior 
- [ ] DeleteHostModal.tsx
- [ ] TransferHostModal.tsx
- [ ] LabelForm.tsx
- [ ] MacOSTargetForm.tsx
- [ ] WindowsTargetForm.tsx 
- [ ] BootstrapPackageListltem.ts
- [ ] EndUserAuthForm.tsx
- [ ] PackQueryEditorModal.tsx
- [ ] PolicyForm.tsx 
- [ ] SaveNewPolicyModal.tsx
- [ ] ConfirmSaveChangesModal.tsx
- [ ] Query automations modal
- [ ] Policy automations modal - addresses #16010 
- [ ] SoftwareAutomationsModal

## Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
Co-authored-by: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
2024-01-18 10:48:44 -05:00
Jacob Shandling
cb75b975d0
UI: Fix and improve tab experience in setup flow (#11194)
## Addresses #10913 
- Fixes the bug(s) outlined in the issue
- Improves look and feel of the tabbing experience throughout the setup
flow: https://www.loom.com/share/c482317d18314e629b7e5ebab7fd2840

## Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-04-18 10:34:21 -07:00
Jacob Shandling
54bf64ada4
UI: Fix line height issue on error in registration flow via replacing InputFieldWithIcon with InputField (#8819)
* Replace InputFieldWithIcon with InputField on setup page

* same refactor on OrgDetails and FleetDetails

* Fix admin setup page spacing issue

* change file

* Remove redundant registration flow placeholders per style guide - info already in labels

* Update reg flow tests getByPlaceHolder ->  getByLabel

* update e2e tests with getByPlaceHolderText -> getByLabelText

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2022-12-16 10:32:10 -08:00
RachelElysia
267f65a603
Frontend testing documentation (#8936) 2022-12-14 13:56:56 -05:00
Gabriel Hernandez
f1995bf79e
Fleet UI update to testing tooling user-event library (#7514)
* adding FE testing documentation

* extend radio button tests

* update test to work with new user-events lib version

* more testing docs
2022-09-12 16:10:10 +01:00
RachelElysia
e64dd73b54
Fleet UI: Button loading spinners (#7124)
Co-authored-by: Luke Heath <luke@fleetdm.com>
2022-08-29 08:21:37 -07:00
gillespi314
4a4e832d3a
Increase minimum password length to 12 characters (#5712) 2022-05-18 12:03:00 -05:00
Tharun Rajendran
12b441a5dd
chore(test): rewritten registration form page's test using rtl (#5013) 2022-04-08 09:35:57 -05:00
Luke Heath
5866d68f13
Set max length for name inputs (#4063) 2022-02-08 19:40:38 -06:00
RachelElysia
f645669ec2
App UI: Remove form autocomplete from UI input fields (#2703) 2021-10-27 13:31:45 -04:00
RachelElysia
aeb852e168
Remove username from UI (#1168)
* Remove username from UI code
* Remove username from tests
* Remove username from database
* Modify server endpoints for removing username
* Implement backend aspects of removing username
* Update API docs
* Add name to fleetctl
2021-06-24 13:42:29 -07:00
noahtalerman
0f244140cc
Edit message for set up, forgot password, and change password (#1083)
- Add the `hint` that is used on the _Set up_ page to the _Change password_ form and _Reset password_ form
- Add a consistent error message when a password fails to meet the criteria. Using the phrase "criteria below" because all pages render the above `hint`
2021-06-15 09:51:04 -04:00
Gabe Hernandez
efb35b537a
add prettier and have it format all fleet application code (#625)
* add prettier and have it format all js code except website:
:

* trying running prettier check in CI

* fix runs on in CI

* change CI job name

* fix prettier erros and fix CI
2021-04-12 14:32:25 +01:00
Gabe Hernandez
3546b7d41a
adding typescript and updating linting to work with it (#356)
* updated typescript version and tsconfig in project

* updated eslint version

* change from experimental export to supported export

* removed accidentally added script

* turn off buggy jsx-a11y eslint rules

* remove unused tslint.json

* fix wrong jsx-a11y depedency

* use correct eslint-plugin-jsx-a11y version

* fix rest of linting errors

* move back js-yaml version to 3 major
2021-03-01 07:48:51 +00:00
noahtalerman
1b23b7b74f
Add style fixes caught during QA. Add favicon. (#119)
Changes include style fixes that were caught during a QA pass.
2020-12-10 13:09:05 -08:00
noahtalerman
7d9906e5ea
Update Fleet setup styles (#78)
This PR is part of the UI Refresh #38.

The goal of this PR is to update the styles of the Fleet setup (onboarding) flow.
2020-12-02 09:59:44 -05:00
Zach Wasserman
0670db66c4
Migrate JS tests to Jest and update libraries (#74)
- Move from Mocha to Jest for JS testing (Jest seems to have better support for
 'watching' tests and a more active community these days).
- Codemod existing tests to Jest syntax (using https://github.com/skovhus/jest-codemods)
- Fix some errors in tests that were previously hidden.
- Update Babel.
2020-12-01 10:15:12 -08:00
noahtalerman
a6529cc5b0
Fix form field focus on setup pages (#2336)
- Using componentDidUpdate() to check for currentPage change in setup registration form. Initially tried adding `autofocus` prop to the first `<InputFieldWithIcon />` on each page. As seen in AdminDetails page. Didn't work. I believe React only pays attention to `autofocus` when the <input> is re-rendered.

- Calling focus() on page's first input  when currentPage changes and is true. Using refs callback

- Delaying focus by 300ms using setTimeout because the `.user-registration__field-wrapper` has a transition duration of 300ms. Setting the inputs focus immediately creates a snapping movement and ruins the smooth transition.

Fixes #936
2020-10-21 18:03:39 -07:00
Zachary Wasserman
dc4b97d15f
Fix React deprecation warnings (#1976)
- Refactor imports of PropTypes to use the prop-types package
- Upgrade dependencies that were setting off deprecation warnings
2019-01-06 17:25:33 -08:00
Mike Stone
160c031a0b Client-side password validation (#1181) 2017-02-07 09:29:48 -05:00
Kyle Knight
1a011dadbd Removing requirement for org avatar & fixing "Enter" key on /setup (#871)
* Removing requirment for org avatar

* Convert /setup to multiple forms

* Getting kinks worked out of Enter key

* Fixing typescript nonesense linting issues
2017-01-11 12:27:33 -07:00
Mike Stone
7fa60d0724 Change Button component to take children instead of text prop (#710) 2016-12-28 10:24:52 -05:00
Mike Stone
ee6832c743 App settings page (#615)
* AppSettingsPage at /admin/settings

* Adds App Settings to site nav items

* SMTP not configured warning

* Creates AppConfigForm

* Avatar preview

* API client to update app config

* Creates OrgLogoIcon component

* Hide username/password when no auth type
2016-12-23 13:40:16 -05:00
Kyle Knight
9e6a8eae56 Styling User Registration (#529) 2016-12-01 13:57:19 -05:00
Kyle Knight
7acec77303 Render Icons with component (#533) 2016-11-28 13:20:15 -06:00
Mike Stone
5dd0b1cf64 User registration submit (#490)
* Renames kolide_web_address to kolide_server_url

* API client for new user setup

* handle api response

* Do not allow logged in users to register
2016-11-21 15:22:14 -05:00
Mike Stone
c1866c48c4 User registration (#453)
* RegistrationPage with Breadcrumbs

* Registration Form

* client-side validations

* Form page headers and description

* Form HOC
2016-11-16 11:58:25 -05:00