From 75d883933063753db8268abfb338e263b8dae307 Mon Sep 17 00:00:00 2001
From: daniyal <daniyal@nostrdev.com>
Date: Thu, 15 Aug 2024 19:31:39 +0500
Subject: [PATCH] feat: add register popup

---
 src/layout/header.tsx | 165 +++++++++++++++++++++++++++++++++++++++---
 1 file changed, 154 insertions(+), 11 deletions(-)

diff --git a/src/layout/header.tsx b/src/layout/header.tsx
index 1b20fa3..324ca2e 100644
--- a/src/layout/header.tsx
+++ b/src/layout/header.tsx
@@ -134,17 +134,20 @@ export const Header = () => {
                   Settings
                 </Link>
                 {!userState.auth && (
-                  <a
-                    id='loginNav'
-                    className={navStyles.NMTI_SecInside_Link}
-                    onClick={handleLogin}
-                  >
-                    <img
-                      className={navStyles.NMTI_SecInside_LinkImg}
-                      src='/assets/img/DEG%20Mods%20Default%20PP.png'
-                    />
-                    Login
-                  </a>
+                  <>
+                    <RegisterButtonWithDialog />
+                    <a
+                      id='loginNav'
+                      className={navStyles.NMTI_SecInside_Link}
+                      onClick={handleLogin}
+                    >
+                      <img
+                        className={navStyles.NMTI_SecInside_LinkImg}
+                        src='/assets/img/DEG%20Mods%20Default%20PP.png'
+                      />
+                      Login
+                    </a>
+                  </>
                 )}
                 {userState.auth && userState.user && (
                   <div className={navStyles.NMTI_SecInside_Link}>
@@ -420,3 +423,143 @@ const TipButtonWithDialog = React.memo(() => {
     </>
   )
 })
+
+const RegisterButtonWithDialog = () => {
+  const [showPopUp, setShowPopUp] = useState(false)
+
+  return (
+    <>
+      <a
+        id='registerNav'
+        className={navStyles.NMTI_SecInside_Link}
+        onClick={() => setShowPopUp(true)}
+      >
+        Register
+      </a>
+      {showPopUp && (
+        <div id='PopUpMainRegister' className='popUpMain'>
+          <div className='ContainerMain'>
+            <div className='popUpMainCardWrapper'>
+              <div className='popUpMainCard popUpMainCardQR'>
+                <div className='popUpMainCardTop'>
+                  <div className='popUpMainCardTopInfo'>
+                    <h3>Create an account via</h3>
+                  </div>
+                  <div
+                    className='popUpMainCardTopClose'
+                    onClick={() => setShowPopUp(false)}
+                  >
+                    <svg
+                      xmlns='http://www.w3.org/2000/svg'
+                      viewBox='-96 0 512 512'
+                      width='1em'
+                      height='1em'
+                      fill='currentColor'
+                      style={{ zIndex: 1 }}
+                    >
+                      <path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'></path>
+                    </svg>
+                  </div>
+                </div>
+                <div className='pUMCB_Zaps'>
+                  <div className='pUMCB_ZapsInside'>
+                    <div className='inputLabelWrapperMain'>
+                      <label className='form-label labelMain'>
+                        Browser Extensions (Windows)
+                      </label>
+                      <p className='labelDescriptionMain'>
+                        Once you create your "account" on any of these, come
+                        back and click login, then sign-in with extension.
+                      </p>
+                    </div>
+                    <a
+                      className='btn btnMain btnMainPopup'
+                      role='button'
+                      target='_blank'
+                      href='https://getalby.com/'
+                    >
+                      Alby Browser Extension
+                    </a>
+                    <a
+                      className='btn btnMain btnMainPopup'
+                      role='button'
+                      href='https://keys.band/'
+                      target='_blank'
+                    >
+                      Keys.Band Browser Extension
+                    </a>
+                  </div>
+                  <p
+                    className='labelDescriptionMain'
+                    style={{
+                      padding: '10px',
+                      borderRadius: '10px',
+                      background: 'rgba(0,0,0,0.1)',
+                      border: 'solid 1px rgba(255,255,255,0.1)',
+                      margin: '10px 0 0 0'
+                    }}
+                  >
+                    Q:&nbsp;Why can't I create an account normally?
+                    <br />
+                    A: DEG Mods can't ban you or delete your content (we can
+                    only hide you), and the consequence of that is this kind of
+                    registration/login system.
+                  </p>
+                  <div className='dividerPopup'>
+                    <div className='dividerPopupLine'></div>
+                    <p>or</p>
+                    <div className='dividerPopupLine'></div>
+                  </div>
+                  <div className='pUMCB_ZapsInside'>
+                    <div className='inputLabelWrapperMain'>
+                      <label className='form-label labelMain'>
+                        Browser Extensions (iOS)
+                      </label>
+                      <p className='labelDescriptionMain'>
+                        Once you create your "account" on any of these, come
+                        back and click login, then sign-in with extension.
+                      </p>
+                    </div>
+                    <a
+                      className='btn btnMain btnMainPopup'
+                      role='button'
+                      href='https://apps.apple.com/us/app/nostore/id1666553677'
+                      target='_blank'
+                    >
+                      Nostore Browser Extension
+                    </a>
+                  </div>
+                  <div className='dividerPopup'>
+                    <div className='dividerPopupLine'></div>
+                    <p>or</p>
+                    <div className='dividerPopupLine'></div>
+                  </div>
+                  <div className='pUMCB_ZapsInside'>
+                    <div className='inputLabelWrapperMain'>
+                      <label className='form-label labelMain'>
+                        Android apps
+                      </label>
+                      <p className='labelDescriptionMain'>
+                        Once you create your "account" on any of these, come
+                        back and click login, then Advanced login, then sign-in
+                        with bunker URL.
+                      </p>
+                    </div>
+                    <a
+                      className='btn btnMain btnMainPopup'
+                      role='button'
+                      href='https://github.com/greenart7c3/Amber/releases'
+                      target='_blank'
+                    >
+                      Amber
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}