feat: add parent PIN setup functionality and email notifications

- Implemented User model updates to include PIN and related fields.
- Created email sender utility for sending verification and reset emails.
- Developed ParentPinSetup component for setting up a parent PIN with verification code.
- Enhanced UserProfile and EntityEditForm components to support new features.
- Updated routing to include PIN setup and authentication checks.
- Added styles for new components and improved existing styles for consistency.
- Introduced loading states and error handling in various components.

frontend/vue-app/src/assets/edit-forms.css

@@ -11,16 +11,6 @@
   padding: 2rem 2.2rem 1.5rem 2.2rem;
 }
 
-.profile-view h2,
-.edit-view h2,
-.child-edit-view h2,
-.reward-edit-view h2,
-.task-edit-view h2 {
-  text-align: center;
-  margin-bottom: 1.5rem;
-  color: var(--form-heading);
-}
-
 .profile-form,
 .task-form,
 .reward-form,

frontend/vue-app/src/assets/styles.css

@@ -1,3 +1,12 @@
+/* Edit view container for forms */
+.edit-view {
+  max-width: 400px;
+  margin: 2rem auto;
+  background: var(--form-bg);
+  border-radius: 12px;
+  box-shadow: 0 4px 24px var(--form-shadow);
+  padding: 2rem 2.2rem 1.5rem 2.2rem;
+}
 /*buttons*/
 .btn {
   font-weight: 600;
@@ -98,3 +107,15 @@
   background: var(--sign-in-btn-hover-bg);
   color: var(--sign-in-btn-hover-color);
 }
+
+/* Errors and info*/
+.info-message {
+  color: var(--info-points, #2563eb);
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}
+.error-message {
+  color: var(--error, #e53e3e);
+  font-size: 1rem;
+  margin-top: 0.5rem;
+}