From b89820fe866accb50644efc1a80a85818a07ceb7 Mon Sep 17 00:00:00 2001 From: Leon <> Date: Sun, 30 Jan 2022 12:08:52 +0200 Subject: [PATCH 1/2] changes --- .../Pages/SettingsPage/SettingsPage.sass | 24 ++++++++++----- .../Pages/SettingsPage/SettingsPage.tsx | 29 ++++++++++--------- .../components/UserSettings/UserSettings.tsx | 2 +- 3 files changed, 34 insertions(+), 21 deletions(-) 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 ab591be60..c9b583e72 100644 --- a/ui/src/components/UserSettings/UserSettings.tsx +++ b/ui/src/components/UserSettings/UserSettings.tsx @@ -38,7 +38,7 @@ 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() + {username:"asdasdasdasdasdasd",role:"User",status:"Active",userId : "2"}]//await api.getUsers() setUserRows(users) } catch (e) { console.error(e); From 1a7e4a90c9242ecf58518f27acfe121d0530405d Mon Sep 17 00:00:00 2001 From: Leon <> Date: Mon, 31 Jan 2022 15:33:00 +0200 Subject: [PATCH 2/2] changes --- .../Modals/AddUserModal/AddUserModal.sass | 3 + .../Modals/AddUserModal/AddUserModal.tsx | 105 +++++++++++------- .../components/UserSettings/UserSettings.tsx | 26 ++++- ui/src/helpers/api.js | 44 ++++---- 4 files changed, 112 insertions(+), 66 deletions(-) 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 ba5fabae4..39ce42118 100644 --- a/ui/src/components/Modals/AddUserModal/AddUserModal.tsx +++ b/ui/src/components/Modals/AddUserModal/AddUserModal.tsx @@ -60,6 +60,7 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD "name": "test" } ].map((obj) => {return {key:obj.id, value:obj.name,isChecked:false}}) + //await api.getWorkspaces() setWorkspaces(workspacesList) @@ -73,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") @@ -97,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) => { @@ -124,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 = () => { @@ -133,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

@@ -225,7 +248,7 @@ export const AddUserModal: FC = ({isOpen, onCloseModal, userD onChange={(event) => setSearchValue(event.target.value)}/>
+ setValues= {workspaceChange} tabelClassName={''}> diff --git a/ui/src/components/UserSettings/UserSettings.tsx b/ui/src/components/UserSettings/UserSettings.tsx index c9b583e72..1aeb90a9a 100644 --- a/ui/src/components/UserSettings/UserSettings.tsx +++ b/ui/src/components/UserSettings/UserSettings.tsx @@ -22,6 +22,11 @@ interface Props { const api = Api.getInstance(); +enum InviteStatus{ + active = "Active", + pending = "Pending" +} + export const UserSettings : React.FC = ({}) => { const [usersRows, setUserRows] = useState([]); @@ -29,7 +34,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); @@ -37,9 +42,13 @@ export const UserSettings : React.FC = ({}) => { const getUserList = (async () => { try { - let users = [{username:"asd",role:"Admin",status:"Active",userId : "1"}, - {username:"asdasdasdasdasdasd",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); } @@ -50,6 +59,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()) || @@ -73,7 +86,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) @@ -81,6 +94,7 @@ export const UserSettings : React.FC = ({}) => { } catch (error) { toast.error("User want not deleted") } + setConfirmModalOpen(false); })() } @@ -94,7 +108,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; } getWorkspaces = async() =>{ - const response = await this.client.get(``); + const response = await this.client.get(`/workspace`); return response.data; } @@ -167,26 +172,27 @@ export default class Api { } register = async (username, password) => { - const form = new FormData(); - form.append('username', username); - form.append('password', password); - try { - const response = await this.client.post(`/user/register`, form); - this.persistToken(response.data.token); - return response; - } catch (e) { - if (e.response.status === 400) { - const error = { - 'type': FormValidationErrorType, - 'messages': e.response.data - }; - throw error; - } else { - throw e; + const form = new FormData(); + form.append('password', password); + + try { + const response = await this.client.post(`/install/admin`, form); + this.persistToken(response.data.token); + return response; + } catch (e) { + if (e.response.status === 400) { + const error = { + 'type': FormValidationErrorType, + 'messages': e.response.data + }; + throw error; + } else { + throw e; + } } } - } + login = async (username, password) => { const form = new FormData();