get intended-ui imported and add splash page

assets/js/app.js

@@ -1,7 +1,8 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import "../css/app.css"
+// import "../css/app.css"
+// const _css = require("../css/app.css");
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
@@ -16,6 +17,10 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import topbar from "topbar"
 import {LiveSocket} from "phoenix_live_view"
+import React from "react";
+import ReactDOM from "react-dom";
+import SplashPage from './pages/SplashPage';
+import { GlobalStyle } from '@intended/intended-ui';
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
@@ -34,3 +39,10 @@ liveSocket.connect()
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
 
+ReactDOM.render(<div>
+    <GlobalStyle />
+    <SplashPage />
+  </div>
+  ,
+  document.getElementById("root")
+);

assets/js/pages/SplashPage.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { CenteredContainer, SplashIconHeader, Header1, Header3, Spacer, Button } from '@intended/intended-ui';
+
+const SplashPage = () => {
+  return (
+    <CenteredContainer fullscreen>
+      <CenteredContainer wide>
+        <SplashIconHeader />
+        <Header1>Securely Share Your Secrets</Header1>
+        <Header3>
+          With Intended Link you can easily share messages and files securely
+          and secretly.
+        </Header3>
+        <Spacer />
+        <Button variant="secondary" boldFont onClick={() => {}}>
+          START SHARING
+        </Button>
+      </CenteredContainer>
+    </CenteredContainer>
+  );
+};
+
+export default SplashPage;

assets/package.json

@@ -7,23 +7,32 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
+    "@intended/intended-ui": "0.1.16",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
     "phoenix_live_view": "file:../deps/phoenix_live_view",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "topbar": "^0.1.4"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
+    "@types/phoenix": "^1.5.3",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
     "babel-loader": "^8.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
-    "sass-loader": "^8.0.2",
-    "node-sass": "^4.13.1",
     "hard-source-webpack-plugin": "^0.13.1",
     "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "sass-loader": "^8.0.2",
+    "source-map-loader": "^3.0.0",
     "terser-webpack-plugin": "^2.3.2",
+    "ts-loader": "8.2.0",
+    "typescript": "^4.5.2",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.2"
   }

assets/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "allowJs": true,
+    "jsx": "react",
+    "outDir": "./dist/",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "exclude": [
+    "/node_modules/**/*",
+  ]
+}
+

assets/webpack.config.js

@@ -28,11 +28,16 @@ module.exports = (env, options) => {
     module: {
       rules: [
         {
-          test: /\.js$/,
+          test: /\.(j|t)s.?$/,
           exclude: /node_modules/,
-          use: {
+          use: [
-            loader: 'babel-loader'
+            {
-          }
+              loader: "babel-loader"
+            },
+            {
+              loader: "ts-loader"
+            }
+          ]
         },
         {
           test: /\.[s]?css$/,
@@ -44,6 +49,9 @@ module.exports = (env, options) => {
         }
       ]
     },
+    resolve: {
+      extensions: [".ts", ".tsx", ".js", ".jsx"]
+    },
     plugins: [
       new MiniCssExtractPlugin({ filename: '../css/app.css' }),
       new CopyWebpackPlugin([{ from: 'static/', to: '../' }])

lib/entendu_web/controllers/link_controller.ex

@@ -5,15 +5,25 @@ defmodule EntenduWeb.LinkController do
 
   use EntenduWeb, :controller
 
-  def just(conn, _params) do
+  def just_page(conn, _params) do
     render(conn, "just.html")
   end
 
-  def for(conn, _params) do
+  def just(conn, %{encrypted_contents: contents}) do
+    conn
+    |> put_session(:encrypted_contents, contents)
+    |> redirect(to: "/just/for")
+  end
+
+  def for_page(conn, _params) do
     render(conn, "for.html")
   end
 
-  def you(conn, _params) do
+  def for(conn, %{username: username, service: service}) do
+    {:error, "not implemented"}
+  end
+
+  def you_page(conn, _params) do
     render(conn, "you.html")
   end
 end

lib/entendu_web/router.ex

@@ -18,9 +18,11 @@ defmodule EntenduWeb.Router do
     pipe_through :browser
 
     get "/", PageController, :index
-    get "/just", LinkController, :just
+    get "/just", LinkController, :just_page
-    get "/just/for", LinkController, :for
+    post "/just", LinkController, :just
-    get "/just/for/you", LinkController, :you
+    get "/just/for", LinkController, :for_page
+    post "/just/for", LinkController, :for
+    get "/just/for/you", LinkController, :you_page
   end
 
   scope "/auth", EntenduWeb do

lib/entendu_web/templates/layout/root.html.leex

@@ -10,6 +10,7 @@
     <script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
   </head>
   <body>
+    <div id="root">
     <header>
       <section class="container">
         <nav role="navigation">
@@ -26,5 +27,6 @@
       </section>
     </header>
     <%= @inner_content %>
+    </div>
   </body>
 </html>

lib/entendu_web/templates/link/just.html.eex

@@ -3,4 +3,8 @@
     <p>There will be a form here</p>
     <p>And a file input here</p>
     <p>Then a next button</p>
+    <form phx-submit="just">
+        <textarea></textarea>
+        <button>Submit</button>
+    </form>
 </section>

package-lock.json

@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}