'init'
This commit is contained in:
rosetta
143
app/views/Profile/MyProfile.tsx
Normal file
143
app/views/Profile/MyProfile.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import { ColorSwatch, Text, useComputedColorScheme } from "@mantine/core";
|
||||
import { SettingsInput } from "@/app/components/SettingsInput/SettingsInput";
|
||||
import { useState } from "react";
|
||||
import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
|
||||
import { PacketUserInfo } from "@/app/providers/ProtocolProvider/protocol/packets/packet.userinfo";
|
||||
import { PacketResult, ResultCode } from "@/app/providers/ProtocolProvider/protocol/packets/packet.result";
|
||||
import { ProfileCard } from "@/app/components/ProfileCard/ProfileCard";
|
||||
import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
|
||||
import { OnlineState } from "@/app/providers/ProtocolProvider/protocol/packets/packet.onlinestate";
|
||||
import { usePrivateKeyHash } from "@/app/providers/AccountProvider/usePrivateKeyHash";
|
||||
import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
|
||||
import { useSender } from "@/app/providers/ProtocolProvider/useSender";
|
||||
import { usePacket } from "@/app/providers/ProtocolProvider/usePacket";
|
||||
import { SettingsIcon } from "@/app/components/SettingsIcon/SettingsIcon";
|
||||
import { IconBrush, IconHomeCog, IconLogout, IconRefresh } from "@tabler/icons-react";
|
||||
import { useLogout } from "@/app/providers/AccountProvider/useLogout";
|
||||
import { RosettaPower } from "@/app/components/RosettaPower/RosettaPower";
|
||||
|
||||
export function MyProfile() {
|
||||
const publicKey = usePublicKey();
|
||||
const [userInfo, updateUserInformation] = useUserInformation(publicKey);
|
||||
const privateKey = usePrivateKeyHash();
|
||||
const [title, setTitle] = useState(userInfo.title);
|
||||
const [username, setUsername] = useState(userInfo.username);
|
||||
const colorScheme = useComputedColorScheme();
|
||||
const navigate = useNavigate();
|
||||
const send = useSender();
|
||||
const logout = useLogout();
|
||||
|
||||
const saveProfileData = () => {
|
||||
let packet = new PacketUserInfo();
|
||||
packet.setUsername(username);
|
||||
packet.setTitle(title);
|
||||
packet.setPrivateKey(privateKey);
|
||||
send(packet);
|
||||
}
|
||||
usePacket(0x2, function (packet : PacketResult) {
|
||||
switch (packet.getResultCode()) {
|
||||
case ResultCode.SUCCESS:
|
||||
updateUserInformation({
|
||||
username: username,
|
||||
title: title,
|
||||
publicKey: publicKey,
|
||||
online: OnlineState.OFFLINE,
|
||||
verified: userInfo.verified
|
||||
});
|
||||
break;
|
||||
}
|
||||
}, [title, username]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Breadcrumbs onClick={saveProfileData} text="Profile"></Breadcrumbs>
|
||||
<InternalScreen>
|
||||
<ProfileCard
|
||||
title={title}
|
||||
publicKey={publicKey}
|
||||
username={username}
|
||||
verified={userInfo.verified}
|
||||
></ProfileCard>
|
||||
<SettingsInput.Group>
|
||||
<SettingsInput.Default
|
||||
hit="Your name"
|
||||
placeholder="ex. Freddie Gibson"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
></SettingsInput.Default>
|
||||
<SettingsInput.Default
|
||||
hit="Username"
|
||||
value={username}
|
||||
placeholder="ex. freddie871"
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
></SettingsInput.Default>
|
||||
</SettingsInput.Group>
|
||||
<SettingsInput.Copy mt={'sm'} hit="Public Key" value={
|
||||
publicKey
|
||||
} placeholder="Public"></SettingsInput.Copy>
|
||||
<Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
|
||||
This is your public key. If you haven't set a @username yet, you can ask a friend to message you using your public key.
|
||||
</Text>
|
||||
<SettingsInput.Clickable
|
||||
settingsIcon={
|
||||
<SettingsIcon bg="var(--mantine-color-lime-6)"
|
||||
icon={IconRefresh}>
|
||||
</SettingsIcon>
|
||||
}
|
||||
hit="Updates"
|
||||
onClick={() => navigate('/main/update')}
|
||||
mt={'sm'}
|
||||
></SettingsInput.Clickable>
|
||||
<Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
|
||||
You can check for new versions of the app here. Updates may include security improvements and new features.
|
||||
</Text>
|
||||
<SettingsInput.Clickable
|
||||
settingsIcon={
|
||||
<SettingsIcon bg={'indigo'}
|
||||
icon={IconBrush}>
|
||||
</SettingsIcon>
|
||||
}
|
||||
onClick={() => navigate('/main/theme')} mt={'sm'} hit="Theme" rightSection={
|
||||
<ColorSwatch color={
|
||||
colorScheme == 'light' ? '#000' : '#FFF'
|
||||
} size={20}></ColorSwatch>
|
||||
}></SettingsInput.Clickable>
|
||||
<Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
|
||||
You can change the theme.
|
||||
</Text>
|
||||
<SettingsInput.Clickable
|
||||
settingsIcon={
|
||||
<SettingsIcon bg="grape"
|
||||
icon={IconHomeCog}>
|
||||
</SettingsIcon>
|
||||
}
|
||||
hit="Safety"
|
||||
onClick={() => navigate('/main/safety')}
|
||||
mt={'sm'}
|
||||
></SettingsInput.Clickable>
|
||||
<Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
|
||||
You can learn more about your safety on the safety page,
|
||||
please make sure you are viewing the screen alone <strong>before proceeding to the safety page</strong>.
|
||||
</Text>
|
||||
<SettingsInput.Clickable
|
||||
settingsIcon={
|
||||
<SettingsIcon bg={'red'}
|
||||
icon={IconLogout}>
|
||||
</SettingsIcon>
|
||||
}
|
||||
hit={'Logout'}
|
||||
mt={'sm'}
|
||||
onClick={logout}
|
||||
rightChevronHide
|
||||
c={'red'}
|
||||
></SettingsInput.Clickable>
|
||||
<Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
|
||||
Logging out of your account. After logging out, you will be redirected to the password entry page.
|
||||
</Text>
|
||||
<RosettaPower mt={'lg'}></RosettaPower>
|
||||
</InternalScreen>
|
||||
</>
|
||||
);
|
||||
}
|
||||
68
app/views/Profile/OtherProfile.tsx
Normal file
68
app/views/Profile/OtherProfile.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import { Breadcrumbs } from "@/app/components/Breadcrumbs/Breadcrumbs";
|
||||
import { InternalScreen } from "@/app/components/InternalScreen/InternalScreen";
|
||||
import { ProfileCard } from "@/app/components/ProfileCard/ProfileCard";
|
||||
import { SettingsInput } from "@/app/components/SettingsInput/SettingsInput";
|
||||
import { useBlacklist } from "@/app/providers/BlacklistProvider/useBlacklist";
|
||||
import { useUserInformation } from "@/app/providers/InformationProvider/useUserInformation";
|
||||
import { Text } from "@mantine/core";
|
||||
|
||||
interface OtherProfileProps {
|
||||
publicKey: string;
|
||||
}
|
||||
|
||||
export function OtherProfile(props : OtherProfileProps) {
|
||||
const [userInfo] = useUserInformation(props.publicKey);
|
||||
const [blocked, blockUser, unblockUser] = useBlacklist(userInfo.publicKey);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Breadcrumbs text={userInfo.title}></Breadcrumbs>
|
||||
<InternalScreen>
|
||||
<ProfileCard
|
||||
title={userInfo.title}
|
||||
publicKey={userInfo.publicKey}
|
||||
username={userInfo.username}
|
||||
verified={userInfo.verified}
|
||||
></ProfileCard>
|
||||
{userInfo.username.trim() != "" && (
|
||||
<>
|
||||
<SettingsInput.Copy mt={'sm'} hit="Username" value={
|
||||
userInfo.username
|
||||
} placeholder="Public"></SettingsInput.Copy>
|
||||
<Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
|
||||
Username for search user or send message.
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
<SettingsInput.Copy mt={'sm'} hit="Public Key" value={
|
||||
userInfo.publicKey
|
||||
} placeholder="Public"></SettingsInput.Copy>
|
||||
<Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
|
||||
This is user public key. If user haven't set a @username yet, you can send message using your public key.
|
||||
</Text>
|
||||
{blocked && (<>
|
||||
<SettingsInput.Clickable mt={'sm'} c={'green'}
|
||||
hit="Unblock user"
|
||||
onClick={unblockUser}
|
||||
rightChevronHide
|
||||
>
|
||||
</SettingsInput.Clickable>
|
||||
<Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
|
||||
If you want the user to be able to send you messages again, you can unblock them. You can block them later.
|
||||
</Text>
|
||||
</>)}
|
||||
{!blocked && (<>
|
||||
<SettingsInput.Clickable mt={'sm'} c={'red'}
|
||||
hit="Block this user"
|
||||
onClick={blockUser}
|
||||
rightChevronHide
|
||||
>
|
||||
</SettingsInput.Clickable>
|
||||
<Text fz={10} mt={3} c={'gray'} pl={'xs'} pr={'xs'}>
|
||||
The person will no longer be able to message you if you block them. You can unblock them later.
|
||||
</Text>
|
||||
</>)}
|
||||
</InternalScreen>
|
||||
</>
|
||||
);
|
||||
}
|
||||
9
app/views/Profile/Profile.module.css
Normal file
9
app/views/Profile/Profile.module.css
Normal file
@@ -0,0 +1,9 @@
|
||||
.icon {
|
||||
color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
|
||||
}
|
||||
|
||||
.name {
|
||||
font-family:
|
||||
Greycliff CF,
|
||||
var(--mantine-font-family);
|
||||
}
|
||||
16
app/views/Profile/Profile.tsx
Normal file
16
app/views/Profile/Profile.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { MyProfile } from "./MyProfile";
|
||||
import { OtherProfile } from "./OtherProfile";
|
||||
import { usePublicKey } from "@/app/providers/AccountProvider/usePublicKey";
|
||||
|
||||
export function Profile() {
|
||||
const params = useParams();
|
||||
const publicKey = usePublicKey();
|
||||
|
||||
return (
|
||||
<>
|
||||
{params.id == "me" || params.id == publicKey ? <MyProfile></MyProfile> :
|
||||
<OtherProfile publicKey={params.id!}></OtherProfile>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user