GH-460 Add dashboard login view

dzikoysk · Apr 30, 2021 · c710dcb · c710dcb
1 parent 0e442f4
commit c710dcb
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 7 deletions.
diff --git a/reposilite-frontend2/src/App.vue b/reposilite-frontend2/src/App.vue
@@ -37,4 +37,16 @@ export default defineComponent({
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.container {
+  @apply px-10;
+}
+
+.active {
+  @apply dark:border-white;
+}
+
+.bg-default {
+  @apply bg-gray-50 dark:border-gray-900;
+}
 </style>
diff --git a/reposilite-frontend2/src/components/Header.vue b/reposilite-frontend2/src/components/Header.vue
@@ -6,7 +6,7 @@
       </h1>
       <nav class="flex flex-row mt-0.5">
        <router-link to="/dashboard">
-          <div class="border rounded-full pt-1.5 px-6 text-sm dark:border-gray-900">
+          <div class="border rounded-full py-1 px-6 text-sm dark:border-gray-900">
             Dashboard
           </div>
         </router-link>

diff --git a/reposilite-frontend2/src/components/browser/Browser.vue b/reposilite-frontend2/src/components/browser/Browser.vue
@@ -8,7 +8,7 @@
     <hr class="border-gray-100 dark:border-gray-900">
     <div>
       <div class="container mx-auto relative">
-        <div class="lg:absolute pt-5 -top-24.5 right-0">
+        <div class="lg:absolute pt-5 -top-24.5 right-8">
           <Card/>
         </div>
         <div class="pt-2 min-h-90">

diff --git a/reposilite-frontend2/src/components/index/Usage.vue b/reposilite-frontend2/src/components/index/Usage.vue
@@ -2,7 +2,7 @@
   <div class="container mx-auto pt-10 px-6">
     <div v-for="entry in configurations" :key="entry.type">
       <h1 class="text-lg font-bold">{{entry.type}}</h1>
-      <pre class="my-5 py-5 px-6 rounded-lg shadow-lg bg-gray-50 dark:bg-gray-900">{{trim(entry.snippet)}}</pre>
+      <pre class="my-5 py-5 px-6 rounded-lg shadow-md bg-gray-50 dark:bg-gray-900">{{trim(entry.snippet)}}</pre>
     </div>
   </div>
 </template>

diff --git a/reposilite-frontend2/src/pages/Dashboard.vue b/reposilite-frontend2/src/pages/Dashboard.vue
@@ -1,6 +1,20 @@
 <template>
-  <Header/>
-  <div>hello dashboard</div>
+  <div>
+    <Header/>
+    <div class="container mx-auto pt-10 px-6 flex justify-center">
+      <div class="border border-gray-100 dark:border-gray-700 m-w-20 p-10 rounded-2xl shadow-md text-center">
+        <h1 class="font-bold text-xl pb-4">Login</h1>
+        <form class="flex flex-col w-96">
+          <input placeholder="Alias" type="text" class="input"/>
+          <input placeholder="Token" type="password" class="input"/>
+          <div class="text-right mt-1">
+            <router-link to="/" class="text-blue-400 text-xs">← Back to index</router-link>
+          </div>
+          <div class="bg-gray-100 dark:bg-gray-900 py-2 my-3 cursor-pointer" v-bind:click="login">Sign in</div>
+        </form>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -10,6 +24,19 @@ export default {
   name: 'Index',
   components: {
     Header
+  },
+  methods: {
+    login() {
+
+    }
   }
 }
-</script>
+</script>
+
+<style scoped>
+.input {
+  @apply p-2;
+  @apply my-1;
+  @apply bg-gray-50 dark:bg-gray-900;
+}
+</style>
diff --git a/reposilite-frontend2/src/pages/Index.vue b/reposilite-frontend2/src/pages/Index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <Header/>
-    <div class="bg-white dark:bg-black">
+    <div>
       <div class="container mx-auto">
         <tabs v-model="selectedMenuTab" >
           <tab