From 166a039a6de4c911da2d7400b82f89c3dfac0097 Mon Sep 17 00:00:00 2001 From: supunijayasinghe Date: Mon, 18 Aug 2025 22:36:37 +0530 Subject: [PATCH 1/4] link the register and login pages to home page --- blissme-app/src/app/signIn/Login.tsx | 19 +- blissme-app/src/app/signUp/Register.tsx | 222 +++++++++++++----------- 2 files changed, 133 insertions(+), 108 deletions(-) diff --git a/blissme-app/src/app/signIn/Login.tsx b/blissme-app/src/app/signIn/Login.tsx index 535b4e0..9cd97c8 100644 --- a/blissme-app/src/app/signIn/Login.tsx +++ b/blissme-app/src/app/signIn/Login.tsx @@ -16,6 +16,8 @@ import { getUserPreferences } from "../../redux/actions/userActions"; import { useDispatch } from "react-redux"; import { AppDispatch } from "../../redux/store"; import { assets } from "../../assets/assets"; +import logo from "../../assets/images/logo.png"; + const { Text } = Typography; const Login = () => { @@ -24,6 +26,7 @@ const Login = () => { const { setToken } = useContext(AuthContext); const { openNotification } = useNotification(); const dispatch = useDispatch(); + const handleLogoClick = () => navigate('/home'); const onFinish = async (values: any) => { try { @@ -77,8 +80,16 @@ const Login = () => { className="relative z-0 min-h-screen w-full overflow-hidden bg-cover bg-center" style={{ backgroundImage: `url(${bg7})` }} > -
-
+
+ Logo +
+
+
{/* Message Bubble on top */} @@ -151,7 +162,7 @@ const Login = () => { /> -
+
Remember me @@ -213,7 +224,7 @@ const Login = () => {
- + Don’t have an account?{" "} { } }; + const handleLogoClick = () => navigate('/home'); + + interface RegisterFormValues { email: string; password: string; @@ -107,7 +111,17 @@ const Register = () => { className="relative z-0 min-h-screen w-full overflow-hidden bg-cover bg-center" style={{ backgroundImage: `url(${bg6})` }} > -
+
+ Logo +
+ + +
@@ -255,112 +269,112 @@ const Register = () => { {/* Terms Modal */} setModalVisible(false)} - onOk={() => setModalVisible(false)} - okButtonProps={{ disabled: !scrolledToBottom }} - bodyStyle={{ padding: 0 }} // remove default padding -> -
setModalVisible(false)} + onOk={() => setModalVisible(false)} + okButtonProps={{ disabled: !scrolledToBottom }} + bodyStyle={{ padding: 0 }} // remove default padding + > +
-

- Consent and Privacy Policy -

-

- Welcome to Bliss Me. Please read this carefully before using our services. By clicking “I Agree”, you consent to the following: -

-
    -
  1. - - Purpose of the Application - -

    Bliss Me uses Artificial Intelligence to detect depression severity through your text and voice inputs.

    -
      -
    • For mild to moderate depression, the app provides non-clinical therapeutic support such as Cognitive Behavioral Therapy (CBT)-based exercises and mindfulness techniques.
      • -
    • For severe depression, the app will not provide therapy. Instead, you will be given options to contact a mental health consultant or emergency services for professional assistance.
      • -
    -
    2. - -
  2. - - Information We Collect - -

    To assess your emotional state and depression level, we collect:

    -
      -
    • Text and voice inputs
      • -
    • Responses to the Patient Health Questionnaire-9 (PHQ-9)
      • -
    • Your interaction history within the app
      • -
    -
    3. - -
  3. - - How We Use Your Data - -
      -
    • To detect depression levels and provide personalized support (for mild to moderate cases)
      • -
    • To recommend professional consultation in severe cases
      • -
    • To improve our AI model using anonymized data only
      • -
    -
    4. - -
  4. - - Data Privacy and Security - -
      -
    • Your identity and personal information will never be shared with third parties.
      • -
    • All interaction data is securely stored and encrypted.
      • -
    • We comply with data protection laws to keep your information safe.
      • -
    -
    5. - -
  5. - - Emergency and Severe Case Protocol - -

    If a severe depression level or self-harm risk is detected:

    -
      -
    • The app will not attempt therapy
      • -
    • You will be given immediate options to contact a licensed consultant or emergency helpline for professional help
      • -
    -
    6. - -
  6. - - Your Rights - -
      -
    • You may request deletion of your data at any time
      • -
    • You may withdraw consent and stop using the app anytime
      • -
    • You may review how your data is processed and stored
      • -
    -
    7. - -
  7. - - Consent - -

    By clicking “I Agree”, you confirm that:

    -
      -
    • You understand Bliss Me provides non-clinical support only
      • -
    • You voluntarily provide your data for depression detection and guidance
      • -
    • You are at least 18 years old or using the app with parental/guardian consent
      • -
    -
    8. -
-

- Scroll to the bottom to enable acceptance. -

-
- + > +

+ Consent and Privacy Policy +

+

+ Welcome to Bliss Me. Please read this carefully before using our services. By clicking “I Agree”, you consent to the following: +

+
    +
  1. + + Purpose of the Application + +

    Bliss Me uses Artificial Intelligence to detect depression severity through your text and voice inputs.

    +
      +
    • For mild to moderate depression, the app provides non-clinical therapeutic support such as Cognitive Behavioral Therapy (CBT)-based exercises and mindfulness techniques.
      • +
    • For severe depression, the app will not provide therapy. Instead, you will be given options to contact a mental health consultant or emergency services for professional assistance.
      • +
    +
    2. + +
  2. + + Information We Collect + +

    To assess your emotional state and depression level, we collect:

    +
      +
    • Text and voice inputs
      • +
    • Responses to the Patient Health Questionnaire-9 (PHQ-9)
      • +
    • Your interaction history within the app
      • +
    +
    3. + +
  3. + + How We Use Your Data + +
      +
    • To detect depression levels and provide personalized support (for mild to moderate cases)
      • +
    • To recommend professional consultation in severe cases
      • +
    • To improve our AI model using anonymized data only
      • +
    +
    4. + +
  4. + + Data Privacy and Security + +
      +
    • Your identity and personal information will never be shared with third parties.
      • +
    • All interaction data is securely stored and encrypted.
      • +
    • We comply with data protection laws to keep your information safe.
      • +
    +
    5. + +
  5. + + Emergency and Severe Case Protocol + +

    If a severe depression level or self-harm risk is detected:

    +
      +
    • The app will not attempt therapy
      • +
    • You will be given immediate options to contact a licensed consultant or emergency helpline for professional help
      • +
    +
    6. + +
  6. + + Your Rights + +
      +
    • You may request deletion of your data at any time
      • +
    • You may withdraw consent and stop using the app anytime
      • +
    • You may review how your data is processed and stored
      • +
    +
    7. + +
  7. + + Consent + +

    By clicking “I Agree”, you confirm that:

    +
      +
    • You understand Bliss Me provides non-clinical support only
      • +
    • You voluntarily provide your data for depression detection and guidance
      • +
    • You are at least 18 years old or using the app with parental/guardian consent
      • +
    +
    8. +
+

+ Scroll to the bottom to enable acceptance. +

+
+
); From 25c328fc6a464db1fe20c1eb1503e418a6358c0a Mon Sep 17 00:00:00 2001 From: supunijayasinghe Date: Mon, 18 Aug 2025 23:11:55 +0530 Subject: [PATCH 2/4] new voice chat interface --- blissme-app/src/app/chatBox/VoiceChat.tsx | 3 +- blissme-app/src/app/start/InputMode.tsx | 11 +- blissme-app/src/app/start/Nickname.tsx | 4 +- .../src/components/chat/ChatInterface.tsx | 2 +- .../components/chat/VoiceChatInterface.tsx | 560 ++++++++++++++++++ blissme-app/src/routes/Routerset.jsx | 5 +- 6 files changed, 573 insertions(+), 12 deletions(-) create mode 100644 blissme-app/src/components/chat/VoiceChatInterface.tsx diff --git a/blissme-app/src/app/chatBox/VoiceChat.tsx b/blissme-app/src/app/chatBox/VoiceChat.tsx index 94d1b13..7c4031b 100644 --- a/blissme-app/src/app/chatBox/VoiceChat.tsx +++ b/blissme-app/src/app/chatBox/VoiceChat.tsx @@ -5,6 +5,7 @@ import bg from "../../assets/images/chatbg.png" import { useNavigate } from "react-router-dom"; import logo from "../../assets/images/logo.png"; import { getLocalStoragedata } from "../../helpers/Storage"; +import VoiceChatInterface from "../../components/chat/VoiceChatInterface"; const VoiceChat = () => { const navigate = useNavigate(); @@ -34,7 +35,7 @@ const VoiceChat = () => {
{/* Chat Interface fills remaining space */} - +
); }; diff --git a/blissme-app/src/app/start/InputMode.tsx b/blissme-app/src/app/start/InputMode.tsx index 2f561fa..f950de8 100644 --- a/blissme-app/src/app/start/InputMode.tsx +++ b/blissme-app/src/app/start/InputMode.tsx @@ -98,7 +98,7 @@ const InputMode = () => {
-
+
{ key={mode} onClick={() => setSelectedMode(mode)} className={`flex flex-col items-center justify-center w-20 h-10 bg-white bg-opacity-50 rounded-lg p-2 shadow-md transition-transform cursor-pointer hover:scale-105 - ${ - selectedMode === mode - ? "border-2 border-[#1B5E3A]" - : "border border-transparent" - } + ${selectedMode === mode + ? "border-2 border-[#1B5E3A]" + : "border border-transparent" + } `} > diff --git a/blissme-app/src/app/start/Nickname.tsx b/blissme-app/src/app/start/Nickname.tsx index 9269598..6aff7f2 100644 --- a/blissme-app/src/app/start/Nickname.tsx +++ b/blissme-app/src/app/start/Nickname.tsx @@ -62,7 +62,7 @@ const Nickname = () => {
{/* Main content container */} -
+
BlissMe Logo
@@ -82,7 +82,7 @@ const Nickname = () => { placeholder="Choose a nickname" value={nickname} onChange={(e) => setNicknameInput(e.target.value)} - className="absolute bottom-[-35%] w-[80%] rounded-lg py-2 bg-[#DCF2DE] shadow-md text-center + className="absolute bottom-[-35%] w-[80%] rounded-full py-2 bg-[#DCF2DE] shadow-md text-center border border-transparent focus:border-[#BDF2D0] hover:border-[#BDF2D0] focus:ring-0" />
diff --git a/blissme-app/src/components/chat/ChatInterface.tsx b/blissme-app/src/components/chat/ChatInterface.tsx index d4e016d..935c240 100644 --- a/blissme-app/src/components/chat/ChatInterface.tsx +++ b/blissme-app/src/components/chat/ChatInterface.tsx @@ -208,7 +208,7 @@ const ChatInterface = () => {
{/* Chat Box */} -
+
{/* Chat Area */}
{messages.map((msg, index) => ( diff --git a/blissme-app/src/components/chat/VoiceChatInterface.tsx b/blissme-app/src/components/chat/VoiceChatInterface.tsx new file mode 100644 index 0000000..80e5fce --- /dev/null +++ b/blissme-app/src/components/chat/VoiceChatInterface.tsx @@ -0,0 +1,560 @@ +import bearnew from "../../assets/images/bearnew.png"; +import React, { useState, useEffect, useRef } from "react"; +import { Button, Divider, Typography, Modal, Tooltip } from "antd"; +import { assets } from "../../assets/assets"; +import ReactBarsLoader from "../../components/loader/ReactBarLoader"; +import { getCurrentTime } from "../../helpers/Time"; +import { + createNewSession, + fetchChatHistory, + saveMessage, + fetchAllSummaries, +} from "../../services/ChatMessageService"; +import { savePHQ9Answer } from "../../services/Phq9Service"; +import { useCharacterContext } from "../../app/context/CharacterContext"; +import { + AudioMutedOutlined, + AudioOutlined, + LoadingOutlined, + StopOutlined, +} from "@ant-design/icons"; +import Avatar from "../../components/profile/Avatar"; +import { useNotification } from "../../app/context/notificationContext"; + +import user from "../../assets/images/user.png"; + +const { Text } = Typography; + + +interface Message { + text: string; + sender: "you" | "bot"; + time: string; +} +interface ApiResult { + audio_url?: string; + user_query?: string; + bot_response?: string; + phq9_questionID?: number; + phq9_question?: string; + emotion_history?: string[]; + overall_emotion?: string; +} + + +const ViceChatInterface = () => { + const [recording, setRecording] = useState(false); + const [mediaRecorder, setMediaRecorder] = useState( + null + ); + const [messages, setMessages] = useState([]); + const [isUploading, setIsUploading] = useState(false); + const [isBotTyping, setIsBotTyping] = useState(false); + const [isWaitingForBotResponse, setIsWaitingForBotResponse] = useState(false); + const [sessionID, setSessionID] = useState(""); + const [sessionSummaries, setSessionSummaries] = useState([]); + const [lastPhq9, setLastPhq9] = useState<{ + id: number; + question: string; + } | null>(null); + const [askedPhq9Ids, setAskedPhq9Ids] = useState([]); + const [isPhq9, setIsPhq9] = useState(false); + const [apiResult, setApiResult] = useState({}); + const [emotionHistory, setEmotionHistory] = useState([]); + const { characters } = useCharacterContext(); + console.log("ch", characters); + const chunks = useRef([]); + const streamRef = useRef(null); + const messageEndRef = useRef(null); + const { selectedCharacter, nickname } = useCharacterContext(); + const [showEmotionModal, setShowEmotionModal] = useState(false); + const [overallEmotion, setOverallEmotion] = useState(null); + const isCancelledRef = useRef(false); + const { openNotification } = useNotification(); + + const phqOptions = [ + "Not at all", + "Several days", + "More than half the days", + "Nearly every day", + ]; + + const scrollToBottom = () => { + messageEndRef.current?.scrollIntoView({ behavior: "smooth" }); + }; + + useEffect(() => { + scrollToBottom(); + }, [messages, isBotTyping]); + + useEffect(() => { + (async () => { + const session = await createNewSession(); + setSessionID(session); + const allSummaries = await fetchAllSummaries(); + setSessionSummaries(allSummaries); + })(); + }, []); + + const handleStartRecording = async () => { + isCancelledRef.current = false; // reset cancellation flag + try { + const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); + streamRef.current = stream; + + const mimeType = MediaRecorder.isTypeSupported("audio/webm;codecs=opus") + ? "audio/webm;codecs=opus" + : MediaRecorder.isTypeSupported("audio/webm") + ? "audio/webm" + : ""; + + if (!mimeType) { + openNotification( + "error", + "No supported MIME type found for MediaRecorder." + ); + return; + } + + const recorder = new MediaRecorder(stream, { mimeType }); + chunks.current = []; + + recorder.ondataavailable = (e) => { + if (e.data.size > 0) { + chunks.current.push(e.data); + } + }; + recorder.onstop = async () => { + if (isCancelledRef.current) { + // If cancelled, just reset and do nothing + isCancelledRef.current = false; + return; + } + const blob = new Blob(chunks.current, { type: "audio/webm" }); + if (blob.size < 1000) { + openNotification( + "error", + "Recording is too short or empty. Please try again." + ); + return; + } + await handleSendAudio(blob); + }; + + recorder.start(); + setMediaRecorder(recorder); + setRecording(true); + } catch (err) { + openNotification("error", "Microphone access denied or error occurred."); + console.error("Mic error:", err); + } + }; + + const handleStopRecording = () => { + setRecording(false); + setIsWaitingForBotResponse(true); + if (mediaRecorder?.state === "recording") { + mediaRecorder.stop(); + } + streamRef.current?.getTracks().forEach((track) => track.stop()); + }; + + const handleSendAudio = async (blob: Blob) => { + const formData = new FormData(); + formData.append("audio", blob, "recording.webm"); + formData.append("asked_phq_ids", JSON.stringify(askedPhq9Ids)); + formData.append("summaries", JSON.stringify(sessionSummaries)); + formData.append("emotion_history", JSON.stringify(emotionHistory)); + + try { + setIsUploading(true); + const updatedHistory = await fetchChatHistory(sessionID); + const formattedHistory = Array.isArray(updatedHistory) + ? updatedHistory.map((msg: any) => ({ + sender: msg.sender === "bot" ? "Bot" : "User", + text: msg.message, + })) + : []; + + const historyText = formattedHistory + .map((m) => `${m.sender}: ${m.text}`) + .join("\n"); + formData.append("history", historyText); + + const response = await fetch("http://localhost:8000/voice-chat", { + method: "POST", + body: formData, + }); + + setIsUploading(false); + setIsBotTyping(true); + + if (!response.ok) { + const errorText = await response.text(); + openNotification("error", errorText || "Server error"); + return; + } + + const result = await response.json(); + + const userMessage: Message = { + text: result.user_query, + sender: "you", + time: getCurrentTime(), + }; + setMessages((prev) => [...prev, userMessage]); + await saveMessage(userMessage.text, sessionID, "user"); + + if (lastPhq9) { + await savePHQ9Answer( + sessionID, + lastPhq9.id, + lastPhq9.question, + userMessage.text + ); + setLastPhq9(null); + } + + if ( + typeof result.phq9_questionID === "number" && + typeof result.phq9_question === "string" + ) { + setAskedPhq9Ids((prev) => [...prev, result.phq9_questionID!]); + setLastPhq9({ + id: result.phq9_questionID, + question: result.phq9_question, + }); + setIsPhq9(true); + } + + const botMessage: Message = { + text: result.bot_response, + sender: "bot", + time: getCurrentTime(), + }; + await saveMessage(botMessage.text, sessionID, "bot"); + setMessages((prev) => [...prev, botMessage]); + + const audio = new Audio(`http://localhost:8000${result.audio_url}`); + audio.play(); + + // Handle emotion state + if (result.emotion_history && Array.isArray(result.emotion_history)) { + setEmotionHistory(result.emotion_history); + if (result.emotion_history.length >= 3) { + setOverallEmotion(result.overall_emotion || null); + setShowEmotionModal(true); + } + } + + setIsBotTyping(false); + setIsWaitingForBotResponse(false); + } catch (err) { + openNotification("error", "Failed to send audio. Please try again."); + console.error("Upload error:", err); + setIsUploading(false); + setIsBotTyping(false); + setIsWaitingForBotResponse(false); + } + }; + + const handlePhqAnswer = async (answer: string) => { + const answerMessage: Message = { + text: answer, + sender: "you", + time: getCurrentTime(), + }; + setMessages((prev) => [...prev, answerMessage]); + setIsPhq9(false); + setIsBotTyping(true); + + if (lastPhq9) { + await savePHQ9Answer(sessionID, lastPhq9.id, lastPhq9.question, answer); + setLastPhq9(null); + } + + await saveMessage(answer, sessionID, "user"); + + // Fetch updated chat history from backend + const updatedHistory = await fetchChatHistory(sessionID); + const formattedHistory = Array.isArray(updatedHistory) + ? updatedHistory.map((msg: any) => ({ + sender: msg.sender === "bot" ? "Bot" : "User", + text: msg.message, + })) + : []; + + // Prepare text history for sending to backend + const historyText = formattedHistory + .map((m) => `${m.sender}: ${m.text}`) + .join("\n"); + + // Prepare form data for your backend (assuming similar to handleSendAudio but with empty audio) + const formData = new FormData(); + formData.append( + "audio", + new Blob([], { type: "audio/webm" }), + "empty.webm" + ); // empty blob or handle differently + formData.append("asked_phq_ids", JSON.stringify(askedPhq9Ids)); + formData.append("summaries", JSON.stringify(sessionSummaries)); + formData.append("emotion_history", JSON.stringify(emotionHistory)); + formData.append("history", historyText); + + try { + const response = await fetch("http://localhost:8000/voice-chat", { + method: "POST", + body: formData, + }); + + if (!response.ok) { + const errorText = await response.text(); + openNotification("error", errorText || "Server error: "); + setIsBotTyping(false); + return; + } + + const result: ApiResult = await response.json(); + setApiResult(result); + + // Save user message was done above; now save bot message from result + const botMessage: Message = { + text: result.bot_response || "No response from bot.", + sender: "bot", + time: getCurrentTime(), + }; + await saveMessage(botMessage.text, sessionID, "bot"); + setMessages((prev) => [...prev, botMessage]); + + // Update PHQ9 question if any + + if ( + typeof result.phq9_questionID === "number" && + typeof result.phq9_question === "string" + ) { + setAskedPhq9Ids((prev) => [...prev, result.phq9_questionID!]); + setLastPhq9({ + id: result.phq9_questionID, + question: result.phq9_question, + }); + setIsPhq9(true); + } + + // Play audio if any + if (result.audio_url) { + const audio = new Audio(`http://localhost:8000${result.audio_url}`); + await audio.play(); + } + } catch (err) { + openNotification( + "error", + "Failed to process PHQ-9 answer. Please try again." + ); + console.error("PHQ-9 answer error:", err); + } + + setIsBotTyping(false); + setIsWaitingForBotResponse(false); + }; + + return ( +
+ {/* Bear Image */} +
+ Bear +
+ + {/* Chat Box */} +
+ +
+ {messages.map((msg, index) => ( +
+
+ {msg.sender === "you" ? ( + User Avatar) : ( + bot + )} +
+ {msg.sender === "you" ? ( +
+ {/* Cloud tail for user (right side) */} +
+
+ {msg.text} +
+ ) : ( +
+ {/* Cloud tail for bot (left side) */} +
+
+ {msg.text} +
+ )} +
+
+ + {msg.time} + + + {isPhq9 && + lastPhq9 && + msg.sender === "bot" && + index === messages.length - 1 && ( +
+ {phqOptions.map((option) => ( + + ))} +
+ )} +
+ ))} + + {isUploading && ( +
+ + +
+ )} + {isBotTyping && ( +
+ bot + + +
+ )} +
+
+ +
+ {!recording && !isWaitingForBotResponse && ( + + + + )} + + {recording && !isWaitingForBotResponse && ( + <> + + + + + + + + + )} + + {isWaitingForBotResponse && ( + +
+ + {/* Emotion Summary Modal */} + setShowEmotionModal(false)} + onCancel={() => setShowEmotionModal(false)} + > +

+ Overall Emotion: {overallEmotion || "N/A"} +

+ +
+
+ ); +}; + +export default ViceChatInterface; diff --git a/blissme-app/src/routes/Routerset.jsx b/blissme-app/src/routes/Routerset.jsx index 2563d3f..b2af8b7 100644 --- a/blissme-app/src/routes/Routerset.jsx +++ b/blissme-app/src/routes/Routerset.jsx @@ -24,6 +24,7 @@ import SecuritySetting from "../components/Sidebar/SecuritySetting"; import FaceSignin from "../app/signIn/FaceSignIn"; import Chat from "../app/chatBox/Chat"; import SettingsLayout from "../app/layouts/SettingsLayout"; +import VoiceChat from "../app/chatBox/VoiceChat"; const Routerset = () => { const { token } = useContext(AuthContext); @@ -59,8 +60,8 @@ const Routerset = () => { } /> */} } /> - } /> - + } /> + }> } /> } /> From b9922ae70dc512b9856e71790bcfe98019c0f175 Mon Sep 17 00:00:00 2001 From: supunijayasinghe Date: Mon, 18 Aug 2025 23:23:28 +0530 Subject: [PATCH 3/4] startchat button logic in home page --- blissme-app/src/app/start/Home.tsx | 30 +++++++++++++++++++++++++++--- 1 file changed, 27 insertions(+), 3 deletions(-) diff --git a/blissme-app/src/app/start/Home.tsx b/blissme-app/src/app/start/Home.tsx index 20fee57..4e0d172 100644 --- a/blissme-app/src/app/start/Home.tsx +++ b/blissme-app/src/app/start/Home.tsx @@ -4,6 +4,7 @@ import home2 from '../../assets/images/home2.png'; import home3 from '../../assets/images/home3.png'; import logo from '../../assets/images/logo.png'; import { useNavigate } from 'react-router-dom'; +import { getLocalStoragedata } from '../../helpers/Storage'; const images = [home, home2, home3]; @@ -22,6 +23,21 @@ const Home = () => { const handleLogin = () => navigate('/sign-in'); const handleLogoClick = () => navigate('/home'); + const storedUser = JSON.parse(getLocalStoragedata("reduxState") || "{}"); + const selectedMode = storedUser?.user?.inputMode; + console.log(selectedMode); + + const handleStartChat = () => { + if (selectedMode === 'Text') { + navigate('/chat-new/text'); + } else if (selectedMode === 'Voice') { + navigate('/chat-new/voice'); + } else { + navigate('/sign-in'); + } + }; + + return (
{/* Hero Section */} @@ -37,9 +53,13 @@ const Home = () => {

- + - +
From 289e1b26c4565e0b06b71e921d2c03b231e3a735 Mon Sep 17 00:00:00 2001 From: supunijayasinghe Date: Mon, 18 Aug 2025 23:43:03 +0530 Subject: [PATCH 4/4] change the face recognition UI --- .../components/Sidebar/SecuritySetting.tsx | 235 +++++++++--------- 1 file changed, 119 insertions(+), 116 deletions(-) diff --git a/blissme-app/src/components/Sidebar/SecuritySetting.tsx b/blissme-app/src/components/Sidebar/SecuritySetting.tsx index 7b77684..e4f4d5d 100644 --- a/blissme-app/src/components/Sidebar/SecuritySetting.tsx +++ b/blissme-app/src/components/Sidebar/SecuritySetting.tsx @@ -108,126 +108,129 @@ const SecuritySetting = () => { }; return ( -
-

Biometrics-Face Recongnition

- - -
-
- {/* Consent Text */} -

- Purpose of Data Collection: -

-

- We use facial recognition to provide a secure and convenient - method of identity verification. This helps ensure that only - authorized users can access sensitive parts of the application. -

- -

- How We Use Your Data: -

-
    -
  • Your facial data will be used only for authentication.
    • -
  • We do not share your data with third-party services.
    • -
  • - All facial data is stored securely in compliance with data - protection regulations. -
    • -
- -

Your Rights:

-

- You have the right to withdraw your consent at any time by - contacting support. This may affect your ability to use - biometric login features. -

- -

Security Notice:

-

- All facial images are encrypted and securely transmitted to our - servers for processing. We implement industry-standard security - measures to protect your information. -

- -

- By checking the box below, you acknowledge that you have read - and understood the terms above and voluntarily consent to facial - recognition for authentication purposes. -

-
- - - setConsentGiven(e.target.checked)} +
+
+

Biometrics-Face Recongnition

+ + + +
+ + {/* Consent Text */} +

+ Purpose of Data Collection: +

+

+ We use facial recognition to provide a secure and convenient + method of identity verification. This helps ensure that only + authorized users can access sensitive parts of the application. +

+ +

+ How We Use Your Data: +

+
    +
  • Your facial data will be used only for authentication.
    • +
  • We do not share your data with third-party services.
    • +
  • + All facial data is stored securely in compliance with data + protection regulations. +
    • +
+ +

Your Rights:

+

+ You have the right to withdraw your consent at any time by + contacting support. This may affect your ability to use + biometric login features. +

+ +

Security Notice:

+

+ All facial images are encrypted and securely transmitted to our + servers for processing. We implement industry-standard security + measures to protect your information. +

+ +

+ By checking the box below, you acknowledge that you have read + and understood the terms above and voluntarily consent to facial + recognition for authentication purposes. +

+
+ + - I have read and agree to the terms above. - - - - - - - - -
-
- {isWebcamOn ? ( - - ) : ( -
setIsWebcamOn(true)} + setConsentGiven(e.target.checked)} > - + + + + + + + +
+
+ {isWebcamOn ? ( + -
- )} -
- - -
- + ) : ( +
setIsWebcamOn(true)} + > + +
+ )}
- - - - + + +
+ +
+ + + + +
); };