From 0ea2bd502c8611ee028092355d4b59387ab1ac4d Mon Sep 17 00:00:00 2001
From: Aiji Uejima <uejima.aiji@a-tm.co.jp>
Date: Sat, 6 Nov 2021 12:30:16 +0900
Subject: [PATCH] chore: update example

---
 .idea/next-fortress.iml               |  2 +
 example/src/pages/_app.tsx            | 10 ++--
 example/src/pages/auth0/authed.tsx    |  1 -
 example/src/pages/auth0/index.tsx     |  4 +-
 example/src/pages/cognito/authed.tsx  |  1 -
 example/src/pages/cognito/index.tsx   |  4 +-
 example/src/pages/firebase/authed.tsx |  3 +-
 example/src/pages/firebase/index.tsx  |  4 +-
 example/src/pages/index.tsx           |  2 +-
 example/src/pages/ip/[bar].tsx        | 77 ---------------------------
 example/src/pages/ip/_middleware.ts   |  2 +-
 example/src/pages/ip/admin.tsx        | 36 +++++++++++++
 example/src/pages/ip/index.tsx        | 16 ++++--
 example/src/styles/Home.module.css    |  3 ++
 14 files changed, 68 insertions(+), 97 deletions(-)
 delete mode 100644 example/src/pages/ip/[bar].tsx
 create mode 100644 example/src/pages/ip/admin.tsx

diff --git a/.idea/next-fortress.iml b/.idea/next-fortress.iml
index 66c22de..674ed47 100644
--- a/.idea/next-fortress.iml
+++ b/.idea/next-fortress.iml
@@ -8,6 +8,8 @@
       <sourceFolder url="file://$MODULE_DIR$/features" isTestSource="true" />
       <sourceFolder url="file://$MODULE_DIR$/spec" isTestSource="true" />
       <sourceFolder url="file://$MODULE_DIR$/test" isTestSource="true" />
+      <excludeFolder url="file://$MODULE_DIR$/coverage" />
+      <excludeFolder url="file://$MODULE_DIR$/example/.next" />
       <excludeFolder url="file://$MODULE_DIR$/example/.next/cache" />
     </content>
     <orderEntry type="inheritedJdk" />
diff --git a/example/src/pages/_app.tsx b/example/src/pages/_app.tsx
index b4c6a65..4ce257c 100644
--- a/example/src/pages/_app.tsx
+++ b/example/src/pages/_app.tsx
@@ -68,15 +68,19 @@ function MyApp({ Component, pageProps }: AppProps) {
                 </Grid>
                 <Grid>
                   <Text font="32px" marginTop={1.3} paddingRight={2}>
-                    <Link href="https://github.com/aiji42/next-fortress">
-                      <Github size={36} />
+                    <Link
+                      href="https://github.com/aiji42/next-fortress"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Github size={32} />
                     </Link>
                   </Text>
                 </Grid>
               </Grid.Container>
             </Page.Header>
 
-            <Page.Content padding={1}>
+            <Page.Content padding={1} paddingTop={0}>
               <Component {...pageProps} />
             </Page.Content>
 
diff --git a/example/src/pages/auth0/authed.tsx b/example/src/pages/auth0/authed.tsx
index 5cad967..723efaf 100644
--- a/example/src/pages/auth0/authed.tsx
+++ b/example/src/pages/auth0/authed.tsx
@@ -25,7 +25,6 @@ const Authed: VFC = () => {
       <div className={styles.grid}>
         <a href="/api/auth/logout" className={styles.card}>
           <h2>Logout</h2>
-          <p>You will be redirected to the page you were on.</p>
         </a>
       </div>
     </>
diff --git a/example/src/pages/auth0/index.tsx b/example/src/pages/auth0/index.tsx
index 3c471e9..bb764e1 100644
--- a/example/src/pages/auth0/index.tsx
+++ b/example/src/pages/auth0/index.tsx
@@ -18,7 +18,7 @@ const IndexPage: VFC = () => {
       </Text>
 
       <p>This page can be accessed by anyone, with or without a login.</p>
-      <p>My Page can be accessed only when you are logged in.</p>
+      <p>You can access My Page only when you are logged in.</p>
 
       <div className={styles.grid}>
         {!user ? (
@@ -36,7 +36,7 @@ const IndexPage: VFC = () => {
         <Link href="/auth0/authed">
           <div className={styles.card}>
             <h2>Go My Page &rarr;</h2>
-            <p>Try it!</p>
+            {!user && <p>(Not Allowed)</p>}
           </div>
         </Link>
       </div>
diff --git a/example/src/pages/cognito/authed.tsx b/example/src/pages/cognito/authed.tsx
index 58725e7..1dc691f 100644
--- a/example/src/pages/cognito/authed.tsx
+++ b/example/src/pages/cognito/authed.tsx
@@ -29,7 +29,6 @@ const Authed: VFC = () => {
       <div className={styles.grid}>
         <button className={styles.card} onClick={() => Auth.signOut()}>
           <h2>Logout</h2>
-          <p>You will be redirected to the page you were on.</p>
         </button>
       </div>
     </>
diff --git a/example/src/pages/cognito/index.tsx b/example/src/pages/cognito/index.tsx
index f771e00..1e25110 100644
--- a/example/src/pages/cognito/index.tsx
+++ b/example/src/pages/cognito/index.tsx
@@ -23,7 +23,7 @@ const IndexPage: VFC = () => {
       </Text>
 
       <p>This page can be accessed by anyone, with or without a login.</p>
-      <p>My Page can be accessed only when you are logged in.</p>
+      <p>You can access My Page only when you are logged in.</p>
 
       <div className={styles.grid}>
         {!login ? (
@@ -44,7 +44,7 @@ const IndexPage: VFC = () => {
         <Link href="/cognito/authed">
           <div className={styles.card}>
             <h2>Go My Page &rarr;</h2>
-            <p>Try it!</p>
+            {!login && <p>(Not Allowed)</p>}
           </div>
         </Link>
       </div>
diff --git a/example/src/pages/firebase/authed.tsx b/example/src/pages/firebase/authed.tsx
index 877705b..4e0029a 100644
--- a/example/src/pages/firebase/authed.tsx
+++ b/example/src/pages/firebase/authed.tsx
@@ -21,9 +21,8 @@ const Authed: VFC = () => {
       <p>This page is accessible only to logged-in users.</p>
 
       <div className={styles.grid}>
-        <button className={styles.card} onClick={() => Logout()}>
+        <button className={styles.card} onClick={Logout}>
           <h2>Logout</h2>
-          <p>You will be redirected to the page you were on.</p>
         </button>
       </div>
     </>
diff --git a/example/src/pages/firebase/index.tsx b/example/src/pages/firebase/index.tsx
index 2493228..e06c0b8 100644
--- a/example/src/pages/firebase/index.tsx
+++ b/example/src/pages/firebase/index.tsx
@@ -17,7 +17,7 @@ const IndexPage: VFC = () => {
       </Text>
 
       <p>This page can be accessed by anyone, with or without a login.</p>
-      <p>My Page can be accessed only when you are logged in.</p>
+      <p>You can access My Page only when you are logged in.</p>
 
       <div className={styles.grid}>
         {!auth.currentUser ? (
@@ -35,7 +35,7 @@ const IndexPage: VFC = () => {
         <Link href="/firebase/authed">
           <div className={styles.card}>
             <h2>Go My Page &rarr;</h2>
-            <p>Try it!</p>
+            {!auth.currentUser && <p>(Not Allowed)</p>}
           </div>
         </Link>
       </div>
diff --git a/example/src/pages/index.tsx b/example/src/pages/index.tsx
index f8b28ac..9a44496 100644
--- a/example/src/pages/index.tsx
+++ b/example/src/pages/index.tsx
@@ -12,7 +12,7 @@ export default function Home() {
       <div className={styles.grid}>
         <Link href="/ip">
           <div className={styles.card}>
-            <h2>IP Protection &rarr;</h2>
+            <h2>IP Protect &rarr;</h2>
           </div>
         </Link>
 
diff --git a/example/src/pages/ip/[bar].tsx b/example/src/pages/ip/[bar].tsx
deleted file mode 100644
index ca0e1e8..0000000
--- a/example/src/pages/ip/[bar].tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../../styles/Home.module.css'
-import { GetServerSideProps } from 'next'
-import { VFC } from 'react'
-
-export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  return {
-    props: { query: ctx.query }
-  }
-}
-
-const Page: VFC = (props) => {
-  return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>{JSON.stringify(props)}</h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
-    </div>
-  )
-}
-
-export default Page
diff --git a/example/src/pages/ip/_middleware.ts b/example/src/pages/ip/_middleware.ts
index 702a775..92bc9b2 100644
--- a/example/src/pages/ip/_middleware.ts
+++ b/example/src/pages/ip/_middleware.ts
@@ -2,7 +2,7 @@ import { makeIPInspector } from 'next-fortress'
 import { NextRequest, NextResponse } from 'next/server'
 
 export const middleware = (req: NextRequest) => {
-  if (req.nextUrl.pathname === '/ip') return
+  if (!req.nextUrl.pathname.includes('admin')) return
   const ips = req.cookies['__allowed_ips']
   if (!ips) return NextResponse.redirect('/ip')
 
diff --git a/example/src/pages/ip/admin.tsx b/example/src/pages/ip/admin.tsx
new file mode 100644
index 0000000..080ec62
--- /dev/null
+++ b/example/src/pages/ip/admin.tsx
@@ -0,0 +1,36 @@
+import Head from 'next/head'
+import { VFC } from 'react'
+import { Button, Spacer, Text } from '@geist-ui/react'
+import Cookies from 'js-cookie'
+import { useRouter } from 'next/router'
+
+const Page: VFC = () => {
+  const router = useRouter()
+  const resetIPToCookie = () => {
+    Cookies.remove('__allowed_ips')
+    router.reload()
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Admin | IP Protect Example | Next Fortress</title>
+      </Head>
+
+      <Text h2 font="24px">
+        Admin | IP protect example
+      </Text>
+
+      <p>Your IP address is allowed to access.</p>
+
+      <strong>Allowed IPs: {Cookies.get('__allowed_ips')}</strong>
+
+      <Spacer h={0.5} />
+      <Button auto ml="20px" onClick={resetIPToCookie}>
+        reset allowed IP
+      </Button>
+    </>
+  )
+}
+
+export default Page
diff --git a/example/src/pages/ip/index.tsx b/example/src/pages/ip/index.tsx
index 12eef1c..e231a0c 100644
--- a/example/src/pages/ip/index.tsx
+++ b/example/src/pages/ip/index.tsx
@@ -3,27 +3,33 @@ import { useEffect, VFC } from 'react'
 import Cookies from 'js-cookie'
 import { Button, Text, Spacer, Input, useInput, Link } from '@geist-ui/react'
 import NextLink from 'next/link'
+import { useRouter } from 'next/router'
 
 const IndexPage: VFC = () => {
+  const router = useRouter()
   const { state: ips, setState: setIps, reset, bindings } = useInput('')
   useEffect(() => {
     const cookie = Cookies.get('__allowed_ips')
     cookie && setIps(cookie)
   }, [])
-  const setIPToCookie = () => Cookies.set('__allowed_ips', ips, { path: '/' })
+  const setIPToCookie = () => {
+    Cookies.set('__allowed_ips', ips, { path: '/' })
+    router.reload()
+  }
   const resetIPToCookie = () => {
     Cookies.remove('__allowed_ips')
+    router.reload()
     reset()
   }
 
   return (
     <>
       <Head>
-        <title>IP Control Example | Next Fortress</title>
+        <title>IP Protect Example | Next Fortress</title>
       </Head>
 
       <Text h2 font="24px">
-        IP control example
+        IP protect example
       </Text>
 
       <p>
@@ -33,7 +39,7 @@ const IndexPage: VFC = () => {
       <p>
         First, try to go to the Admin page without entering anything (access
         will be denied because you do not have an allowed IP). After that, enter
-        the IP you want to allow (yours) and go to the admin page.
+        the IP you want to allow and go to the admin page again.
       </p>
 
       <Spacer h={1} />
@@ -44,7 +50,7 @@ const IndexPage: VFC = () => {
       </NextLink>
       <Spacer h={2} />
 
-      <Input {...bindings} scale={5 / 3} placeholder="123.123.123.123/24" />
+      <Input {...bindings} scale={5 / 3} placeholder="123.123.123.123/32" />
       <Spacer h={0.5} />
       <Button auto type="secondary" onClick={setIPToCookie}>
         set allowed IP
diff --git a/example/src/styles/Home.module.css b/example/src/styles/Home.module.css
index 4d22254..bbe18ad 100644
--- a/example/src/styles/Home.module.css
+++ b/example/src/styles/Home.module.css
@@ -116,4 +116,7 @@
     width: 100%;
     flex-direction: column;
   }
+  .card {
+    width: 90%;
+  }
 }