From 95480386311b10b6efe471fc937c9daf2f36846b Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Wed, 13 Jan 2021 21:59:49 +0100
Subject: [PATCH] added links to marvel for work in progress parts (#297)

---
 src/authentication/AuthenticationSection.tsx   |  7 ++++---
 .../work-in-progress/WorkInProgress.tsx        | 16 ++++++++++++++++
 .../work-in-progress/work-in-progress.css      | 18 ++++++++++++++++++
 .../IdentityProvidersSection.tsx               |  7 ++++---
 4 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 src/components/work-in-progress/WorkInProgress.tsx
 create mode 100644 src/components/work-in-progress/work-in-progress.css

diff --git a/src/authentication/AuthenticationSection.tsx b/src/authentication/AuthenticationSection.tsx
index 043ac8c86c..44c6855047 100644
--- a/src/authentication/AuthenticationSection.tsx
+++ b/src/authentication/AuthenticationSection.tsx
@@ -1,5 +1,6 @@
 import React from "react";
+import { WorkInProgress } from "../components/work-in-progress/WorkInProgress";
 
-export const AuthenticationSection = () => {
-  return <>The Authentication Page</>;
-};
+export const AuthenticationSection = () => (
+  <WorkInProgress marvelLink="https://marvelapp.com/prototype/bh91013/screen/75647039" />
+);
diff --git a/src/components/work-in-progress/WorkInProgress.tsx b/src/components/work-in-progress/WorkInProgress.tsx
new file mode 100644
index 0000000000..177671ecae
--- /dev/null
+++ b/src/components/work-in-progress/WorkInProgress.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+import "./work-in-progress.css";
+
+type WorkInProgressProps = {
+  marvelLink: string;
+};
+
+export const WorkInProgress = ({ marvelLink }: WorkInProgressProps) => (
+  <div>
+    This page is not completed yet, but this is what it's going to look like:
+    <div className="container">
+      <iframe className="responsive-iframe" src={marvelLink}></iframe>
+    </div>
+  </div>
+);
diff --git a/src/components/work-in-progress/work-in-progress.css b/src/components/work-in-progress/work-in-progress.css
new file mode 100644
index 0000000000..e3993031b5
--- /dev/null
+++ b/src/components/work-in-progress/work-in-progress.css
@@ -0,0 +1,18 @@
+
+.container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+}
+
+/* Then style the iframe to fit in the container div with full height and width */
+.responsive-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/src/identity-providers/IdentityProvidersSection.tsx b/src/identity-providers/IdentityProvidersSection.tsx
index 417a6f4226..515f75a482 100644
--- a/src/identity-providers/IdentityProvidersSection.tsx
+++ b/src/identity-providers/IdentityProvidersSection.tsx
@@ -1,5 +1,6 @@
 import React from "react";
+import { WorkInProgress } from "../components/work-in-progress/WorkInProgress";
 
-export const IdentityProvidersSection = () => {
-  return <>The Identity Providers Page</>;
-};
+export const IdentityProvidersSection = () => (
+  <WorkInProgress marvelLink="https://marvelapp.com/prototype/55c2d8f/screen/75697040" />
+);