feat: password protect (#61)

feat: password protect (#61)

.env

@@ -1,3 +1,4 @@
+VITE_ACCESS_CODE=REPLACE_WITH_YOUR_OWN
 VITE_OPENAI_API_KEY=REPLACE_WITH_YOUR_OWN
 VITE_OPENAI_HOST=REPLACE_WITH_YOUR_OWN
 VITE_OPENAI_MODEL=REPLACE_WITH_YOUR_OWN

src/components/AzureSpeechToText.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import * as sdk from 'microsoft-cognitiveservices-speech-sdk';
+import { existEnvironmentVariable, getEnvironmentVariable } from '../helpers/utils';
 
 interface AzureSpeechToTextProps {
   subscriptionKey: string;
@@ -10,6 +11,7 @@ interface AzureSpeechToTextProps {
   setIsListening: (update: ((prevIsListening: boolean) => boolean) | boolean) => void;
   setWaiting: (update: ((prevWaiting: boolean) => boolean) | boolean) => void;
   notify: any;
+  accessCode: string;
 }
 
 const AzureSpeechToText: React.FC<AzureSpeechToTextProps> = ({
@@ -21,6 +23,7 @@ const AzureSpeechToText: React.FC<AzureSpeechToTextProps> = ({
   setTranscript,
   setWaiting,
   notify,
+  accessCode,
 }) => {
   const [recognizer, setRecognizer] = useState<sdk.SpeechRecognizer | null>(null);
 
@@ -37,6 +40,13 @@ const AzureSpeechToText: React.FC<AzureSpeechToTextProps> = ({
   }, [isListening]);
 
   const startSpeechRecognition = () => {
+    if (accessCode !== getEnvironmentVariable('ACCESS_CODE')) {
+      notify.invalidAccessCodeNotify();
+      setIsListening(false);
+      setWaiting(false);
+      return;
+    }
+
     setWaiting(true);
 
     if (subscriptionKey === '' || region === '') {

src/components/Content.tsx

@@ -109,6 +109,13 @@ const Content: React.FC<ContentProps> = ({ notify }) => {
     if (disableSpeaker) {
       return;
     }
+    if (existEnvironmentVariable('ACCESS_CODE')) {
+      const accessCode = getEnvironmentVariable('ACCESS_CODE');
+      if (accessCode !== key.accessCode) {
+        notify.invalidAccessCodeNotify();
+        return;
+      }
+    }
     stopSpeechSynthesis();
     setStatus('speaking');
     setFinished(false);
@@ -219,6 +226,16 @@ const Content: React.FC<ContentProps> = ({ notify }) => {
       const openaiApiModel = existEnvironmentVariable('OPENAI_MODEL')
         ? getEnvironmentVariable('OPENAI_MODEL')
         : key.openaiModel;
+
+      if (existEnvironmentVariable('ACCESS_CODE')) {
+        const accessCode = getEnvironmentVariable('ACCESS_CODE');
+        if (accessCode !== key.accessCode) {
+          notify.invalidAccessCodeNotify();
+          setStatus('idle');
+          return;
+        }
+      }
+
       sendRequest(
         conversationsToSent as any,
         openaiApiKey,
@@ -465,6 +482,7 @@ const Content: React.FC<ContentProps> = ({ notify }) => {
           setTranscript={setTranscript}
           setWaiting={setWaiting}
           notify={notify}
+          accessCode={existEnvironmentVariable('ACCESS_CODE') ? key.accessCode : ''}
         />
       )}
       <div className="overflow-y-scroll h-full" ref={conversationRef}>

src/components/ConversationPanel.tsx

@@ -64,7 +64,7 @@ function ConversationPanel({
             className="group relative rounded-lg hover:bg-gray-200 p-2 flex flex-row space-x-3 transition-colors duration-100"
           >
             <ChatIcon role={conversation.role} />
-            <div 
+            <div
               className="py-1 text-gray-800 markdown-content"
               onMouseDown={handleMouseDown}
               onMouseUp={handleMouseUp}
@@ -74,10 +74,10 @@ function ConversationPanel({
               {marked(conversation.content ?? '')}
             </div>
             <div
-            className={`absolute right-2 top-2 group-hover:opacity-100 opacity-0 transition-colors duration-100 flex-row space-x-0.5 ${
-              isHidden ? 'hidden' : 'flex'
-            }`}
-            >              
+              className={`absolute right-2 top-2 group-hover:opacity-100 opacity-0 transition-colors duration-100 flex-row space-x-0.5 ${
+                isHidden ? 'hidden' : 'flex'
+              }`}
+            >
               <TippyButton
                 onClick={() => {
                   generateSpeech(conversation.content);
@@ -109,4 +109,4 @@ function ConversationPanel({
   );
 }
 
-export default ConversationPanel;
+export default ConversationPanel;

src/components/Notification.tsx

@@ -24,6 +24,12 @@ export const resetNotify = () => {
   });
 };
 
+export const invalidAccessCodeNotify = () => {
+  toast.error(i18next.t('notification.invalid-access-code') as string, {
+    style: notificationStyle,
+  });
+};
+
 // OpenAI
 export const invalidOpenAiKeyNotify = () => {
   toast.error(i18next.t('notification.invalid-openai-key') as string, {

src/components/Settings/AboutSection.tsx

@@ -51,7 +51,7 @@ const AboutSection: React.FC<AboutSectionProps> = ({}) => {
       <SettingDivider />
       <SettingTitle text={i18n.t('setting.about.version') as string} />
       <SettingGroup>
-        <div className={'flex space-y-2 text-left ml-0.5 text-gray-700'}>Version: v0.4.0</div>
+        <div className={'flex space-y-2 text-left ml-0.5 text-gray-700'}>Version: v0.4.1</div>
       </SettingGroup>
     </div>
   );

src/components/Settings/ChatSection.tsx

@@ -69,6 +69,20 @@ const ChatSection: React.FC<ChatSectionProps> = ({}) => {
             />
           </>
         )}
+        {existEnvironmentVariable('ACCESS_CODE') ? (
+          <SettingInput
+            text={i18n.t('setting.chat.access-code') as string}
+            helpText={i18n.t('setting.chat.access-code-tooltip') as string}
+            id={'openai-host'}
+            type={'text'}
+            value={key.accessCode}
+            onChange={e => setKey({ ...key, accessCode: e })}
+            placeholder={i18n.t('setting.chat.code') as string}
+            className={''}
+          />
+        ) : (
+          <></>
+        )}
       </SettingGroup>
 
       <SettingDivider />

src/locales/en.json

@@ -54,6 +54,9 @@
   "setting": {
     "chat": {
       "title": "Chat",
+      "access-code": "Access Code",
+      "access-code-tooltip": "Enter the access code to use the application",
+      "code": "Code",
       "api-key": "API Key",
       "default-host-address": "chat.openai.com",
       "openai": "OpenAI",
@@ -153,6 +156,7 @@
     "azure-synthesis-error": "There was an error with Azure speech synthesis",
     "azure-recognition-error": "There was an error with Azure speech recognition",
     "polly-synthesis-error": "There was an error with Amazon Polly speech synthesis",
-    "cannot-be-empty": "This field cannot be empty"
+    "cannot-be-empty": "This field cannot be empty",
+    "invalid-access-code": "Invalid access code"
   }
 }

src/locales/es.json

@@ -54,6 +54,9 @@
   "setting": {
     "chat": {
       "title": "Chat",
+      "access-code": "Access Code",
+      "access-code-tooltip": "Enter the access code to use the application",
+      "code": "Code",
       "api-key": "Código de API",
       "default-host-address": "chat.openai.com",
       "openai": "OpenAI",
@@ -153,6 +156,7 @@
     "azure-synthesis-error": "Se ha producido un error con la síntesis de voz de Azure",
     "azure-recognition-error": "Se ha producido un error en el reconocimiento de voz de Azure",
     "polly-synthesis-error": "Se ha producido un error con la síntesis de voz de Amazon Polly",
-    "cannot-be-empty": "This field cannot be empty"
+    "cannot-be-empty": "This field cannot be empty",
+    "invalid-access-code": "Invalid access code"
   }
 }

src/locales/zh-CN.json

@@ -54,6 +54,9 @@
   "setting": {
     "chat": {
       "title": "对话",
+      "access-code": "访问密码",
+      "access-code-tooltip": "输入访问密码以使用应用",
+      "code": "Code",
       "api-key": "API Key",
       "default-host-address": "chat.openai.com",
       "openai": "OpenAI",
@@ -153,6 +156,7 @@
     "azure-synthesis-error": "Azure 语音合成错误",
     "azure-recognition-error": "Azure 语音识别错误",
     "polly-synthesis-error": "Amazon Polly 语音合成错误",
-    "cannot-be-empty": "不能为空"
+    "cannot-be-empty": "不能为空",
+    "invalid-access-code": "无效的访问密码"
   }
 }

src/pages/Home.tsx

@@ -5,7 +5,6 @@ import * as Notify from '../components/Notification';
 import { browserName, isMobile } from 'react-device-detect';
 import { useGlobalStore, useSessionStore } from '../store/module';
 import { v4 as uuidv4 } from 'uuid';
-import { current } from '@reduxjs/toolkit';
 import { useTranslation } from 'react-i18next';
 
 function Home() {
@@ -32,6 +31,7 @@ function Home() {
     awsErrorNotify: Notify.awsErrorNotify,
     emptyAzureKeyNotify: Notify.emptyAzureKeyNotify,
     cannotBeEmptyNotify: Notify.cannotBeEmptyNotify,
+    invalidAccessCodeNotify: Notify.invalidAccessCodeNotify,
   };
 
   if (isMobile || browserName !== 'Chrome') {

src/store/module/global.ts

@@ -22,6 +22,7 @@ const defaultGlobalState = {
   locale: navigator.language.split(/[-_]/)[0] || '',
   appearance: 'system',
   key: {
+    accessCode: '',
     openaiApiKey: '',
     openaiModel: '',
     openaiHost: '',

src/store/reducer/global.ts

@@ -6,6 +6,7 @@ export const globalSlice = createSlice({
     locale: navigator.language.split(/[-_]/)[0] || '',
     appearance: 'system',
     key: {
+      accessCode: '',
       openaiApiKey: '',
       openaiModel: '',
       openaiHost: '',