From e2203189fcb954fea4f7e22ab803b73398873bc7 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Fri, 14 Jun 2019 17:27:32 +0200
Subject: [PATCH] refactor: refactor pages

---
 src/views/pages/Login.vue    |  11 ++--
 src/views/pages/Page404.vue  |  44 +++++++--------
 src/views/pages/Page500.vue  |  42 +++++++--------
 src/views/pages/Register.vue | 102 +++++++++++++++++------------------
 4 files changed, 94 insertions(+), 105 deletions(-)

diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 275fbfbd..33ad4392 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -1,16 +1,13 @@
 <template>
-  <CContainer
-    class="c-d-flex c-align-items-center"
-    style="min-height:100vh;"
-  >
-    <CRow class="c-justify-content-center" >
+  <CContainer class="c-d-flex c-align-items-center c-min-vh-100">
+    <CRow class="c-justify-content-center">
       <CCol md="8">
         <CCardGroup>
           <CCard class="c-p-4">
             <CCardBody>
               <CForm>
                 <h1>Login</h1>
-                <p class="text-muted">Sign In to your account</p>
+                <p class="c-text-muted">Sign In to your account</p>
                 <CFormInput
                   prependHtml="<i class='cui-user'></i>"
                   placeholder="Username"
@@ -42,7 +39,7 @@
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
             <CButton
               variant="primary"
-              class="active c-mt-3"
+              class="c-active c-mt-3"
             >
               Register Now!
             </CButton>
diff --git a/src/views/pages/Page404.vue b/src/views/pages/Page404.vue
index 7f3d9ba1..5a6541cf 100644
--- a/src/views/pages/Page404.vue
+++ b/src/views/pages/Page404.vue
@@ -1,26 +1,26 @@
 <template>
-  <div class="app c-flex-row c-align-items-center">
-    <CContainer>
-      <CRow class="c-justify-content-center">
-        <CCol md="6">
-          <div class="c-clearfix">
-            <h1 class="c-float-left c-display-3 c-mr-4">404</h1>
-            <h4 class="c-pt-3">Oops! You're lost.</h4>
-            <p class="c-text-muted">The page you are looking for was not found.</p>
-          </div>
-          <CFormInput
-            class="c-mb-0"
-            prependHtml="<i class='cui-magnifying-glass'></i>"
-            placeholder="What are you looking for?"
-          >
-            <template #append>
-              <CButton variant="info">Search</CButton>
-            </template>
-          </CFormInput>
-        </CCol>
-      </CRow>
-    </CContainer>
-  </div>
+  <CContainer class="c-d-flex c-align-items-center c-min-vh-100">
+    <CRow class="c-w-100 c-justify-content-center">
+      <CCol md="6">
+        <div class="c-w-100">
+        <div class="c-clearfix">
+          <h1 class="c-float-left c-display-3 c-mr-4">404</h1>
+          <h4 class="c-pt-3">Oops! You're lost.</h4>
+          <p class="c-text-muted">The page you are looking for was not found.</p>
+        </div>
+        <CFormInput
+          class="c-mb-0"
+          prependHtml="<i class='cui-magnifying-glass'></i>"
+          placeholder="What are you looking for?"
+        >
+          <template #append>
+            <CButton variant="info">Search</CButton>
+          </template>
+        </CFormInput>
+      </div>
+      </CCol>
+    </CRow>
+  </CContainer>
 </template>
 
 <script>
diff --git a/src/views/pages/Page500.vue b/src/views/pages/Page500.vue
index fff5a3e2..c67d01f2 100644
--- a/src/views/pages/Page500.vue
+++ b/src/views/pages/Page500.vue
@@ -1,26 +1,24 @@
 <template>
-  <div class="c-app c-flex-row c-align-items-center">
-    <CContainer>
-      <CRow class="c-justify-content-center">
-        <CCol md="6">
-          <div class="c-clearfix">
-            <h1 class="c-float-left c-display-3 c-mr-4">500</h1>
-            <h4 class="c-pt-3">Houston, we have a problem!</h4>
-            <p class="c-text-muted">The page you are looking for is temporarily unavailable.</p>
-          </div>
-          <CFormInput
-            class="c-mb-0"
-            prependHtml="<i class='cui-magnifying-glass'></i>"
-            placeholder="What are you looking for?"
-          >
-            <template #append>
-              <CButton variant="info">Search</CButton>
-            </template>
-          </CFormInput>
-        </CCol>
-      </CRow>
-    </CContainer>
-  </div>
+  <CContainer class="c-d-flex c-align-items-center c-min-vh-100">
+    <CRow class="c-w-100 c-justify-content-center">
+      <CCol md="6">
+        <div class="c-clearfix">
+          <h1 class="c-float-left c-display-3 c-mr-4">500</h1>
+          <h4 class="c-pt-3">Houston, we have a problem!</h4>
+          <p class="c-text-muted">The page you are looking for is temporarily unavailable.</p>
+        </div>
+        <CFormInput
+          class="c-mb-0"
+          prependHtml="<i class='cui-magnifying-glass'></i>"
+          placeholder="What are you looking for?"
+        >
+          <template #append>
+            <CButton variant="info">Search</CButton>
+          </template>
+        </CFormInput>
+      </CCol>
+    </CRow>
+  </CContainer>
 </template>
 
 <script>
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index d25ac23c..afa74380 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -1,58 +1,52 @@
 <template>
-  <div class="c-app c-flex-row c-align-items-center">
-    <CContainer>
-      <CRow class="c-justify-content-center">
-        <CCol md="6" sm="8">
-          <CCard class="c-mx-4">
-            <CCardBody class="c-p-4">
-              <CForm>
-                <h1>Register</h1>
-                <p class="c-text-muted">Create your account</p>
-                <CFormInput
-                  placeholder="Username"
-                  prependHtml="<i class='cui-user'></i>"
-                  autocomplete="username"
-                />
-                <CFormInput
-                  placeholder="Email"
-                  prepend-html="@"
-                  autocomplete="email"
-                />
-                <CFormInput
-                  placeholder="Password"
-                  type="password"
-                  prependHtml="<i class='cui-lock-locked'></i>"
-                  autocomplete="new-password"
-                />
-                <CFormInput
-                  placeholder="Repeat password"
-                  type="password"
-                  prependHtml="<i class='cui-lock-locked'></i>"
-                  autocomplete="new-password"
-                  class="c-mb-4"
-                />
-                <CButton variant="success" block>Create Account</CButton>
-              </CForm>
-            </CCardBody>
-            <CCardFooter class="c-p-4">
-              <CRow>
-                <CCol col="6">
-                  <CButton block class="btn btn-facebook">
-                    <span>facebook</span>
-                  </CButton>
-                </CCol>
-                <CCol col="6">
-                  <CButton block class="btn btn-twitter" type="button">
-                    <span>twitter</span>
-                  </CButton>
-                </CCol>
-              </CRow>
-            </CCardFooter>
-          </CCard>
-        </CCol>
-      </CRow>
-    </CContainer>
-  </div>
+  <CContainer class="c-min-vh-100 c-d-flex c-align-items-center">
+    <CRow class="c-w-100 c-justify-content-center">
+      <CCol md="6" sm="8">
+        <CCard class="c-mx-4">
+          <CCardBody class="c-p-4">
+            <CForm>
+              <h1>Register</h1>
+              <p class="c-text-muted">Create your account</p>
+              <CFormInput
+                placeholder="Username"
+                prependHtml="<i class='cui-user'></i>"
+                autocomplete="username"
+              />
+              <CFormInput
+                placeholder="Email"
+                prepend-html="@"
+                autocomplete="email"
+              />
+              <CFormInput
+                placeholder="Password"
+                type="password"
+                prependHtml="<i class='cui-lock-locked'></i>"
+                autocomplete="new-password"
+              />
+              <CFormInput
+                placeholder="Repeat password"
+                type="password"
+                prependHtml="<i class='cui-lock-locked'></i>"
+                autocomplete="new-password"
+                class="c-mb-4"
+              />
+              <CButton variant="success" block>Create Account</CButton>
+            </CForm>
+          </CCardBody>
+          <CCardFooter class="c-p-4">
+            <CRow>
+              <CCol col="6">
+                <CButton block variant="facebook" textHtml="Facebook"/>
+              </CCol>
+              <CCol col="6">
+                <CButton block variant="twitter" textHtml="Twitter"/>
+              </CCol>
+            </CRow>
+          </CCardFooter>
+        </CCard>
+      </CCol>
+    </CRow>
+  </CContainer>
 </template>
 
 <script>