Merge pull request #45 from magiclabs/jerryliu-ch33208-create-hello-w…

…orld-template-for-magic-dashboard Jerryliu ch33208 create hello world template for magic dashboard
magiclabs · May 19, 2021 · 6b6495e · 6b6495e
2 parents 50a2422 + c26f11d
commit 6b6495e
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 0 deletions.
diff --git a/scaffolds/hello-world-quickstart/scaffold.tsx b/scaffolds/hello-world-quickstart/scaffold.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Template, Zombi } from 'compiled/zombi';
+import { createScaffold } from 'cli/utils/scaffold-helpers';
+import { mergePrompts } from 'cli/utils/merge-prompts';
+import { NpmClientPrompt, PublishableApiKeyPrompt } from 'scaffolds/prompts';
+
+type HelloWorldData = NpmClientPrompt.Data & PublishableApiKeyPrompt.Data;
+
+export default createScaffold<HelloWorldData>(
+  (props) => (
+    <Zombi {...props} prompts={mergePrompts(PublishableApiKeyPrompt.questions, NpmClientPrompt.questions)}>
+      <Template source="./" />
+    </Zombi>
+  ),
+
+  {
+    shortDescription: 'Hello World',
+    order: 0,
+    installDependenciesCommand: NpmClientPrompt.getInstallCommand,
+    startCommand: NpmClientPrompt.getStartCommand('start'),
+    flags: {
+      ...NpmClientPrompt.flags,
+      ...PublishableApiKeyPrompt.flags,
+    },
+  },
+);
diff --git a/scaffolds/hello-world-quickstart/template/index.html b/scaffolds/hello-world-quickstart/template/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Magic Hello World 🌎</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <!-- 1️⃣ Install Magic SDK -->
+    <script src="https://cdn.jsdelivr.net/npm/magic-sdk@latest/dist/magic.js"></script>
+    <script>
+      /* 2️⃣ Initialize Magic Instance */
+      let magic = new Magic("<%= publishableApiKey %>");
+
+      /* 3️⃣ Implement Render Function */
+      const render = async () => {
+        let html = "";
+
+        const isLoggedIn = await magic.user.isLoggedIn();
+
+        if (isLoggedIn) {
+          /* Get user metadata including email */
+          const userMetadata = await magic.user.getMetadata();
+          html = `
+              <h1>Current user: ${userMetadata.email}</h1>
+              <button onclick="handleLogout()">Logout</button>
+            `;
+        } else {
+
+          /* Show login form if user is not logged in */
+          html = `
+            <h1>Please sign up or login 1</h1>
+            <form onsubmit="handleLogin(event)">
+              <input type="email" name="email" required="required" placeholder="Enter your email" />
+              <button type="submit">Send</button>
+            </form>
+          `;
+        }
+
+        document.getElementById("app").innerHTML = html;
+      };
+
+      const renderLoggedIn = async () => {
+        let html ='';
+        try {
+
+          /* Get user metadata including email */
+          const userMetadata = await magic.user.getMetadata();
+
+          html = `
+              <h1>Current user: ${userMetadata.email}</h1>
+                  <button onclick="handleLogout()">Logout</button>
+              <h1>Check out your first sign up!</h1>
+            `;
+
+          window.open('https://dashboard.magic.link/referral/success');
+        } catch {
+          window.location.href = window.location.origin;
+        }
+        document.getElementById("app").innerHTML = html;
+      }
+
+      /* 4️⃣ Implement Login Handler */
+      const handleLogin = async (e) => {
+        e.preventDefault();
+        const email = new FormData(e.target).get("email");
+        if (email) {
+          /* One-liner login 🤯 */
+          await magic.auth.loginWithMagicLink({ email });
+          renderLoggedIn();
+        }
+      };
+
+      /* 5️⃣ Implement Logout Handler */
+      const handleLogout = async () => {
+        await magic.user.logout();
+        render();
+      };
+    </script>
+  </head>
+  <body onload="render()">
+    <div id="app">
+      Loading...
+    </div>
+  </body>
+</html>
diff --git a/scaffolds/hello-world-quickstart/template/package.json b/scaffolds/hello-world-quickstart/template/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "template",
+  "version": "0.1.0",
+  "description": "A vanilla HTML + JS app with Magic passwordless authentication.",
+  "main": "index.html",
+  "scripts": {
+    "start": "http-server -a localhost --proxy http://localhost:8080? -o /"
+  },
+  "dependencies": {
+    "http-server": "^0.12.3"
+  }
+}
diff --git a/scaffolds/hello-world-quickstart/template/styles.css b/scaffolds/hello-world-quickstart/template/styles.css
@@ -0,0 +1,32 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  height: 100vh;
+  display: grid;
+  font-size: 18px;
+}
+
+#app {
+  align-self: center;
+  justify-self: center;
+  background-color: #eee;
+  text-align: center;
+  width: 300px;
+  padding: 27px 18px;
+}
+
+h1 {
+  margin: 0;
+  padding-bottom: 18px;
+  font-size: 18px;
+}
+
+input {
+  margin-bottom: 9px;
+}
+
+input,
+button {
+  padding: 9px;
+  font-size: 18px;
+}