Feature/saajan persona (#3)

* feat: add template based email content (html + plaintext fallback)

* feat: init saajan component

* feat: add aesthetic noise background and implement Saajan component in register and login

* feat: add post seal modal for vault

* refactor: add proper props interfaces

* refactor: expose props on ui components

* feat: add ssajan in lots of flows

* fix: remove render test with no value and add aria helper for btn identification

* refactor: update email notification to account for proper arguments

* refactor:  refactor E2E auth helper and mail parsing logic

---------

Co-authored-by: ramvignesh-b <ramvignesh-b@github.com>

frontend/src/components/ui/FormField.tsx

@@ -6,6 +6,7 @@ interface FormFieldProps {
   placeholder?: string;
   registration: UseFormRegisterReturn;
   error?: string;
+  handleFocus?: () => void;
 }
 
 export default function FormField({
@@ -14,6 +15,7 @@ export default function FormField({
   placeholder,
   registration,
   error,
+  handleFocus,
 }: FormFieldProps) {
   return (
     <div className="form-control">
@@ -31,6 +33,7 @@ export default function FormField({
         className={`input input-bordered focus:input-primary ${
           error ? "input-error" : ""
         }`}
+        onFocus={handleFocus}
       />
       {error && <p className="text-error">{error}</p>}
     </div>

frontend/src/components/ui/Saajan.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import sf_mini from "../../assets/sf_mini.png";
+
+interface SaajanProps {
+  message: string;
+  position?: "top" | "left" | "right" | "bottom";
+}
+
+export default function Saajan({ message, position = "right" }: SaajanProps) {
+  const [animate, setAnimate] = useState<boolean>(false);
+  const [tooltipPosition, setTooltipPosition] =
+    useState<string>("tooltip-right");
+  const [alignment, setAlignment] = useState<string>("justify-start");
+
+  useEffect(() => {
+    setAnimate(true);
+    const timeout = setTimeout(() => {
+      setAnimate(false);
+    }, 1000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  useEffect(() => {
+    setTooltipPosition(`tooltip-${position}`);
+    if (position === "top") {
+      setAlignment("justify-center");
+    }
+    if (position === "right") {
+      setAlignment("justify-start");
+    }
+    if (position === "left") {
+      setAlignment("justify-end");
+    }
+  }, [position]);
+
+  return (
+    <div className={`relative w-full flex ${alignment}`}>
+      <div
+        className={`tooltip tooltip-open ${tooltipPosition} before:max-w-xs before:whitespace-pre-line italic before:text-left`}
+        data-tip={message}
+      >
+        <img
+          src={sf_mini}
+          alt="saajan"
+          className={`sepia-20 w-35 -mb-3 ${animate ? "animate-[pulse_.5s_ease_2]" : ""}`}
+        />
+      </div>
+    </div>
+  );
+}