Add auth page

apps/web/src/composables/router.ts

@@ -3,19 +3,23 @@ import { createWebHistory, createRouter } from 'vue-router'
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import Dashboard from '@/pages/dashboard/Dashboard.vue'
 import Test from '@/pages/test/Test.vue'
+import Auth from '@/pages/auth/Auth.vue'
 
 const routes = [
     { 
         path: '/', 
         name: Dashboard, 
         component: Dashboard,
-        meta: { authorize: [] },
+    },
+    { 
+        path: '/auth', 
+        name: Auth, 
+        component: Auth,
     },
     { 
         path: '/test', 
         name: Test, 
         component: Test,
-        meta: { authorize: [] },
     },
 ]
 
@@ -25,5 +29,7 @@ const router = createRouter({
     routes
 })
 
+// TO DO: Add a routing beforeEach that 
+// dynamically fixes rerouting to auth page
 
 export default router

apps/web/src/layouts/default-layout.vue

@@ -9,9 +9,9 @@ const { user } = useUsers()
     class="min-w-[360px] min-h-[100vh] h-[100vh] 
     w-[100vw] flex justify-center items-start py-45 overflow-y-auto"
   >
-    <div class="max-w-[1448px] w-full px-[140px]">
+    <div class="max-w-[1448px] h-full w-full px-[140px]">
       <div
-        v-if="!user"
+        v-if="user"
         class="flex justify-between items-center gap-45 w-full pb-[60px]"
       >
         <div class="flex items-center gap-50">

apps/web/src/pages/auth/Auth.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import useWallet from '@/composables/wallet'
+import { ProviderString } from '@casimir/types'
+
+const { connectWallet } = useWallet()
+
+const wallets = ref([
+    'MetaMask',
+    'CoinbaseWallet',
+    'WalletConnect',
+    'Trezor',
+    'Ledger',
+    'IoPay'
+] as ProviderString[])
+</script>
+
+<template>
+  <div class="h-full w-full flex justify-center items-center">
+    <div class="min-w-[360px] w-full max-w-[600px]">
+      <div class="mb-25">
+        <img
+          src="/casimir.svg"
+          alt="Casimir Logo"
+          class="w-30"
+        >
+      </div>
+      <div 
+        class="flex justify-between items-center gap-50 h-[400px]"
+      >
+        <div class="w-full border-y-[2px] border-l-[2px] rounded-l-[5px] h-full p-35 flex flex-col justify-between">
+          <div>
+            <h6 class="font-medium text-[#727476]">
+              Connect Your Wallet
+            </h6>
+          </div>
+          <div>
+            <p class="text-caption font-medium text-grey_5 mb-10">
+              New user? Connect any wallet to create an account with wallet.
+              Once wallet is connected, you can connect more wallets on the dashboard page with the 
+              Multi-Wallet tab in the top right of the page. 
+            </p>
+            <p class="text-caption font-medium text-grey_5">
+              By connecting your wallets you agree to 
+              <button class="font-semibold text-primary hover:text-blue_3"> 
+                Casimir Terms 
+              </button>
+            </p>
+          </div>
+        </div>
+        <div class="w-[350px] h-full overflow-y-auto flex flex-col justify-center items-center">
+          <button
+            v-for="wallet in wallets"
+            :key="wallet"
+            class="flex justify-between items-center border-[2px] border-[#b2bacb] 
+            rounded-[5px] mb-[10px] px-10 py-5 w-full hover:border-blue_3"
+            @click="connectWallet(wallet)"
+          >
+            <img
+              :src="'/'+wallet.toLocaleLowerCase()+'.svg'"
+              :alt="wallet + ' Logo'"
+              class="w-[35px] rounded-[100%]"
+            >
+            <h6 class="text-body font-bold text-[#8E9095]">
+              {{ wallet }}
+            </h6>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

apps/web/src/pages/dashboard/Dashboard.vue

@@ -10,6 +10,10 @@
           Analytics
         </h6>
       </div>
+
+      <router-link to="/auth">
+        auth
+      </router-link>
     </div> <div class="col-span-1 h-[450px]" />
     <div class="col-span-3 border h-[450px]">
       <div>