Auth & Downloadable Images (#69)

* update lock file

* add basic guard to archive

* authentication v1

* move containers into components dir

* make own modals dir

* better modals and downloading images

* show footer when src

* previous and next image buttons

* fix theme rendering

* update api url

Author: rexgreenway

package-lock.json

@@ -1,10 +1,4 @@
-import { Image, Size } from "./model";
-
-// CONSTANTS
-// const API_URL = "http://127.0.0.1:8000";
-const API_URL = "https://rex-api-505972842640.europe-west2.run.app";
-
-const THUMBNAIL_BUCKET = "rex-thumbnails";
+import { API_URL, Image, Size, THUMBNAIL_BUCKET, TokenResponse } from "./model";
 
 // UTILITY FUNCS
 export const getThumbnailURL = (image_name: string): string => {
@@ -17,17 +11,36 @@ export const getThumbnailURL = (image_name: string): string => {
  * Wake's up the API.
  */
 export async function wakeUp() {
-  try {
-    const response = await fetch(`${API_URL}/`);
-    if (!response.ok) {
-      throw new Error(`api did not wake up!`);
-    }
-  } catch (error) {
-    console.log(error);
-    throw error;
+  const response = await fetch(`${API_URL}/`);
+  if (!response.ok) {
+    console.error(`Rex API did not wake up... ${response.status}`);
   }
 }
 
+// - AUTH
+
+/**
+ * Authenticates and fetches Bearer Token.
+ *
+ * @param {FormData} authForm
+ *
+ * @returns {TokenResponse} Token Response.
+ */
+export async function getToken(authForm: FormData): Promise<TokenResponse> {
+  const response = await fetch(`${API_URL}/token`, {
+    method: "POST",
+    body: authForm,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Fetching Token failed | status: ${response.status}`);
+  }
+
+  return await response.json();
+}
+
+// - PHOTOGRAPHY
+
 /**
  * Fetches a photo from a given album.
  *
@@ -37,22 +50,63 @@ export async function wakeUp() {
  * @returns {Image} The desired photo.
  */
 export async function getPhoto(
+  token: string,
   image_name: string,
-  size: Size = Size.LARGE
+  size: Size = Size.MEDIUM,
 ): Promise<Image> {
   const encoded_path = encodeURI(`${image_name}?size=${size}`);
   const url = `${API_URL}/photography/${encoded_path}`;
 
-  try {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error(
-        `failed to fetch photo '${image_name}' | status: ${response.status}`
-      );
-    }
-    return await response.json();
-  } catch (error) {
-    console.log(error);
-    throw error;
+  const response = await fetch(url, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+
+  if (response.status == 401) {
+    throw new Error(`Fetching Photo failed | unauthenticated`);
+  } else if (!response.ok) {
+    throw new Error(
+      `failed to fetch photo '${image_name}' | status: ${response.status}`,
+    );
   }
+
+  return await response.json();
+}
+
+/**
+ * Downloads a photo.
+ *
+ * @param {string} image_name
+ * @param {Size} [size=Size.MEDIUM] Optional
+ *
+ * @returns {Image} The desired photo.
+ */
+export async function downloadPhoto(
+  token: string,
+  image_name: string,
+  size: Size = Size.MEDIUM,
+): Promise<void> {
+  const encoded_path = encodeURI(`${image_name}/download?size=${size}`);
+  const url = `${API_URL}/photography/${encoded_path}`;
+
+  const response = await fetch(url, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+
+  if (response.status == 401) {
+    throw new Error(`Fetching Photo failed | unauthenticated`);
+  } else if (!response.ok) {
+    throw new Error(
+      `failed to download photo '${image_name}' | status: ${response.status}`,
+    );
+  }
+
+  const blob = await response.blob();
+  const blobUrl = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = blobUrl;
+  link.download = image_name;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(blobUrl);
 }

src/api/rex-api/fetchPhotography.ts

@@ -1,3 +1,9 @@
+// CONSTANTS
+// export const API_URL = "http://127.0.0.1:8080";
+export const API_URL = "https://rex-api-505972842640.europe-west2.run.app";
+
+export const THUMBNAIL_BUCKET = "rex-thumbnails";
+
 interface PhotoInfo {
   alt?: string; // alt text for the photo
 }
@@ -11,6 +17,11 @@ export interface Album {
 
 // RESPONSE TYPES
 
+export interface TokenResponse {
+  access_token: string;
+  token_type: string;
+}
+
 export interface Image {
   url: string;
   name?: string;
@@ -19,5 +30,6 @@ export interface Image {
 
 export enum Size {
   THUMBNAIL = "thumbnail",
+  MEDIUM = "medium",
   LARGE = "large",
 }

src/api/rex-api/model.ts

@@ -1,6 +1,6 @@
 import PlaceIcon from "@mui/icons-material/Place";
 
-import Container from "../containers/Container";
+import Container from "./containers/Container";
 import { PDFLink } from "./CustomLinks";
 import { Tags } from "./Tags";
 

src/components/About.tsx

@@ -0,0 +1,24 @@
+.Wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.PasswordForm {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--background);
+  gap: 5px;
+  padding: 20px;
+  border-radius: 20px;
+}
+
+.Back {
+  background-color: var(--background);
+  gap: 5px;
+  padding: 20px;
+  border-radius: 20px;
+  cursor: pointer;
+  text-align: center;
+}

src/components/Auth.module.css

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useAuth } from "@contexts";
+
+import { getToken } from "../api/rex-api/fetchPhotography";
+
+import styles from "./Auth.module.css";
+
+export const PasswordForm = ({
+  onAuthenticated,
+}: {
+  onAuthenticated: () => void;
+}) => {
+  const { storeToken } = useAuth();
+
+  const navigate = useNavigate();
+
+  const [wrongPwEntered, setWrongPwEntered] = useState<boolean>(false);
+
+  const enterPassword = (authForm: FormData) => {
+    authForm.set("username", "rexgreenway");
+    getToken(authForm)
+      .then((resp) => {
+        storeToken(resp.access_token);
+        onAuthenticated();
+      })
+      .catch((error) => {
+        console.error("Authentication Error: ", error);
+        setWrongPwEntered(true);
+      });
+  };
+
+  return (
+    <div className={styles.Wrapper}>
+      <form
+        className={styles.PasswordForm}
+        onSubmit={(e) => {
+          e.preventDefault();
+          const formData = new FormData(e.currentTarget);
+          enterPassword(formData);
+        }}
+      >
+        <h2>Enter Password:</h2>
+        <div>
+          <input type="password" name="password" />
+        </div>
+        {wrongPwEntered && <h3 style={{ color: "red" }}>WRONG PASSWORD</h3>}
+      </form>
+      <div className={styles.Back} onClick={() => navigate("..")}>
+        <p>{"<-"} Back to Home</p>
+      </div>
+    </div>
+  );
+};

src/components/Auth.tsx

@@ -1,6 +1,6 @@
 import { GitHub, Instagram, LinkedIn, ViewStream } from "@mui/icons-material";
 
-import Container from "../containers/Container";
+import Container from "./containers/Container";
 import { ToggleThemeButton } from "./elements";
 
 import styles from "./Footer.module.css";

src/components/Footer.tsx

@@ -5,7 +5,7 @@ import RexLogo from "../assets/R-Logo.svg?react";
 
 import { CustomRouteObject } from "../router/routes";
 
-import Container from "../containers/Container";
+import Container from "./containers/Container";
 
 import styles from "./Header.module.css";