updates on the ui changes and table
This commit is contained in:
@@ -16,6 +16,7 @@ import { Divider } from '@astryxdesign/core/Divider';
|
||||
|
||||
import Loader from 'components/Loader';
|
||||
import PageHeader from 'components/nearle_components/PageHeader';
|
||||
import { PageShell } from 'components/nearle_components/PageLayout';
|
||||
import { getusers } from 'pages/api/api';
|
||||
import { updateProfilePassword } from 'pages/api/doormileApi';
|
||||
import { DT } from 'themes/dt/tokens';
|
||||
@@ -110,73 +111,75 @@ const ViewProfile = () => {
|
||||
<>
|
||||
{isLoading && <Loader />}
|
||||
|
||||
<PageHeader title="My Profile" subtitle="Account & Security" />
|
||||
<PageShell>
|
||||
<PageHeader title="My Profile" subtitle="Account & Security" />
|
||||
|
||||
<Card padding={4} elevation="none" style={{ marginTop: 16, marginBottom: 20 }}>
|
||||
<HStack gap={3} vAlign="center" wrap="wrap">
|
||||
<Avatar name={fullname} size={72} tooltip={false} />
|
||||
<VStack gap={2} padding={0}>
|
||||
<Text type="heading" weight="bold">
|
||||
{fullname}
|
||||
</Text>
|
||||
<HStack gap={2} vAlign="center" wrap="wrap">
|
||||
{roleLabel !== '—' && <Badge variant="neutral" icon={<MdVerifiedUser size={14} />} label={roleLabel} />}
|
||||
{(userData?.id != null || userData?.userid != null) && (
|
||||
<Text color="secondary" weight="semibold">
|
||||
ID #{userData.id ?? userData.userid}
|
||||
</Text>
|
||||
)}
|
||||
<HStack gap={1} vAlign="center">
|
||||
<MdLocationOn size={15} color={DT.textSecondary} />
|
||||
<Text color="secondary" weight="semibold">
|
||||
{tenantLabel}
|
||||
</Text>
|
||||
<Card padding={4} elevation="none">
|
||||
<HStack gap={3} vAlign="center" wrap="wrap">
|
||||
<Avatar name={fullname} size={72} tooltip={false} />
|
||||
<VStack gap={2} padding={0}>
|
||||
<Text type="heading" weight="bold">
|
||||
{fullname}
|
||||
</Text>
|
||||
<HStack gap={2} vAlign="center" wrap="wrap">
|
||||
{roleLabel !== '—' && <Badge variant="neutral" icon={<MdVerifiedUser size={14} />} label={roleLabel} />}
|
||||
{(userData?.id != null || userData?.userid != null) && (
|
||||
<Text color="secondary" weight="semibold">
|
||||
ID #{userData.id ?? userData.userid}
|
||||
</Text>
|
||||
)}
|
||||
<HStack gap={1} vAlign="center">
|
||||
<MdLocationOn size={15} color={DT.textSecondary} />
|
||||
<Text color="secondary" weight="semibold">
|
||||
{tenantLabel}
|
||||
</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</HStack>
|
||||
</Card>
|
||||
</VStack>
|
||||
</HStack>
|
||||
</Card>
|
||||
|
||||
<Grid columns={{ minWidth: 320 }} gap={3}>
|
||||
<SectionCard title="Account" icon={MdBadge}>
|
||||
<VStack gap={4} padding={0}>
|
||||
<InfoField icon={MdPerson} label="User Name" value={userData?.name || userData?.fullname} />
|
||||
<InfoField icon={MdBadge} label="User ID" value={userData?.id ?? userData?.userid} />
|
||||
<InfoField icon={MdMail} label="E-Mail" value={userData?.email} accent="#0ea5e9" />
|
||||
<InfoField icon={MdVerifiedUser} label="Role" value={roleLabel} />
|
||||
<InfoField icon={MdLocationOn} label="Tenant" value={tenantLabel} accent="#14b8a6" />
|
||||
</VStack>
|
||||
</SectionCard>
|
||||
<Grid columns={{ minWidth: 320, repeat: 'fit' }} gap={3}>
|
||||
<SectionCard title="Account" icon={MdBadge}>
|
||||
<VStack gap={4} padding={0}>
|
||||
<InfoField icon={MdPerson} label="User Name" value={userData?.name || userData?.fullname} />
|
||||
<InfoField icon={MdBadge} label="User ID" value={userData?.id ?? userData?.userid} />
|
||||
<InfoField icon={MdMail} label="E-Mail" value={userData?.email} accent="#0ea5e9" />
|
||||
<InfoField icon={MdVerifiedUser} label="Role" value={roleLabel} />
|
||||
<InfoField icon={MdLocationOn} label="Tenant" value={tenantLabel} accent="#14b8a6" />
|
||||
</VStack>
|
||||
</SectionCard>
|
||||
|
||||
<SectionCard title="Security" icon={MdShield}>
|
||||
<VStack gap={3} padding={0}>
|
||||
<TextInput
|
||||
label="Current Password"
|
||||
type="password"
|
||||
value={currentPassword}
|
||||
onChange={setCurrentPassword}
|
||||
placeholder="Current password"
|
||||
/>
|
||||
<TextInput label="New Password" type="password" value={newPassword} onChange={setNewPassword} placeholder="New password" />
|
||||
<TextInput
|
||||
label="Confirm New Password"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={setConfirmPassword}
|
||||
placeholder="Confirm new password"
|
||||
/>
|
||||
<Divider />
|
||||
<Button
|
||||
label="Update Password"
|
||||
variant="primary"
|
||||
icon={<MdLock size={16} />}
|
||||
onClick={handleChangePassword}
|
||||
isLoading={changePasswordMutation.isPending}
|
||||
style={{ alignSelf: 'flex-start' }}
|
||||
/>
|
||||
</VStack>
|
||||
</SectionCard>
|
||||
</Grid>
|
||||
<SectionCard title="Security" icon={MdShield}>
|
||||
<VStack gap={3} padding={0}>
|
||||
<TextInput
|
||||
label="Current Password"
|
||||
type="password"
|
||||
value={currentPassword}
|
||||
onChange={setCurrentPassword}
|
||||
placeholder="Current password"
|
||||
/>
|
||||
<TextInput label="New Password" type="password" value={newPassword} onChange={setNewPassword} placeholder="New password" />
|
||||
<TextInput
|
||||
label="Confirm New Password"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={setConfirmPassword}
|
||||
placeholder="Confirm new password"
|
||||
/>
|
||||
<Divider />
|
||||
<Button
|
||||
label="Update Password"
|
||||
variant="primary"
|
||||
icon={<MdLock size={16} />}
|
||||
onClick={handleChangePassword}
|
||||
isLoading={changePasswordMutation.isPending}
|
||||
style={{ alignSelf: 'flex-start' }}
|
||||
/>
|
||||
</VStack>
|
||||
</SectionCard>
|
||||
</Grid>
|
||||
</PageShell>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user