Merge pull request #52 from CodeForPhilly/basic_auth

Basic auth

Author: taichan03

config/env/env.dev config/env/.env.devconfig/env/env.dev renamed to config/env/.env.dev

@@ -51,11 +51,9 @@ const Header = () => {
           "xl:px-50 mx-auto hidden h-20 items-center justify-between border-b border-gray-300 bg-white  px-4 sm:px-6 md:px-8 lg:flex lg:px-8 2xl:px-56"
         }
       >
-          <Link to="/">
-            <span className="header_logo  ml-72 text-xl font-bold">
-              Balancer
-            </span>
-          </Link>
+        <Link to="/">
+          <span className="header_logo  ml-72 text-xl font-bold">Balancer</span>
+        </Link>
         <nav className="flex w-full items-center justify-center font-satoshi text-base">
           <div
             onMouseEnter={handleMouseEnter}
@@ -66,8 +64,8 @@ const Header = () => {
             <span
               className={` mr-9 text-black ${
                 showFeaturesMenu
-                  ? "cursor-pointer mx-4 border-b-2 border-blue-600 hover:border-b-2 hover:border-blue-600 hover:no-underline"
-                  : "cursor-pointer mx-4 hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
+                  ? "mx-4 cursor-pointer border-b-2 border-blue-600 hover:border-b-2 hover:border-blue-600 hover:no-underline"
+                  : "mx-4 cursor-pointer hover:border-b-2 hover:border-blue-600 hover:text-black hover:no-underline"
               }`}
             >
               Features
@@ -106,11 +104,8 @@ const Header = () => {
             <Chat showChat={showChat} setShowChat={setShowChat} />
           </>
         </nav>
-        
-            <span className="text-white   mr-72 text-xl font-bold">
-              Balancer
-            </span>
-     
+
+        <span className="mr-72   text-xl font-bold text-white">Balancer</span>
       </div>
       <MdNavBar />
     </header>

frontend/src/components/Header/Header.tsx

@@ -8,14 +8,14 @@ interface FormValues {
   name: string;
   email: string;
   message: string;
-  image: string,
+  image: string;
 }
 
 const FeedbackForm = () => {
   const [feedback, setFeedback] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
   const [isPressed, setIsPressed] = useState(false);
-  const [selectedImage, setSelectedImage] = useState(null);
+  const [selectedImage, setSelectedImage] = useState<File | null>(null);
 
   const feedbackValidation = object().shape({
     name: string().required("Name is a required field"),
@@ -27,13 +27,12 @@ const FeedbackForm = () => {
 
   // implement useEffect to ensure that submit button causes changes in state
   useEffect(() => {
-
-    // Update a feedback message div to render after Submit 
+    // Update a feedback message div to render after Submit
     const feedbackMessage = document.getElementById("feedback-message");
     if (feedbackMessage) {
       feedbackMessage.innerText = feedback;
     }
-    
+
     // Update an error message div after Submit
     const errorMessageDiv = document.getElementById("error-message");
     if (errorMessageDiv) {
@@ -42,7 +41,7 @@ const FeedbackForm = () => {
   }, [feedback, errorMessage]);
 
   //reset the form fields and states when clicking cancel
-  const handleCancel =() => {
+  const handleCancel = () => {
     resetForm();
     setFeedback("");
     setErrorMessage("");
@@ -51,7 +50,7 @@ const FeedbackForm = () => {
   const handleMouseDown = () => {
     setIsPressed(true);
   };
-  
+
   const handleMouseUp = () => {
     setIsPressed(false);
   };
@@ -89,17 +88,20 @@ const FeedbackForm = () => {
         setFeedback("");
         try {
           // Call 1: Create Feedback request
-          const response = await axios.post("http://localhost:8000/api/jira/create_new_feedback/", {
-            name: values.name,
-            email: values.email,
-            message: values.message,
-          }, 
-          {
-            headers: {
-              "Content-Type": "application/json",
+          const response = await axios.post(
+            "http://localhost:8000/api/jira/create_new_feedback/",
+            {
+              name: values.name,
+              email: values.email,
+              message: values.message,
             },
-          });
-        
+            {
+              headers: {
+                "Content-Type": "application/json",
+              },
+            }
+          );
+
           // check to see if request was successful and get the issue key
           if (response.data.status === 201) {
             const issueKey = response.data.issueKey;
@@ -143,50 +145,79 @@ const FeedbackForm = () => {
               } else {
                 setErrorMessage("Error uploading the image.");
                 console.log(response2);
-              } 
+              }
             } else {
               setFeedback("Feedback submitted successfully!");
               resetForm();
-            } 
-          } else {
-              setErrorMessage("Error creating a new feedback request.");
             }
-          } catch (error) {
-            setErrorMessage("An error occurred while submitting the form");
+          } else {
+            setErrorMessage("Error creating a new feedback request.");
+          }
+        } catch (error) {
+          setErrorMessage("An error occurred while submitting the form");
         }
       },
       validationSchema: feedbackValidation,
     });
 
   return (
     <>
-    <div className="flex w-[100%] justify-between">
-      <h2 className="header_logo cursor-pointer font-satoshi text-xl font-bold text-gray-600  hover:text-blue-600 ">
-        Leave Us Feedback!
-      </h2>
-    </div>
+      <div className="flex w-[100%] justify-between">
+        <h2 className="header_logo cursor-pointer font-satoshi text-xl font-bold text-gray-600  hover:text-blue-600 ">
+          Leave Us Feedback!
+        </h2>
+      </div>
       <section className="mx-auto w-full">
         <form onSubmit={handleSubmit} className="mt-2">
           <div className="summary_box font_body">
-          <fieldset className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-            <dt className="flex text-sm font-semibold leading-6 text-gray-900">Feedback Type:</dt>
-            <dd className="mt-2 pl-24 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-              <div className="flex items-center gap-x-3 pr-16">
-                <input id="feature-request" name="feedback-type" type="radio" className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" value="Yes" />
-                <label className="block text-sm font-medium leading-6 text-gray-900" htmlFor="psychotic-yes">
-                  Feature Request
-                </label>
-                <input id="bug" name="feedback-type" type="radio" className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" value="No" />
-                <label className="block text-sm font-medium leading-6 text-gray-900" htmlFor="psychotic-no">
-                  Bug
-                </label>
-                <input id="general-improvements" name="feedback-type" type="radio" className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" value="No" />
-                <label className="block text-sm font-medium leading-6 text-gray-900" htmlFor="psychotic-no">
-                  General Improvements
-                </label>
-              </div>
-            </dd>
-          </fieldset>
+            <fieldset className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt className="flex text-sm font-semibold leading-6 text-gray-900">
+                Feedback Type:
+              </dt>
+              <dd className="mt-2 pl-24 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                <div className="flex items-center gap-x-3 pr-16">
+                  <input
+                    id="feature-request"
+                    name="feedback-type"
+                    type="radio"
+                    className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                    value="Yes"
+                  />
+                  <label
+                    className="block text-sm font-medium leading-6 text-gray-900"
+                    htmlFor="psychotic-yes"
+                  >
+                    Feature Request
+                  </label>
+                  <input
+                    id="bug"
+                    name="feedback-type"
+                    type="radio"
+                    className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                    value="No"
+                  />
+                  <label
+                    className="block text-sm font-medium leading-6 text-gray-900"
+                    htmlFor="psychotic-no"
+                  >
+                    Bug
+                  </label>
+                  <input
+                    id="general-improvements"
+                    name="feedback-type"
+                    type="radio"
+                    className="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                    value="No"
+                  />
+                  <label
+                    className="block text-sm font-medium leading-6 text-gray-900"
+                    htmlFor="psychotic-no"
+                  >
+                    General Improvements
+                  </label>
+                </div>
+              </dd>
+            </fieldset>
             <div className="mb-4">
               <fieldset className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                 <dt className="flex text-sm font-semibold leading-6 text-gray-900">
@@ -279,39 +310,38 @@ const FeedbackForm = () => {
                   </label>
                 </dt>
                 <dd className="mt-2 pl-24 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
-                  <div className="relative rounded-xl border-dashed border-2 border-gray-500 p-4 bg-gray-100">
-                    <label
-                      htmlFor="image"
-                      className="cursor-pointer block"
-                    >
-                      <div className="w-32 h-32 mx-auto mb-2">
+                  <div className="relative rounded-xl border-2 border-dashed border-gray-500 bg-gray-100 p-4">
+                    <label htmlFor="image" className="block cursor-pointer">
+                      <div className="mx-auto mb-2 h-32 w-32">
                         {selectedImage ? (
                           <>
-                            <img 
+                            <img
                               src={URL.createObjectURL(selectedImage)}
                               alt="Selected Image"
-                              className="h-full w-full object-cover rounded-lg"
+                              className="h-full w-full rounded-lg object-cover"
                             />
                             <button
                               type="button"
                               onClick={(e) => {
                                 e.preventDefault();
                                 setSelectedImage(null);
-                                const fileInput = document.getElementById("image");
+                                const fileInput = document.getElementById(
+                                  "image"
+                                ) as HTMLInputElement;
                                 if (fileInput) {
                                   fileInput.value = "";
                                 }
                               }}
-                              className="absolute top-2 right-2 bg-white rounded-full p-1.5 cursor-pointer"
+                              className="absolute right-2 top-2 cursor-pointer rounded-full bg-white p-1.5"
                             >
                               X
                             </button>
                           </>
                         ) : (
                           <img
-                            src="../src/assets/upload-image-icon.png" 
+                            src="../src/assets/upload-image-icon.png"
                             alt="Upload Image"
-                            className="h-full w-full object-cover rounded-lg"
+                            className="h-full w-full rounded-lg object-cover"
                           />
                         )}
                       </div>
@@ -321,9 +351,9 @@ const FeedbackForm = () => {
                       id="image"
                       name="image"
                       onChange={(e) => {
-                        const file = e.target.files?.[0]; 
+                        const file = e.target.files?.[0];
                         if (file) {
-                          // Handle the selected file 
+                          // Handle the selected file
                           setSelectedImage(file);
                           handleChange({
                             target: {
@@ -333,44 +363,46 @@ const FeedbackForm = () => {
                           });
                         }
                       }}
-                      className="hidden" 
+                      className="hidden"
                     />
                   </div>
                 </dd>
               </fieldset>
             </div>
             <div className="flex items-center justify-end">
-            <div className="flex w-full justify-end">
+              <div className="flex w-full justify-end">
+                <button
+                  type="button"
+                  className="btnGray mr-5"
+                  onClick={handleCancel}
+                >
+                  Cancel
+                </button>
+              </div>
               <button
-                type="button"
-                className="btnGray mr-5"
-                onClick={handleCancel}
+                type="submit"
+                className={`btnBlue  ${
+                  isPressed &&
+                  "transition-transform focus:outline-none focus:ring focus:ring-blue-200"
+                }${
+                  isLoading
+                    ? "bg-white-600 transition-transform focus:outline-none focus:ring focus:ring-blue-500"
+                    : ""
+                }`}
+                onMouseDown={handleMouseDown}
+                onMouseUp={handleMouseUp}
+                disabled={isLoading}
               >
-                Cancel
+                {isLoading ? (
+                  <div className="flex items-center  justify-center">
+                    <div className="mr-2 h-4 w-4 animate-ping rounded-full bg-white"></div>
+                    <p>Loading...</p>
+                  </div>
+                ) : (
+                  <p>Submit</p>
+                )}
               </button>
             </div>
-            <button
-                  type="submit"
-                  className={`btnBlue  ${isPressed &&
-                    "transition-transform focus:outline-none focus:ring focus:ring-blue-200"
-                    }${isLoading
-                      ? "bg-white-600 transition-transform focus:outline-none focus:ring focus:ring-blue-500"
-                      : ""
-                    }`}
-                  onMouseDown={handleMouseDown}
-                  onMouseUp={handleMouseUp}
-                  disabled={isLoading} 
-                >
-                  {isLoading ? ( 
-                    <div className="flex items-center  justify-center">
-                      <div className="mr-2 h-4 w-4 animate-ping rounded-full bg-white"></div>
-                      <p>Loading...</p>
-                    </div>
-                  ) : (
-                    <p>Submit</p>
-                  )}
-                </button>
-            </div>
             <div id="feedback-message">{feedback}</div>
             <div id="error-message">{errorMessage}</div>
           </div>

frontend/src/pages/Feedback/FeedbackForm.tsx

@@ -0,0 +1,18 @@
+from django.db import models
+from django.contrib.auth.models import User
+
+class RegistrationProfile(models.Model):
+    user = models.OneToOneField(User, on_delete=models.CASCADE)
+    activation_key = models.CharField(max_length=40)
+
+    def save(self, *args, **kwargs):
+        # Generate a unique activation key when saving the model
+        if not self.activation_key:
+            self.activation_key = self.generate_activation_key()
+        super(RegistrationProfile, self).save(*args, **kwargs)
+
+    def generate_activation_key(self):
+        # Implement a function to generate a unique activation key (you may use a library like uuid)
+        # This is a simple example, you may want to customize this based on your requirements
+        import uuid
+        return str(uuid.uuid4())