diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.sass b/ui/src/components/Modals/AddUserModal/AddUserModal.sass index 4aa9d0dd4..71f71a372 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.sass +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.sass @@ -55,4 +55,7 @@ .search-workspace width: 186px +.u-margin-left + margin-left : 20px + diff --git a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx index f8da350fd..451f27c9b 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -74,15 +74,6 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD (async () => { try { setEditMode(isEditMode) - if (isEditMode) { - - //const userDetails = await api.getUserDetails(userData) - //const data = {...userData,...userDetails} - - } - else{ - - } setUserData(userData as UserData) } catch (e) { toast.error("Error getting user details") @@ -98,6 +89,18 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD onCloseModal() setUserData({} as UserData) setInvite({sent:false,isSuceeded:false,link:""}) + setEditMode(false) + setDisable(true) + } + + const updateUser = async() =>{ + try { + const res = await api.updateUser(userDataModel) + onClose() + toast.success("User has been modified") + } catch (error) { + toast.error("Error accured modifing user") + } } const workspaceChange = (workspaces) => { @@ -125,8 +128,7 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD }; const isFormValid = () : boolean => { - return true; - //return (Object.values(userDataModel).length === 3) && Object.values(userDataModel).every(val => val !== null) + return (Object.values(userDataModel).length >= 3) && Object.values(userDataModel).every(val => val !== null) } const setGenarateDisabledState = () => { @@ -134,39 +136,59 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD setDisable(!isValid) } - const generateLink = () => { - try { - if (editMode) { - //await api.updateUser(userDataModel) - setInvite({...invite,isSuceeded:true,sent:true,link:"asdasdasdasdasdasdasdasdads"}) - toast.success("User has been modified") - } - else{ - //const res = await api.genareteInviteLink(userDataModel) - setInvite({...invite,isSuceeded:true,sent:true, link:"asdasdasdasdasdasdasdasdads"}) - toast.success("User has been added") - } + const mapTokenToLink = (token) => { + return`${window.location.origin}/${token}` + } - onUserChange(userDataModel) - + const generateLink = async() => { + try { + const res = await api.genareteInviteLink(userDataModel) + setInvite({...invite,isSuceeded:true,sent:true, link: mapTokenToLink(res.inviteToken)}) + toast.success("User has been added") + onUserChange(userDataModel) + } catch (e) { + toast.error("Error accrued generating link") + } + } + + const inviteExistingUser = async() => { + try { + const res = await api.inviteExistingUser(userDataModel.userId) + setInvite({...invite,isSuceeded:true,sent:true, link: mapTokenToLink(res.inviteToken)}) + toast.success("Invite link created") + onUserChange(userDataModel) } catch (e) { toast.error("Error accrued generating link") } - + } + + const isShowInviteLink = () => { + return ((invite.isSuceeded && invite.link)); + } + + const showGenerateButton = () => { + return (!invite.isSuceeded || !(invite.link && invite.sent)) } const handleCopyinviteLink = (e) => {navigator.clipboard.writeText(invite.link)} - const modalCustomActions = <> - {(!invite.isSuceeded || !(invite.link && invite.sent)) && } - {invite.isSuceeded && invite.link &&
- + { + isEditMode && + } + +
+ {isShowInviteLink() && Invite link = ({isOpen, onCloseModal, userD {} - } - label="Invite link" - /> - - -
} - ; + } + +
+ + ; return (<> + title={`${editMode ? "Edit" : "Add"} User`} customActions={addUsermodalCustomActions}>

DETAILS

diff --git a/ui/src/components/Pages/SettingsPage/SettingsPage.sass b/ui/src/components/Pages/SettingsPage/SettingsPage.sass index 0626845a3..846289ff7 100644 --- a/ui/src/components/Pages/SettingsPage/SettingsPage.sass +++ b/ui/src/components/Pages/SettingsPage/SettingsPage.sass @@ -1,23 +1,28 @@ @import "../../../variables.module" +@mixin tab-container + max-width: 513px + margin: 0 auto + .settings-page - max-width: 513px + background: #F7F9FC; display: flex; flex-direction: column; align-content: center; - justify-content: center; + /* justify-content: center; */ margin: 0 auto; + height: 100vh; - - & .tabs-nav padding-top: 0px; .header-section - margin-bottom: 30px; - background: #F7F9FC; + + + &__container + @include tab-container &__title @@ -25,5 +30,10 @@ color: $blue-gray font-weight: 600 margin-bottom: 60px; - margin-top: 20px; + margin-top: 20px; + +.tab-content + padding-top: 30px; + &__container + @include tab-container \ No newline at end of file diff --git a/ui/src/components/Pages/SettingsPage/SettingsPage.tsx b/ui/src/components/Pages/SettingsPage/SettingsPage.tsx index e60aed9e8..b3618d192 100644 --- a/ui/src/components/Pages/SettingsPage/SettingsPage.tsx +++ b/ui/src/components/Pages/SettingsPage/SettingsPage.tsx @@ -13,19 +13,22 @@ const AdminSettings: React.FC = ({color}) => { const [currentTab, setCurrentTab] = useState(TABS[0].tab); return (<>
-
-
Settings
- -
-
- - {currentTab === TABS[0].tab && - - } - {currentTab === TABS[1].tab && - - } -
+
+
+
Settings
+ +
+
+
+
+ {currentTab === TABS[0].tab && + + } + {currentTab === TABS[1].tab && + + } +
+
) diff --git a/ui/src/components/UserSettings/UserSettings.tsx b/ui/src/components/UserSettings/UserSettings.tsx index 09297c0eb..9045fa108 100644 --- a/ui/src/components/UserSettings/UserSettings.tsx +++ b/ui/src/components/UserSettings/UserSettings.tsx @@ -13,6 +13,11 @@ interface Props { const api = Api.getInstance(); +enum InviteStatus{ + active = "Active", + pending = "Pending" +} + export const UserSettings : React.FC = ({}) => { const [usersRows, setUserRows] = useState([]); @@ -20,7 +25,7 @@ export const UserSettings : React.FC = ({}) => { const cols : ColsType[] = [{field : "username",header:"User"}, {field : "role",header:"Role"}, {field : "status",header:"Status",getCellClassName : (field, val) =>{ - return val === "Active" ? "status--active" : "status--pending" + return val === InviteStatus.active ? "status--active" : "status--pending" }}] const [isOpenModal,setIsOpen] = useState(false) const [editMode, setEditMode] = useState(false); @@ -28,9 +33,13 @@ export const UserSettings : React.FC = ({}) => { const getUserList = (async () => { try { - let users = [{username:"asd",role:"Admin",status:"Active",userId : "1"}, - {username:"aaaaaaa",role:"User",status:"Active",userId : "2"}]//await api.getUsers() - setUserRows(users) + // let users = [{username:"asd",role:"Admin",status:"Active",userId : "1"}, + // {username:"asdasdasdasdasdasd",role:"User",status:"Active",userId : "2"}] + let users = await api.getUsers() + const mappedUsers = users.map((user) => { + return {...user,status: capitalizeFirstLetter(user.status), role: capitalizeFirstLetter(user.role)} + }) + setUserRows(mappedUsers) } catch (e) { console.error(e); } @@ -41,6 +50,10 @@ export const UserSettings : React.FC = ({}) => { getUserList(); },[]) + function capitalizeFirstLetter(string) { + return string.charAt(0).toUpperCase() + string.slice(1); + } + const filterFuncFactory = (searchQuery: string) => { return (row) => { return row.username.toLowerCase().includes(searchQuery.toLowerCase()) || @@ -64,7 +77,7 @@ export const UserSettings : React.FC = ({}) => { const onConfirmDelete = () => { (async() => { try { - //await api.deleteUser(user) + await api.deleteUser(userData) const findFunc = filterFuncFactory(userData.userId); const usersLeft = usersRows.filter(e => !findFunc(e)) setUserRows(usersLeft) @@ -72,6 +85,7 @@ export const UserSettings : React.FC = ({}) => { } catch (error) { toast.error("User want not deleted") } + setConfirmModalOpen(false); })() } @@ -85,7 +99,7 @@ export const UserSettings : React.FC = ({}) => { getUserList() } - const buttonConfig = {onClick: () => {setIsOpen(true)}, text:"Add User"} + const buttonConfig = {onClick: () => {setIsOpen(true);setEditMode(false);}, text:"Add User"} return (<> { + inviteExistingUser = async(userId) =>{ + const response = await this.client.post(`/user/${userId}/invite`); + return response.data; + } + + genareteInviteLink = async(userData) =>{ const response = await this.client.post(`/user/createUserAndInvite`,userData); return response.data; } @@ -223,6 +228,7 @@ export default class Api { } } } + login = async (username, password) => { const form = new FormData();