added creation date to AliasNote

src/constants/values.ts

@@ -7,6 +7,7 @@ export const URL_REGEX =
 export const DEFAULT_ALIAS_NOTE: AliasNote = {
 	version: "1.0",
 	data: {
+		createdAt: null,
 		personalNotes: "",
 		websites: [],
 	},

src/route-widgets/AliasDetailRoute/AliasNotesForm.tsx

@@ -2,6 +2,7 @@ import * as yup from "yup"
 import {TiDelete} from "react-icons/ti"
 import {AxiosError} from "axios"
 import {ReactElement, useContext} from "react"
+import {MdEditCalendar} from "react-icons/md"
 import {RiLinkM, RiStickyNoteFill} from "react-icons/ri"
 import {FieldArray, FormikProvider, useFormik} from "formik"
 import update from "immutability-helper"
@@ -20,6 +21,8 @@ import {
 	ListItemSecondaryAction,
 	ListItemText,
 	TextField,
+	Tooltip,
+	Typography,
 } from "@mui/material"
 
 import {URL_REGEX} from "~/constants/values"
@@ -28,6 +31,7 @@ import {BackupImage, ErrorSnack, SuccessSnack} from "~/components"
 import {Alias, AliasNote, DecryptedAlias} from "~/server-types"
 import {UpdateAliasData, updateAlias} from "~/apis"
 import AuthContext from "~/AuthContext/AuthContext"
+import format from "date-fns/format"
 
 export interface AliasNotesFormProps {
 	id: string
@@ -153,6 +157,29 @@ export default function AliasNotesForm({
 		<>
 			<form onSubmit={formik.handleSubmit}>
 				<Grid container spacing={4} direction="column">
+					{notes.data.createdAt && (
+						<Grid item>
+							<Grid
+								container
+								spacing={1}
+								flexDirection="row"
+								alignItems="center"
+							>
+								<Grid item>
+									<MdEditCalendar />
+								</Grid>
+								<Grid item>
+									<Tooltip
+										title={notes.data.createdAt.toISOString()}
+									>
+										<Typography variant="body1">
+											{format(notes.data.createdAt, "Pp")}
+										</Typography>
+									</Tooltip>
+								</Grid>
+							</Grid>
+						</Grid>
+					)}
 					<Grid item>
 						<TextField
 							label="Personal Notes"

src/route-widgets/AliasesRoute/CreateAliasButton.tsx

@@ -1,8 +1,9 @@
-import {ReactElement, useState} from "react"
+import {ReactElement, useContext, useState} from "react"
 import {MdArrowDropDown} from "react-icons/md"
 import {BsArrowClockwise} from "react-icons/bs"
 import {FaPen} from "react-icons/fa"
 import {AxiosError} from "axios"
+import update from "immutability-helper"
 
 import {
 	Button,
@@ -19,6 +20,8 @@ import {CreateAliasData, createAlias} from "~/apis"
 import {Alias, AliasType} from "~/server-types"
 import {parseFastAPIError} from "~/utils"
 import {ErrorSnack, SuccessSnack} from "~/components"
+import {DEFAULT_ALIAS_NOTE} from "~/constants/values"
+import AuthContext, {EncryptionStatus} from "~/AuthContext/AuthContext"
 import CustomAliasDialog from "~/route-widgets/AliasesRoute/CustomAliasDialog"
 
 export interface CreateAliasButtonProps {
@@ -28,16 +31,39 @@ export interface CreateAliasButtonProps {
 export default function CreateAliasButton({
 	onCreated,
 }: CreateAliasButtonProps): ReactElement {
+	const {_encryptUsingMasterPassword, encryptionStatus} =
+		useContext(AuthContext)
+
 	const [errorMessage, setErrorMessage] = useState<string>("")
+
 	const {mutateAsync, isLoading, isSuccess} = useMutation<
 		Alias,
 		AxiosError,
 		CreateAliasData
-	>(values => createAlias(values), {
-		onSuccess: onCreated,
-		onError: error =>
-			setErrorMessage(parseFastAPIError(error).detail as string),
-	})
+	>(
+		async values => {
+			if (encryptionStatus === EncryptionStatus.Available) {
+				values.encryptedNotes = await _encryptUsingMasterPassword(
+					JSON.stringify(
+						update(DEFAULT_ALIAS_NOTE, {
+							data: {
+								createdAt: {
+									$set: new Date(),
+								},
+							},
+						}),
+					),
+				)
+			}
+
+			return createAlias(values)
+		},
+		{
+			onSuccess: onCreated,
+			onError: error =>
+				setErrorMessage(parseFastAPIError(error).detail as string),
+		},
+	)
 
 	const [showCustomCreateDialog, setShowCustomCreateDialog] =
 		useState<boolean>(false)

src/routes/AliasDetailRoute.tsx

@@ -14,7 +14,7 @@ import AuthContext, {EncryptionStatus} from "~/AuthContext/AuthContext"
 export default function AliasDetailRoute(): ReactElement {
 	const params = useParams()
 	const address = atob(params.addressInBase64 as string)
-	const {user, _decryptUsingMasterPassword, encryptionStatus} =
+	const {_decryptUsingMasterPassword, encryptionStatus} =
 		useContext(AuthContext)
 
 	const query = useQuery<Alias | DecryptedAlias, AxiosError>(

src/server-types.ts

@@ -95,10 +95,10 @@ export interface Alias {
 export interface AliasNote {
 	version: "1.0"
 	data: {
+		createdAt: Date | null
 		personalNotes: string
 		websites: Array<{
 			url: string
-			createdAt: Date
 		}>
 	}
 }

src/utils/decrypt-alias-notes.ts

@@ -1,4 +1,6 @@
-import {Alias, DecryptedAlias} from "~/server-types"
+import update from "immutability-helper"
+
+import {Alias, AliasNote, DecryptedAlias} from "~/server-types"
 import {AuthContextType} from "~/AuthContext/AuthContext"
 import {DEFAULT_ALIAS_NOTE} from "~/constants/values"
 
@@ -9,12 +11,22 @@ export default function decryptAliasNotes(
 	if (!alias.encryptedNotes) {
 		return {
 			...alias,
-			notes: DEFAULT_ALIAS_NOTE,
+			notes: update(DEFAULT_ALIAS_NOTE, {}),
 		}
 	}
 
 	return {
 		...alias,
-		notes: JSON.parse(decryptContent(alias.encryptedNotes)),
+		notes: update<AliasNote>(
+			JSON.parse(decryptContent(alias.encryptedNotes)),
+			{
+				data: {
+					createdAt: {
+						$apply: createdAt =>
+							createdAt ? new Date(createdAt) : null,
+					},
+				},
+			},
+		),
 	}
 }