From 954a5266711337899da8c191d578070a749588d2 Mon Sep 17 00:00:00 2001
From: ryan <dev@ryanmoon.com>
Date: Thu, 27 Jul 2023 20:17:00 -0400
Subject: [PATCH] auth pages

---
 assets/style/_config.scss        |  2 +-
 assets/style/main.scss           |  7 ++--
 assets/style/pages/_auth.scss    | 67 ++++++++++++++++++++++++++++++++
 content/guide/what-is-bitcoin.md |  4 +-
 pages/login.vue                  | 34 +++++++++++++++-
 pages/register.vue               | 40 ++++++++++++++++++-
 6 files changed, 144 insertions(+), 10 deletions(-)
 create mode 100644 assets/style/pages/_auth.scss

diff --git a/assets/style/_config.scss b/assets/style/_config.scss
index d956c9b..557ec6d 100644
--- a/assets/style/_config.scss
+++ b/assets/style/_config.scss
@@ -13,7 +13,7 @@ $hr: #d30012; // hr
 
 $btn-color: #faf1e5; // button
 $btnh-color: #f5ece0; // button hover
-$i-color: #faf3ea; // input
+$i-color: #494949; // input
 
 // Font Colors
 $f-color: #ffffff; // primary
diff --git a/assets/style/main.scss b/assets/style/main.scss
index f3d90a4..7f73767 100644
--- a/assets/style/main.scss
+++ b/assets/style/main.scss
@@ -50,9 +50,10 @@ a {
   text-decoration: none;
 }
 
+@import 'components/header';
+@import 'components/footer';
 @import 'pages/index';
 @import 'pages/pages';
 @import 'pages/guide';
-@import 'pages/404';
-@import 'components/header';
-@import 'components/footer';
\ No newline at end of file
+@import 'pages/auth';
+@import 'pages/404';
\ No newline at end of file
diff --git a/assets/style/pages/_auth.scss b/assets/style/pages/_auth.scss
new file mode 100644
index 0000000..ac9c68c
--- /dev/null
+++ b/assets/style/pages/_auth.scss
@@ -0,0 +1,67 @@
+.login,
+.register {
+  max-width: 24rem;
+  padding: 2rem 2rem;
+  margin: 0 auto;
+
+  h3 {
+    font-size: 1.5rem;
+    margin: 1rem 0;
+  }
+
+  .newbie,
+  .reset,
+  .policy {
+    font-size: .9rem;
+    font-weight: 400;
+    margin: .5rem 0;
+
+    a {
+      color: $link;
+      &:hover { text-decoration: underline }
+    }
+  }
+
+  form {
+    margin: 1rem 0;
+
+    button,
+    .input input {
+      width: 100%;
+      color: $w-color;
+      background: $b-color;
+      font-family: $p-font;
+      box-shadow: none;
+    }
+
+    .input {
+      label {
+        display: block;
+        font-size: .9rem;
+        font-weight: 400;
+      }
+
+      input {
+        font-size: 1rem;
+        font-weight: 400;
+        padding: .5rem 1rem;
+        margin: .25rem 0 .75rem 0;
+        border: 1px solid $i-color;
+      }
+    }
+
+    button {
+      font-size: .9rem;
+      font-weight: 500;
+      padding: .5rem 1rem .6rem 1rem;
+      border: 1px solid $s-color;
+      text-align: center;
+
+      &:hover {
+        cursor: pointer;
+        background: rgba($s-color, .05);
+      }
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/content/guide/what-is-bitcoin.md b/content/guide/what-is-bitcoin.md
index 5b4d7a7..a9b1ccb 100644
--- a/content/guide/what-is-bitcoin.md
+++ b/content/guide/what-is-bitcoin.md
@@ -81,9 +81,7 @@ Additionally, because Bitcoin is not backed by any government or central authori
 
 #### Bitcoin wallets – types and how to choose one
 
-Bitcoin wallets are digital wallets that allow you to store, send, and receive Bitcoin. 
-
-There are several types of Bitcoin wallets, including desktop wallets, mobile  wallets, and hardware wallets.
+Bitcoin wallets are digital wallets that allow you to store, send, and receive Bitcoin. There are several types of Bitcoin wallets, including desktop wallets, mobile  wallets, and hardware wallets.
 
 When choosing a Bitcoin wallet, it is important to consider factors such as security, ease of use, and cost.
 
diff --git a/pages/login.vue b/pages/login.vue
index 17f267a..cc8cb8a 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -1,5 +1,37 @@
+<script setup>
+  useHead({
+    title: 'Sign in | crbtc.org',
+    meta: [
+      { 
+        name: 'description', 
+        content: `` 
+      },      
+    ],
+  })
+</script>
+
 <template>
   <div class="login">
-    <h4>This has not been developed yet...</h4>
+    <h3>Sign in to your account</h3>
+    <h4 class="policy">By continuing, you agree to our <NuxtLink href="terms">Terms of 
+      use</NuxtLink> and <NuxtLink href="privacy">Privacy policy</NuxtLink>.</h4>
+
+    <form>
+      <div class="input">
+        <label>Email</label>
+        <input placeholder="Enter your email" />
+      </div>
+
+      <div class="input">
+        <label>Password</label>
+        <input placeholder="********" type="password" />
+      </div>
+
+      <button>Sign in</button>
+    </form>
+
+    <p class="newbie">Don't have an account? <NuxtLink href="/register">Create account</NuxtLink></p>
+    <p class="reset">Forgot password? <NuxtLink href="/reset">Reset password</NuxtLink></p>
+
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/register.vue b/pages/register.vue
index 6e44085..6935978 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -1,5 +1,41 @@
+<script setup>
+  useHead({
+    title: 'Create account | crbtc.org',
+    meta: [
+      { 
+        name: 'description', 
+        content: `` 
+      },      
+    ],
+  })
+</script>
+
 <template>
-  <div class="login">
-    <h4>This has not been developed yet either...</h4>
+  <div class="register">
+    <h3>Create your account</h3>
+    <h4 class="policy">By continuing, you agree to our <NuxtLink href="terms">Terms of 
+      use</NuxtLink> and <NuxtLink href="privacy">Privacy policy</NuxtLink>.</h4>
+
+    <form>
+      <div class="input">
+        <label>Username</label>
+        <input placeholder="Choose a username" />
+      </div>
+
+      <div class="input">
+        <label>Email</label>
+        <input placeholder="Enter your email" />
+      </div>
+
+      <div class="input">
+        <label>Password</label>
+        <input placeholder="********" type="password" />
+      </div>
+
+      <button>Create account</button>
+    </form>
+
+    <p class="newbie">Already have an account? <NuxtLink href="/login">Sign in</NuxtLink></p>
+
   </div>
 </template>
\ No newline at end of file