Skip to content

Commit

Permalink
feat: New create user contextual bar (#30582)
Browse files Browse the repository at this point in the history
* feat: ✨ New SetRandomPassword UI/ux

Created a new ui logic for the SetRandomPassword form with 2 radio buttons instead of a toggle and changed the email field to be the first one in the create user contextual bar.

* feat: ✨ Implement password confirmation and password verification

Implemented the password verification and confirmation flows in the users page contextual bar, changed some types to follow the changes, removed the old Verified toggle and componentized the setRandomPassword radios.

* feat: ✨ Create briefing field in new users contextual bar

Created a briefing text warning users of the new tab layout functionality in the new user contextual bar of the admin users page.

* feat: ✨ Create visual part of hide custom fields button

Created a button that will hide or show the custom fields of the new users form on click. Also added an icon to the user form title, changed the password field position in the form, removed the addon icons from some fields and created a new briefing message in the top of the form.

* feat: ✨ Create logic for 'hide additional fields' button

Created the logic that hides the custom fields of the new user form when the 'hide additional fields' button is clicked

* feat: ✨ Implement multiple user creation flow

Added a new screen to enhance the user creation experience. This screen appears immediately after you create a new user. On this page, you have two options: you can either complete the process and view the user you just created, or you can return to the form to create another user without exiting the contextual bar. Additionally, I've made some minor logic improvements and removed commented-out code.

* feat: ✨ Make user created contextual bar page count dynamic

Implemented logic to the user created contextual bar, now for each user created without exiting or refreshing the page the number of the message will be incremented by 1. Also stopped using the old Field.Component components in favor of their standalone versions and made the message of the Hide Additional Fields button change to Show additional fields when the fields are hidden.

* feat: ✨ Implement label tooltip in the user creation page email field

Implemented a tooltip in the email verification field of the user creation contextual bar that explains what toggling on this field will do. Also implemented a way to use a single value in order to controll the setRandomPassword radios instead of two and added the necessary entries in the i18n to follow the aforementioned changes.

* refactor: ♻️ Change "Only allow verified users to login" setting copy

Changed the title of the "Only allow verified users to login" setting to "Require email verification to login" and its description from "Make sure you have correct SMTP settings to use this feature" to "Ensure SMTP is configured to enable this feature"

* refactor: ♻️ Ensure requirePasswordChange is true when setRandomPassword is true

Created some logic to make sure the requirePasswordChange field will be true even if the user changed it to false and then changed setRandomPassword to true. Also changed some strings and sizes to follow figma specs.

* refactor: ♻️ Remove useEffect + reset usage of new user creation form

Removed un-optimal usage of the useEffect hook together with RHF's reset function, implemented a function that changes the requirePasswordChange value based on which setRandomPassword radio is checked, switched resetField for setValue to make sure the value is always correct, changed some rendering logic to make sure the first state of some fields is correct and optimized some parts of the getInitialValues function return.

* refactor: ♻️ Componentize setRandomPassword field content

Changed the name of the AdminUserSetRandomPassword component to AdminUserSetRandomPasswordRadios and created a new component called AdminUserSetRandomPasswordContent to organize and clean the AdminUserForm component.

* fix: 🐛 Refetch user form data after editing user

Implemented a refecthUserData function for the AdminuserInfoWithData component that will run when the handleUpdateUser mutation is succesful to refetch the user data of the edited user. This fixes a bug in which the user form would show the old data instead of the updated one.

* Move tabs component to Page instead of Page content

* Fix imports

* First test fix

* Fix create user test

* Fix tests

* Fix test typo

* Test fix
  • Loading branch information
rique223 authored Oct 23, 2023
1 parent df6c31d commit 809ca6c
Show file tree
Hide file tree
Showing 13 changed files with 537 additions and 278 deletions.
32 changes: 32 additions & 0 deletions apps/meteor/client/views/admin/users/AdminUserCreated.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Button, ButtonGroup, ContextualbarFooter } from '@rocket.chat/fuselage';
import { useRouter, useTranslation } from '@rocket.chat/ui-contexts';
import React, { useCallback } from 'react';

import { ContextualbarScrollableContent } from '../../../components/Contextualbar';

const AdminUserCreated = ({ uid, createdUsersCount }: { uid: string; createdUsersCount: number }) => {
const t = useTranslation();
const router = useRouter();

const goToUser = useCallback((id) => router.navigate(`/admin/users/info/${id}`), [router]);

return (
<>
<ContextualbarScrollableContent h='100%' fontScale='p1m'>
{createdUsersCount === 1 ? t('You_have_created_one_user') : t('You_have_created_users', { count: createdUsersCount })}
</ContextualbarScrollableContent>
<ContextualbarFooter>
<ButtonGroup stretch>
<Button type='reset' w='50%' onClick={() => router.navigate(`/admin/users/new`)}>
{t('Add_more_users')}
</Button>
<Button primary w='50%' onClick={() => goToUser(uid)}>
{t('Done')}
</Button>
</ButtonGroup>
</ContextualbarFooter>
</>
);
};

export default AdminUserCreated;
Loading

0 comments on commit 809ca6c

Please sign in to comment.