You can now change password from the GUI. Minor fixes too

aledipa · Nov 17, 2024 · ab2a7ed · ab2a7ed
1 parent b95d603
commit ab2a7ed
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 18 deletions.
diff --git a/Pipfile.lock b/Pipfile.lock
diff --git a/src/FreeGPT4_Server.py b/src/FreeGPT4_Server.py
@@ -48,12 +48,12 @@
     "Wewordle": g4f.Provider.Wewordle,
     "You": g4f.Provider.You,
     "Yqcloud": g4f.Provider.Yqcloud,
-    "FreeChatgpt": g4f.Provider.FreeChatgpt,
+    "Pizzagpt": g4f.Provider.Pizzagpt,
     "HuggingChat": g4f.Provider.HuggingChat,
     "HuggingFace": g4f.Provider.HuggingFace
 }
 
-GENERIC_MODELS = ["gpt-3.5-turbo", "gpt-4", "gpt-4o"]
+GENERIC_MODELS = ["gpt-3.5-turbo", "gpt-4", "gpt-4o", "gpt-4o-mini"]
 
 
 print(
@@ -290,6 +290,8 @@ def save_settings(request, file):
     c.execute("UPDATE settings SET system_prompt = ?", (request.form["system_prompt"],))
     c.execute("UPDATE settings SET message_history = ?", (bool(request.form["message_history"] == "true"),))
     c.execute("UPDATE settings SET proxies = ?", (bool(request.form["proxies"] == "true"),))
+    c.execute("UPDATE settings SET password = ?", (generate_password_hash(request.form["new_password"]),))
+
     file = request.files["cookie_file"]
     if (args.private_mode or bool(request.form["private_mode"] == "true")):
         c.execute("UPDATE settings SET token = ?", (request.form["token"],))
@@ -352,6 +354,7 @@ def apply_settings(file):
     args.system_prompt = data["system_prompt"]
     args.enable_history = data["message_history"]
     args.enable_proxies = data["proxies"]
+    args.password = data["password"]
     return
 
 
@@ -526,4 +529,4 @@ async def get_token():
 
 if __name__ == "__main__":
     # Starts the server, change the port if needed
-    app.run("0.0.0.0", port=args.port, debug=False)
+    app.run("0.0.0.0", port=args.port, debug=True)
diff --git a/src/static/css/style.css b/src/static/css/style.css
@@ -45,7 +45,6 @@ textarea::placeholder {
 }
 
 .label_darkorange {
-    /* color: #b59e1a; */
     color: #8b7b00;
 }
 
@@ -57,6 +56,10 @@ textarea::placeholder {
     background-color: #035306;
 }
 
+.darkred_bg {
+    background-color: #8b0000;
+}
+
 .blue_bg {
     background-color: #007080;
 }

diff --git a/src/static/js/script.js b/src/static/js/script.js
@@ -28,14 +28,12 @@ function replaceElement(idToHide, idToShow) {
 function showElement(idToShow) {
   element = document.getElementById(idToShow);
   element.hidden = false;
-  element.classList.remove("hidden");
 }
 
 // Hides an element
 function hideElement(idToHide) {
   element = document.getElementById(idToHide);
   element.hidden = true;
-  element.classList.add("hidden");
 }
 
 // Copies the text in the given id to the clipboard
@@ -172,6 +170,48 @@ function checkAllProxies() {
   }
 }
 
+// Checks if new password and confirm password match
+function checkPasswordMatch() {
+  var newPassword = document.getElementById("new_password").value;
+  var confirmPassword = document.getElementById("confirm_password").value;
+  if (newPassword == confirmPassword) {
+    if (newPassword.length > 0) {
+      replaceElement("error_password", "success_password");
+      return true;
+    }
+  } else {
+    replaceElement("success_password", "error_password");
+  }
+  return false;
+}
+
+// Opens the update password form
+function openPasswordUpdate() {
+  replaceElement("open_password_update", "cancel_password_update");
+  showElement("password_update");
+}
+
+// Closes the update password form
+function cancelPasswordUpdate() {
+  hideElement("password_update");
+  hideElement("success_password");
+  hideElement("error_password");
+  replaceElement("cancel_password_update", "open_password_update");
+  document.getElementById("new_password").value = "";
+  document.getElementById("confirm_password").value = "";
+}
+
+// Enables the save button if the password is correct
+function enableSaveButton() {
+  var pass_length = document.getElementById("password").value.length;
+  var isPasswordUpdateClosed = document.getElementById("password_update").hidden;
+  if ((checkPasswordMatch() || isPasswordUpdateClosed) && pass_length > 0) {
+    replaceElement('save_label_dummy', 'save_label');
+  } else {
+    replaceElement('save_label', 'save_label_dummy');
+  }
+}
+
 // Gets available models for choosen A.I. Provider
 $(document).ready(function () {
   $("#provider").change(function () {

diff --git a/src/templates/settings.html b/src/templates/settings.html
@@ -7,17 +7,26 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" type="text/css">
     <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon(Nicoladipa).png') }}" type="image/x-icon">
     <title>Settings</title>
 </head>
 <body>
     {% block content %}
-    <div class="m-7">
-        <h1 class="title font-bold inter darkblue text-4xl">Free GPT 4</h1>
-        <h2 class="title blue text-2xl">Server settings</h2>
-    </div>
+    <!-- Logo on the left and title on the right -->
+    <table class="w-50 m-7">
+        <tr>
+            <td class="m-7">
+                <img src="{{ url_for('static', filename='img/favicon(Nicoladipa).png') }}" width="96" class="inline-block" alt="Logo">
+            </td>
+            <td class="m-7">
+                <h1 class="title font-bold inter darkblue text-4xl">FreeGPT4</h1>
+                <h2 class="title blue
+                text-2xl">Server settings</h2>
+            </td>
+        </tr>
+    </table>
+
 
     <form class="m-7 mt-10 inter" action="/save" method="post" enctype=multipart/form-data>
         <table class="table-fixed w-full">
@@ -115,7 +124,7 @@ <h2 class="title blue text-2xl">Server settings</h2>
                         {% else %}
                     <div id="proxy_list" class="mt-3" hidden>
                     {% endif %}
-                        <label for="add_proxy" id="add_proxy_button" class="button outline-none py-1 px-4 rounded-lg darkgreen_bg text-white text-md hover:opacity-95 w-24 mt-5" onclick="addProxy();">Add Proxy</label>
+                        <label id="add_proxy_button" class="button outline-none py-1 px-4 rounded-lg darkgreen_bg text-white text-md hover:opacity-95 w-24 mt-5" onclick="addProxy();">Add Proxy</label>
                         <br>
                         <p class="text-sm mb-2 mt-4"> <b> Your Proxies: </b></p>
                         <div id="proxy_list_div">
@@ -206,22 +215,42 @@ <h2 class="title blue text-2xl">Server settings</h2>
                 <td class="py-1 fond-bold inter darkblue text-lg border-b border-slate-800"><b>Input keyword:</b></td>
                 <td class="py-1 fond-bold inter darkblue text-lg">
                     <b>
-                        <input type="text" id="keyword" name="keyword" class="input outline-none py-1 px-2 rounded-lg inter w-24" placeholder="i.e. input" value="{{ data['keyword'] }}">
+                        <input type="text" id="keyword" name="keyword" class="input outline-none py-1 px-2 rounded-lg inter w-24" placeholder="i.e. input" value="{{ data['keyword'] }}" suggested="text"></input>
                     </b>
                 </td>
             </tr>
             <tr>
-                <td class="py-1 fond-bold inter darkblue text-lg border-b border-slate-800">
-                    <b>System Prompt:</b>
+                <td class="py-1 fond-bold inter darkblue text-lg border-b border-slate-800 pb-3">
+                    <b>Password:</b>
+                    <div id="password_update" class="mt-4" hidden>
+                        <p class="text-sm"> <b> Set Password </b></p>
+                        <input type="password" id="new_password" name="new_password" class="input outline-none py-1 px-2 rounded-lg inter" placeholder="Your new Password" onchange="enableSaveButton();" autocomplete="new-password"></input>
+                        <p class="text-sm mt-4"> <b> Confirm Password </b></p>
+                        <input type="password" id="confirm_password" name="confirm_password" class="input outline-none py-1 px-2 rounded-lg inter" placeholder="New Password Again" onchange="enableSaveButton();" autocomplete="new-password"></input>
+                        <p id="error_password" class="text-sm label_red mt-1" hidden> <b> Error: </b> Passwords do not match </p>
+                        <p id="success_password" class="text-sm label_green mt-1" hidden> 
+                            <b> Success: </b> Passwords match. <br> 
+                            <i> When entering the old password below to confirm, the password will be updated </i>
+                        </p>
+                    </div>
+                </td>
+                <td class="py-1 fond-bold inter darkblue text-lg align-top">
                     <b>
-                        <textarea type="text" id="system_prompt" name="system_prompt" class="input outline-none py-1 px-2 my-2 rounded-lg inter w-full font-normal" placeholder="i.e. You're a virtual flight assistant, from now on follow your role for every answer.">{{ data['system_prompt'] }}</textarea>
+                        <label id="open_password_update" class="button outline-none py-1 px-4 rounded-lg darkgreen_bg inter text-white text-md mt-5 hover:opacity-95 w-24" onclick="openPasswordUpdate(); enableSaveButton();">Update</label>
+                        <label id="cancel_password_update" class="button outline-none py-1 px-4 rounded-lg darkred_bg inter text-white text-md mt-5 hover:opacity-95 w-24" onclick="cancelPasswordUpdate(); enableSaveButton();" hidden>Cancel</label>
                     </b>
                 </td>
             </tr>
+            <tr>
+                <td class="py-1 fond-bold inter darkblue text-lg border-b border-slate-800">
+                    <b>System Prompt:</b>
+                    <textarea type="text" id="system_prompt" name="system_prompt" class="input outline-none py-1 px-2 my-2 rounded-lg inter w-full font-normal" placeholder="i.e. You're a virtual flight assistant, from now on follow your role for every answer.">{{ data['system_prompt'] }}</textarea>
+                </td>
+            </tr>
         </table>
         <!-- enter password to confirm -->
         <div class="flex justify-start mt-12">
-            <input type="password" id="password" name="password" class="input outline-none py-3 px-4 rounded-lg inter w-60" placeholder="Enter password to confirm" onchange="replaceElement('save_label_dummy', 'save_label')">
+            <input type="password" id="password" name="password" class="input outline-none py-3 px-4 rounded-lg inter w-60" placeholder="Enter password to confirm" onchange="enableSaveButton();"  autocomplete="current-password">
         </div>
         <!-- save and apply button -->
         <div class="flex justify-start">