Ft: Logout (#257)

* added logout page * update text
NEARBuilders · Apr 28, 2024 · 0ff805b · 0ff805b
1 parent 640ac63
commit 0ff805b
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 12 deletions.
diff --git a/apps/builddao/widget/components/buttons/UserDropdown.jsx b/apps/builddao/widget/components/buttons/UserDropdown.jsx
@@ -190,18 +190,12 @@ return (
           My Profile
         </Link>
       </li>
-      {props.logOut && (
-        <li>
-          <button
-            className="dropdown-item"
-            type="button"
-            onClick={() => props.logOut()}
-          >
-            <LogOut />
-            Sign Out
-          </button>
-        </li>
-      )}
+      <li>
+        <Link className="dropdown-item" type="button" to={"/logout"}>
+          <LogOut />
+          Sign Out
+        </Link>
+      </li>
     </ul>
   </StyledDropdown>
 );
diff --git a/apps/builddao/widget/logout.jsx b/apps/builddao/widget/logout.jsx
@@ -0,0 +1,98 @@
+const LogoutContainer = styled.div`
+  background-color: #000000;
+  color: #fff;
+  height: 100%;
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    max-height: 100vh;
+    object-fit: cover;
+    object-position: center top;
+    position: absolute;
+    top: 0%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .card {
+    z-index: 5;
+    background: transparent;
+    display: flex;
+    max-width: 500px;
+    width: 100%;
+    max-height: 550px;
+    padding: 80px 24px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+
+    img {
+      width: auto;
+      height: 54px;
+      object-fit: cover;
+    }
+
+    h1 {
+      color: var(--white-100, #fff);
+      text-align: center;
+
+      /* H1/small */
+      font-size: 2rem;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 100%; /* 32px */
+    }
+
+    button {
+      all: unset;
+      cursor: pointer;
+      display: flex;
+      padding: 16px 20px;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      align-self: stretch;
+
+      border-radius: 8px;
+      background: #eca227;
+
+      &:hover {
+        background: #e49b48;
+      }
+
+      color: var(--black-100, #000);
+
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: normal;
+    }
+  }
+`;
+
+const LogoutView = () => {
+  return (
+    <LogoutContainer>
+      <div className="card">
+        <img
+          src="https://ipfs.near.social/ipfs/bafkreihbwho3qfvnu4yss3eh5jrx6uxhrlzdgtdjyzyjrpa6odro6wdxya"
+          alt="Build DAO Logo"
+        />
+        <button onClick={props.logOut}>Sign Out</button>
+      </div>
+      <img
+        src="https://ipfs.near.social/ipfs/bafybeibqnkvafyflci4iap73prugmjw4wlwmrazbiudvnsyr34yzmk75i4"
+        alt="Preview of Profiles"
+      />
+    </LogoutContainer>
+  );
+};
+
+return <LogoutView />;
diff --git a/src/App.js b/src/App.js
@@ -42,6 +42,7 @@ import Viewer from "./pages/Viewer";
 import { KEYPOM_OPTIONS } from "./utils/keypom-options";
 import { TrialAccountGenerator } from "./components/TrialAccountGenerator";
 import { Analytics } from "@vercel/analytics/react";
+import LogoutPage from "./pages/LogoutPage";
 
 export const refreshAllowanceObj = {};
 const documentationHref = "https://docs.near.org/bos/overview";
@@ -213,6 +214,10 @@ function App() {
               <BosLoaderBanner />
               <JoinPage {...passProps} />
             </Route>
+            <Route path={"/logout"}>
+              <BosLoaderBanner />
+              <LogoutPage {...passProps} />
+            </Route>
             <Route path={"/library"}>
               <Redirect to={`${index}?page=library`} />
             </Route>

diff --git a/src/data/widgets.js b/src/data/widgets.js
@@ -10,6 +10,7 @@ export const NetworkId =
 const TestnetWidgets = {
   default: "builddao.testnet/widget/app",
   login: "builddao.testnet/widget/login",
+  logout: "builddao.testnet/widget/logout",
   trialAccountBanner: "builddao.testnet/widget/TrialAccountBanner",
   onboardingFlow: "builddao.testnet/widget/OnboardingFlow",
 
@@ -27,6 +28,7 @@ const TestnetWidgets = {
 const MainnetWidgets = {
   default: "buildhub.near/widget/app",
   login: "buildhub.near/widget/login",
+  logout: "buildhub.near/widget/logout",
   trialAccountBanner: "buildhub.near/widget/TrialAccountBanner",
   onboardingFlow: "buildhub.near/widget/OnboardingFlow",
 

diff --git a/src/pages/LogoutPage.js b/src/pages/LogoutPage.js
@@ -0,0 +1,20 @@
+import { Widget } from "near-social-vm";
+import React from "react";
+import { useBosLoaderStore } from "../stores/bos-loader";
+
+export default function LogoutPage({ signedIn, widgets, ...passProps }) {
+  const redirectMapStore = useBosLoaderStore();
+  const CurrentView = signedIn ? widgets.logout : widgets.default;
+
+  return (
+    <Widget
+      src={CurrentView}
+      props={{
+        ...passProps,
+      }}
+      config={{
+        redirectMap: redirectMapStore.redirectMap,
+      }}
+    />
+  );
+}