refactor: sh admin login polish (#58)
This commit is contained in:
Nivedin
GitHub
12
packages/hoppscotch-sh-admin/src/components.d.ts
vendored
12
packages/hoppscotch-sh-admin/src/components.d.ts
vendored
@@ -13,6 +13,18 @@ declare module '@vue/runtime-core' {
|
||||
AppModal: typeof import('./components/app/Modal.vue')['default']
|
||||
AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
|
||||
AppToast: typeof import('./components/app/Toast.vue')['default']
|
||||
HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
|
||||
HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
|
||||
HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
|
||||
HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
|
||||
HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
|
||||
IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
|
||||
IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
|
||||
IconLucideMenu: typeof import('~icons/lucide/menu')['default']
|
||||
IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
|
||||
IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
|
||||
IconLucideUser: typeof import('~icons/lucide/user')['default']
|
||||
IconLucideUsers: typeof import('~icons/lucide/users')['default']
|
||||
ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
|
||||
TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default']
|
||||
TeamsDetails: typeof import('./components/teams/Details.vue')['default']
|
||||
|
||||
@@ -6,72 +6,78 @@
|
||||
>
|
||||
and login with an admin account.
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
|
||||
<HoppSmartItem
|
||||
:loading="signingInWithGitHub"
|
||||
:icon="IconGithub"
|
||||
:label="`Continue with GitHub`"
|
||||
@click="signInWithGithub"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
:loading="signingInWithGoogle"
|
||||
:icon="IconGoogle"
|
||||
:label="`Continue with Google`"
|
||||
@click="signInWithGoogle"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
:loading="signingInWithMicrosoft"
|
||||
:icon="IconMicrosoft"
|
||||
:label="`Continue with Microsoft`"
|
||||
@click="signInWithMicrosoft"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
:icon="IconEmail"
|
||||
:label="`Continue with Email`"
|
||||
@click="mode = 'email'"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
v-if="mode === 'email'"
|
||||
class="flex flex-col space-y-2"
|
||||
@submit.prevent="signInWithEmail"
|
||||
<div v-else class="flex flex-1 flex-col">
|
||||
<div
|
||||
class="p-6 bg-primaryLight rounded-lg border border-primaryDark shadow"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="email"
|
||||
name="email"
|
||||
autocomplete="off"
|
||||
required
|
||||
spellcheck="false"
|
||||
v-focus
|
||||
autofocus
|
||||
<div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
|
||||
<HoppSmartItem
|
||||
:loading="signingInWithGitHub"
|
||||
:icon="IconGithub"
|
||||
:label="`Continue with GitHub`"
|
||||
class="!items-center"
|
||||
@click="signInWithGithub"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
:loading="signingInWithGoogle"
|
||||
:icon="IconGoogle"
|
||||
:label="`Continue with Google`"
|
||||
@click="signInWithGoogle"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
:loading="signingInWithMicrosoft"
|
||||
:icon="IconMicrosoft"
|
||||
:label="`Continue with Microsoft`"
|
||||
@click="signInWithMicrosoft"
|
||||
/>
|
||||
<HoppSmartItem
|
||||
:icon="IconEmail"
|
||||
:label="`Continue with Email`"
|
||||
@click="mode = 'email'"
|
||||
/>
|
||||
<label for="email"> Email </label>
|
||||
</div>
|
||||
<HoppButtonPrimary
|
||||
:loading="signingInWithEmail"
|
||||
type="submit"
|
||||
:label="`Send magic link`"
|
||||
/>
|
||||
</form>
|
||||
<div v-if="mode === 'email-sent'" class="flex flex-col px-4">
|
||||
<div class="flex flex-col items-center justify-center max-w-md">
|
||||
<icon-lucide-inbox class="w-6 h-6 text-accent" />
|
||||
<h3 class="my-2 text-lg text-center">
|
||||
We sent a magic link to {{ form.email }}
|
||||
</h3>
|
||||
<p class="text-center">
|
||||
We sent a magic link to {{ form.email }}. Click on the link to sign
|
||||
in.
|
||||
</p>
|
||||
<form
|
||||
v-if="mode === 'email'"
|
||||
class="flex flex-col space-y-4"
|
||||
@submit.prevent="signInWithEmail"
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<input
|
||||
id="email"
|
||||
v-model="form.email"
|
||||
class="input floating-input"
|
||||
placeholder=" "
|
||||
type="email"
|
||||
name="email"
|
||||
autocomplete="off"
|
||||
required
|
||||
spellcheck="false"
|
||||
v-focus
|
||||
autofocus
|
||||
/>
|
||||
<label for="email"> Email </label>
|
||||
</div>
|
||||
<HoppButtonPrimary
|
||||
:loading="signingInWithEmail"
|
||||
type="submit"
|
||||
:label="`Send magic link`"
|
||||
/>
|
||||
</form>
|
||||
<div v-if="mode === 'email-sent'" class="flex flex-col px-4">
|
||||
<div class="flex flex-col items-center justify-center max-w-md">
|
||||
<icon-lucide-inbox class="w-6 h-6 text-accent" />
|
||||
<h3 class="my-2 text-lg text-center">
|
||||
We sent a magic link to {{ form.email }}
|
||||
</h3>
|
||||
<p class="text-center">
|
||||
We sent a magic link to {{ form.email }}. Click on the link to sign
|
||||
in.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="text-center mt-10">
|
||||
|
||||
<section class="mt-15">
|
||||
<div v-if="mode === 'sign-in'" class="text-secondaryLight text-tiny">
|
||||
By signing in, you are agreeing to our
|
||||
<HoppSmartAnchor
|
||||
|
||||
@@ -15,15 +15,15 @@
|
||||
<div :class="isExpanded ? 'w-64' : 'w-full'">
|
||||
<div class="flex items-center justify-start mt-6 ml-6">
|
||||
<div class="flex items-center">
|
||||
<router-link class="flex" to="/dashboard">
|
||||
<img src="/public/cover.jpg" alt="" class="h-7" />
|
||||
<HoppSmartLink class="flex items-center space-x-4" to="/dashboard">
|
||||
<img src="/cover.jpg" alt="hoppscotch-logo" class="h-7" />
|
||||
|
||||
<span
|
||||
v-if="isExpanded"
|
||||
class="mx-2 text-xl font-semibold text-gray-200"
|
||||
>Hoppscotch</span
|
||||
>
|
||||
</router-link>
|
||||
</HoppSmartLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -73,6 +73,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { HoppSmartLink } from '@hoppscotch/ui';
|
||||
import { useSidebar } from '../../composables/useSidebar';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
|
||||
@@ -1,23 +1,19 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gradient-to-r dark:from-zinc-700 dark:to-gray-900 p-6"
|
||||
<main
|
||||
class="flex h-screen flex-col justify-center items-center flex-1 flex-shrink-0"
|
||||
>
|
||||
<div>
|
||||
<div class="flex flex-col items-center justify-center mb-10">
|
||||
<HoppButtonSecondary
|
||||
class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
|
||||
:label="'Hoppscotch'"
|
||||
to="/"
|
||||
/>
|
||||
<span> Dashboard </span>
|
||||
<div class="flex flex-col justify-center text-center px-4">
|
||||
<div class="flex justify-center items-center py-6">
|
||||
<img src="/cover.jpg" alt="hoppscotch-logo" class="h-15" />
|
||||
</div>
|
||||
<div
|
||||
class="bg-primary xs:w-xs sm:w-sm md:w-lg p-10 rounded-md border border-secondaryLight"
|
||||
>
|
||||
<div class="flex flex-col items-center">
|
||||
<h1 class="text-2xl text-secondaryDark">Login to Admin Dashboard</h1>
|
||||
</div>
|
||||
<div class="flex my-6">
|
||||
<AppLogin />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<route lang="yaml">
|
||||
|
||||
Reference in New Issue
Block a user