Merge pull request #20 from xyzith/feature/emailVerifyPage

feat email verify page & refine css

src/App.jsx

@@ -4,6 +4,7 @@ import Footer from "./containers/Footer";
 import IndexPage from "./containers/IndexPage";
 import ArticlePage from "./containers/ArticlePage";
 import ProfilePage from "./containers/ProfilePage";
+import EmailVerifyPage from "./containers/EmailVerifyPage";
 import Login from "./acount/login";
 import "./App.scss";
 
@@ -24,6 +25,7 @@ function App(){
                 <Route path="/join_us" element={<IndexPage />} />
                 <Route path="/login" element={<Login />} />
                 <Route path="/profile" element={<ProfilePage />} />
+                <Route path="/emailVerifyPage" element={<EmailVerifyPage />} />
             </Routes>
         </main>
         <Footer />

src/App.scss

@@ -1,3 +1,15 @@
 div.main-container{
     background: rgb(225, 244, 255);
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: 100rem 0 50rem;
+    box-sizing: border-box;
 }

src/containers/ArticlePage/ArticlePage.scss

@@ -1,5 +1,5 @@
 .article-page {
-    padding: 100rem 300rem 0;
+    padding: 0 300rem;
 
     .article-header {
       height: 30rem;
@@ -82,6 +82,6 @@
 
 @media (orientation: portrait) {
     .article-page {
-        padding: 100rem 20rem 0;
+        padding: 0 20rem;
     }
 }

src/containers/EmailVerifyPage/EmailVerifyPage.scss

@@ -0,0 +1,71 @@
+.email-verify-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    flex: 1;
+
+    h1 {
+        font-size: 50rem;
+    }
+
+    input {
+        position: absolute;
+        opacity: 0;
+        pointer-events: none;
+    }
+    .verify-code {
+        display: inline-block;
+        height: 50rem;
+        line-height: 50rem;
+        font-size: 44rem;
+        width: 44rem;
+        margin: 8rem;
+        border-bottom: 4rem solid;
+        text-align: center;
+        vertical-align: bottom;
+    }
+
+    .verify-message-container {
+        margin-top: 10rem;
+        height: 30rem;
+        min-width: 10rem;
+    }
+
+    .verify-message {
+        font-size: 24rem;
+        animation: 0.5s ease-in 0s fadein;
+        &.success {
+            color: ForestGreen;
+            svg path{
+                fill: ForestGreen;
+            }
+        }
+
+        &.failed {
+            color: FireBrick;
+            svg path{
+                fill: FireBrick;
+            }
+        }
+    }
+}
+
+@media (orientation: portrait) {
+    .email-verify-page {
+        h1 {
+            font-size: 36rem;
+        }
+    }
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opactity: 1;
+  }
+}

src/containers/EmailVerifyPage/index.jsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExclamationTriangle, faCheck } from '@fortawesome/free-solid-svg-icons';
+import './EmailVerifyPage.scss';
+
+const CODE_LENGTH = 6;
+
+const VERIFY_RESULT = {
+    PENDING: 0,
+    PASSED: 1,
+    FAILED: 2,
+};
+
+const EmailVerifyPage = () => {
+    const [verifyCode, setVerifyCode] = useState('');
+    const [verifyResult, setVerifyResult] = useState(VERIFY_RESULT.PENDING);
+
+    const updateVerifyCode = (ev) => {
+        const { value } = ev?.target || {};
+        if (value.length <= CODE_LENGTH) {
+            setVerifyCode(value);
+        }
+
+        if (value.length === CODE_LENGTH) {
+            // TODO: send verify codes
+            setVerifyResult(VERIFY_RESULT.PASSED);
+        } else if (value.length < CODE_LENGTH)  {
+            setVerifyResult(VERIFY_RESULT.PENDING);
+        }
+    };
+
+    const defaultCodes = new Array(CODE_LENGTH).fill('');
+
+    const codes = [...verifyCode.split(''), ...defaultCodes].slice(0, CODE_LENGTH);
+
+    const renderCode = (code, idx) => (<span key={idx} className="verify-code">{code}</span>);
+
+    const faileMessage = (
+        <div className="failed verify-message">
+            <FontAwesomeIcon icon={faExclamationTriangle} />
+            <span>驗證失敗</span>
+        </div>
+    );
+
+    const successMessage = (
+        <div className="success verify-message">
+            <FontAwesomeIcon icon={faCheck} />
+            <span>驗證通過</span>
+        </div>
+    );
+
+    return (
+        <label className="email-verify-page">
+            <input type="number" value={verifyCode} onChange={updateVerifyCode} />
+            <h1>請輸入Email驗證碼</h1>
+            <div>{codes.map(renderCode)}</div>
+            <div className="verify-message-container">
+                {(verifyResult === VERIFY_RESULT.FAILED) && faileMessage}
+                {(verifyResult === VERIFY_RESULT.PASSED) && successMessage}
+            </div>
+        </label>
+    );
+};
+
+export default EmailVerifyPage;

src/containers/Footer.scss

@@ -1,7 +1,6 @@
 @import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
 
 .page-footer{
-    margin-top: 80rem;
     min-height: 100rem;
     display: flex;
     align-items: center;

src/containers/IndexPage/IdeaShow.scss

@@ -1,9 +1,8 @@
 @import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
 
 div.container-ideashow{
-    margin-top: 100rem;
     width: 100%;
-    height: 90vh;
+    height: calc(100vh - 100rem);
     position: relative;
 
     div.text-container{
@@ -35,18 +34,24 @@ div.container-ideashow{
     }
 
     img.char{
-        width: 75%;
+        width: 65%;
         bottom: 0%;
         right: 0%;
         position: absolute;
     }
 }
 
 @media (orientation: portrait) {
-    div.container-ideashow div.text-container {
-        width: 80vw;
-    }
-    div.container-ideashow div.text-container p.slogan {
-        font-size: 20rem;
+    div.container-ideashow {
+        div.text-container {
+            width: 80vw;
+        }
+        div.text-container p.slogan {
+            font-size: 20rem;
+        }
+
+        img.char {
+            width: 100%;
+        }
     }
 }

src/containers/ProfilePage/Profile.scss

@@ -1,5 +1,4 @@
 .profile-page {
-    padding-top: 120rem;
     margin: auto;
     width: 90vw;
     max-width: 800rem;
@@ -21,7 +20,7 @@
             border-radius: 8rem;
             background-color: transparent;
             border: 1px solid transparent;
-            
+
             &:focus {
                 outline-width: 0;
             }