mirror of https://github.com/TZGyn/shortener
Frontend: migrating from react to vue (login form)
parent
7788505a75
commit
c5bdae445b
GPG Key ID:
122EAF77AE81FD4A
@ -0,0 +1 @@
|
|||||||
|
BASE_URL=https//5173.tzgyn.com
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
coverage
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
---
|
||||||
|
printWidth: 80
|
||||||
|
tabWidth: 4
|
||||||
|
useTabs: true
|
||||||
|
semi: false
|
||||||
|
singleQuote: true
|
||||||
|
quoteProps: consistent
|
||||||
|
jsxSingleQuote: true
|
||||||
|
trailingComma: es5
|
||||||
|
bracketSpacing: true
|
||||||
|
bracketSameLine: true
|
||||||
|
arrowParens: always
|
||||||
|
htmlWhitespaceSensitivity: strict
|
||||||
|
vueIndentScriptAndStyle: false
|
||||||
|
singleAttributePerLine: true
|
||||||
|
plugins: [prettier-plugin-tailwindcss]
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||||
|
}
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
# vue-frontend
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||||
|
|
||||||
|
## Type Support for `.vue` Imports in TS
|
||||||
|
|
||||||
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
||||||
|
|
||||||
|
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
|
||||||
|
|
||||||
|
1. Disable the built-in TypeScript Extension
|
||||||
|
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
|
||||||
|
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
||||||
|
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type-Check, Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
Binary file not shown.
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"style": "default",
|
||||||
|
"typescript": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "tailwind.config.js",
|
||||||
|
"css": "src/assets/index.css",
|
||||||
|
"baseColor": "slate",
|
||||||
|
"cssVariables": true
|
||||||
|
},
|
||||||
|
"framework": "vite",
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" href="/favicon.ico">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Vite App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "vue-frontend",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "run-p type-check \"build-only {@}\" --",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"build-only": "vite build",
|
||||||
|
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@vueuse/core": "^10.5.0",
|
||||||
|
"class-variance-authority": "^0.7.0",
|
||||||
|
"clsx": "^2.0.0",
|
||||||
|
"lucide-vue-next": "^0.288.0",
|
||||||
|
"radix-vue": "^0.4.1",
|
||||||
|
"tailwind-merge": "^1.14.0",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
"vue": "^3.3.4",
|
||||||
|
"vue-router": "^4.2.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tsconfig/node18": "^18.2.2",
|
||||||
|
"@types/node": "^18.18.5",
|
||||||
|
"@vitejs/plugin-vue": "^4.4.0",
|
||||||
|
"@vue/tsconfig": "^0.4.0",
|
||||||
|
"autoprefixer": "^10.4.16",
|
||||||
|
"npm-run-all2": "^6.1.1",
|
||||||
|
"postcss": "^8.4.31",
|
||||||
|
"prettier": "^3.0.3",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.5.6",
|
||||||
|
"tailwindcss": "^3.3.3",
|
||||||
|
"typescript": "~5.2.0",
|
||||||
|
"vite": "^4.4.11",
|
||||||
|
"vue-tsc": "^1.8.19"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,11 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { RouterView, useRoute } from 'vue-router'
|
||||||
|
import Navbar from './components/Navbar.vue'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Navbar v-if="route.name !== 'login' && route.name !== 'signup'" />
|
||||||
|
<RouterView />
|
||||||
|
</template>
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 240 10% 3.9%;
|
||||||
|
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 240 10% 3.9%;
|
||||||
|
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 240 10% 3.9%;
|
||||||
|
|
||||||
|
--primary: 240 5.9% 10%;
|
||||||
|
--primary-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--secondary: 240 4.8% 95.9%;
|
||||||
|
--secondary-foreground: 240 5.9% 10%;
|
||||||
|
|
||||||
|
--muted: 240 4.8% 95.9%;
|
||||||
|
--muted-foreground: 240 3.8% 46.1%;
|
||||||
|
|
||||||
|
--accent: 240 4.8% 95.9%;
|
||||||
|
--accent-foreground: 240 5.9% 10%;
|
||||||
|
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--border: 240 5.9% 90%;
|
||||||
|
--input: 240 5.9% 90%;
|
||||||
|
--ring: 240 10% 3.9%;
|
||||||
|
|
||||||
|
--radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: 240 10% 3.9%;
|
||||||
|
--foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--card: 240 10% 3.9%;
|
||||||
|
--card-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--popover: 240 10% 3.9%;
|
||||||
|
--popover-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--primary: 0 0% 98%;
|
||||||
|
--primary-foreground: 240 5.9% 10%;
|
||||||
|
|
||||||
|
--secondary: 240 3.7% 15.9%;
|
||||||
|
--secondary-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--muted: 240 3.7% 15.9%;
|
||||||
|
--muted-foreground: 240 5% 64.9%;
|
||||||
|
|
||||||
|
--accent: 240 3.7% 15.9%;
|
||||||
|
--accent-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
|
||||||
|
--border: 240 3.7% 15.9%;
|
||||||
|
--input: 240 3.7% 15.9%;
|
||||||
|
--ring: 240 4.9% 83.9%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
@apply h-screen w-screen;
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||||
|
After Width: | Height: | Size: 276 B |
@ -0,0 +1,14 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import ToggleThemeButton from './ToggleThemeButton.vue'
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<div className="flex justify-center border-b border-b-border px-2">
|
||||||
|
<div
|
||||||
|
className="flex w-full max-w-6xl items-center justify-between py-2">
|
||||||
|
<div className="cursor-pointer font-bold"> Shortener </div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ToggleThemeButton />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Sun, Moon } from 'lucide-vue-next'
|
||||||
|
import { useDark, useToggle } from '@vueuse/core'
|
||||||
|
|
||||||
|
const isDark = useDark()
|
||||||
|
// const isDark = useDark({
|
||||||
|
// selector: 'body',
|
||||||
|
// attribute: 'color-scheme',
|
||||||
|
// valueDark: 'dark',
|
||||||
|
// valueLight: 'light',
|
||||||
|
// })
|
||||||
|
const toggleDark = useToggle(isDark)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Button @click="() => toggleDark()">
|
||||||
|
<Moon v-if="isDark" />
|
||||||
|
<Sun v-else />
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { Loader2, GithubIcon } from 'lucide-vue-next'
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
|
||||||
|
const isLoading = ref(false)
|
||||||
|
async function onSubmit(event: Event) {
|
||||||
|
event.preventDefault()
|
||||||
|
isLoading.value = true
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
isLoading.value = false
|
||||||
|
}, 3000)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div :class="cn('grid gap-6', $attrs.class ?? '')">
|
||||||
|
<form @submit="onSubmit">
|
||||||
|
<div class="grid gap-6">
|
||||||
|
<div class="grid gap-1">
|
||||||
|
<Label for="email"> Email </Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
placeholder="name@example.com"
|
||||||
|
type="email"
|
||||||
|
auto-capitalize="none"
|
||||||
|
auto-complete="email"
|
||||||
|
auto-correct="off"
|
||||||
|
:disabled="isLoading" />
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-1">
|
||||||
|
<Label for="password"> Password </Label>
|
||||||
|
<Input
|
||||||
|
id="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
type="password"
|
||||||
|
:disabled="isLoading" />
|
||||||
|
</div>
|
||||||
|
<Button :disabled="isLoading">
|
||||||
|
<Loader2
|
||||||
|
v-if="isLoading"
|
||||||
|
class="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
Sign In
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!-- <div class="relative"> -->
|
||||||
|
<!-- <div class="absolute inset-0 flex items-center"> -->
|
||||||
|
<!-- <span class="w-full border-t" /> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- <div class="relative flex justify-center text-xs uppercase"> -->
|
||||||
|
<!-- <span class="bg-background px-2 text-muted-foreground"> -->
|
||||||
|
<!-- Or continue with -->
|
||||||
|
<!-- </span> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- <Button -->
|
||||||
|
<!-- variant="outline" -->
|
||||||
|
<!-- type="button" -->
|
||||||
|
<!-- :disabled="isLoading"> -->
|
||||||
|
<!-- <Loader2 -->
|
||||||
|
<!-- v-if="isLoading" -->
|
||||||
|
<!-- class="mr-2 h-4 w-4 animate-spin" /> -->
|
||||||
|
<!-- <GithubIcon -->
|
||||||
|
<!-- v-else -->
|
||||||
|
<!-- class="mr-2 h-4 w-4" /> -->
|
||||||
|
<!-- GitHub -->
|
||||||
|
<!-- </Button> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,84 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { Loader2, GithubIcon } from 'lucide-vue-next'
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
|
||||||
|
const isLoading = ref(false)
|
||||||
|
async function onSubmit(event: Event) {
|
||||||
|
event.preventDefault()
|
||||||
|
isLoading.value = true
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
isLoading.value = false
|
||||||
|
}, 3000)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div :class="cn('grid gap-6', $attrs.class ?? '')">
|
||||||
|
<form @submit="onSubmit">
|
||||||
|
<div class="grid gap-6">
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<Label for="username"> Username </Label>
|
||||||
|
<Input
|
||||||
|
id="username"
|
||||||
|
placeholder="example user"
|
||||||
|
type="text"
|
||||||
|
:disabled="isLoading" />
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<Label for="email"> Email </Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
placeholder="name@example.com"
|
||||||
|
type="email"
|
||||||
|
auto-capitalize="none"
|
||||||
|
auto-complete="email"
|
||||||
|
auto-correct="off"
|
||||||
|
:disabled="isLoading" />
|
||||||
|
</div>
|
||||||
|
<div class="grid gap-2">
|
||||||
|
<Label for="password"> Password </Label>
|
||||||
|
<Input
|
||||||
|
id="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
type="password"
|
||||||
|
:disabled="isLoading" />
|
||||||
|
</div>
|
||||||
|
<Button :disabled="isLoading">
|
||||||
|
<Loader2
|
||||||
|
v-if="isLoading"
|
||||||
|
class="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
Sign Up
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!-- <div class="relative"> -->
|
||||||
|
<!-- <div class="absolute inset-0 flex items-center"> -->
|
||||||
|
<!-- <span class="w-full border-t" /> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- <div class="relative flex justify-center text-xs uppercase"> -->
|
||||||
|
<!-- <span class="bg-background px-2 text-muted-foreground"> -->
|
||||||
|
<!-- Or continue with -->
|
||||||
|
<!-- </span> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- </div> -->
|
||||||
|
<!-- <Button -->
|
||||||
|
<!-- variant="outline" -->
|
||||||
|
<!-- type="button" -->
|
||||||
|
<!-- :disabled="isLoading"> -->
|
||||||
|
<!-- <Loader2 -->
|
||||||
|
<!-- v-if="isLoading" -->
|
||||||
|
<!-- class="mr-2 h-4 w-4 animate-spin" /> -->
|
||||||
|
<!-- <GithubIcon -->
|
||||||
|
<!-- v-else -->
|
||||||
|
<!-- class="mr-2 h-4 w-4" /> -->
|
||||||
|
<!-- GitHub -->
|
||||||
|
<!-- </Button> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { buttonVariants } from '.'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
|
||||||
|
size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
|
||||||
|
as?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
withDefaults(defineProps<Props>(), {
|
||||||
|
as: 'button',
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<component
|
||||||
|
:is="as"
|
||||||
|
:class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</component>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import { cva } from 'class-variance-authority'
|
||||||
|
|
||||||
|
export { default as Button } from './Button.vue'
|
||||||
|
|
||||||
|
export const buttonVariants = cva(
|
||||||
|
'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
'bg-primary-foreground text-primary hover:bg-primary-foreground/90',
|
||||||
|
destructive:
|
||||||
|
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||||
|
outline:
|
||||||
|
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
||||||
|
secondary:
|
||||||
|
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||||
|
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||||
|
link: 'text-primary underline-offset-4 hover:underline',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: 'h-10 px-4 py-2',
|
||||||
|
sm: 'h-9 rounded-md px-3',
|
||||||
|
lg: 'h-11 rounded-md px-8',
|
||||||
|
icon: 'h-10 w-10',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
size: 'default',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useVModel } from '@vueuse/core'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
defaultValue?: string | number
|
||||||
|
modelValue?: string | number
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const emits = defineEmits<{
|
||||||
|
(e: 'update:modelValue', payload: string | number): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const modelValue = useVModel(props, 'modelValue', emits, {
|
||||||
|
passive: true,
|
||||||
|
defaultValue: props.defaultValue,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<input v-model="modelValue" type="text" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? '')">
|
||||||
|
</template>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export { default as Input } from './Input.vue'
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Label, type LabelProps } from 'radix-vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<LabelProps & { class?: string }>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Label
|
||||||
|
v-bind="props"
|
||||||
|
:class="
|
||||||
|
cn(
|
||||||
|
'block text-sm tracking-tight font-medium text-foreground text-left',
|
||||||
|
props.class,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</Label>
|
||||||
|
</template>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export { default as Label } from './Label.vue'
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
export const isAuthenticated = async () => {
|
||||||
|
return false
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { type ClassValue, clsx } from 'clsx'
|
||||||
|
import { twMerge } from 'tailwind-merge'
|
||||||
|
import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
import "./assets/index.css";
|
||||||
|
|
||||||
|
import { createApp } from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import router from "./router";
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
|
||||||
|
app.use(router);
|
||||||
|
|
||||||
|
app.mount("#app");
|
||||||
@ -0,0 +1,37 @@
|
|||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
import { isAuthenticated } from '@/lib/auth'
|
||||||
|
import HomeView from '@/views/HomeView.vue'
|
||||||
|
import LoginPage from '@/views/LoginPage.vue'
|
||||||
|
import SignUpPage from '@/views/SignUpPage.vue'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: HomeView,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/login',
|
||||||
|
name: 'login',
|
||||||
|
component: LoginPage,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/signup',
|
||||||
|
name: 'signup',
|
||||||
|
component: SignUpPage,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
router.beforeEach(async (to) => {
|
||||||
|
const isLoggedIn = await isAuthenticated()
|
||||||
|
if (isLoggedIn && (to.name === 'login' || to.name === 'signup')) {
|
||||||
|
return { name: 'home' }
|
||||||
|
}
|
||||||
|
if (!isLoggedIn && to.name !== 'login' && to.name !== 'signup') {
|
||||||
|
return { name: 'login' }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
<div> Test </div>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Link } from 'lucide-vue-next'
|
||||||
|
import UserLoginForm from '@/components/UserLoginForm.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="container relative grid h-full flex-col items-center justify-center xl:max-w-none xl:grid-cols-7 xl:px-0">
|
||||||
|
<div
|
||||||
|
class="absolute left-10 top-10 z-20 flex items-center text-lg font-medium">
|
||||||
|
<Link class="mr-2 h-6 w-6" />
|
||||||
|
Shortener
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="relative col-span-4 hidden h-full flex-col bg-muted p-10 text-white dark:border-r xl:flex">
|
||||||
|
<div class="absolute inset-0 bg-zinc-900" />
|
||||||
|
</div>
|
||||||
|
<div class="col-span-3 lg:p-8">
|
||||||
|
<div
|
||||||
|
class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||||
|
<div class="flex flex-col gap-10 text-center">
|
||||||
|
<div class="flex flex-col gap-2 pb-8">
|
||||||
|
<h1 class="text-2xl font-semibold tracking-tight">
|
||||||
|
Welcome Back
|
||||||
|
</h1>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Sign in to your account
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<UserLoginForm />
|
||||||
|
<p class="px-8 text-center text-sm text-muted-foreground">
|
||||||
|
Don't have an account?
|
||||||
|
<RouterLink
|
||||||
|
to="signup"
|
||||||
|
class="underline underline-offset-4 hover:text-primary">
|
||||||
|
Sign Up Now
|
||||||
|
</RouterLink>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Link } from 'lucide-vue-next'
|
||||||
|
import UserSignUpForm from '@/components/UserSignUpForm.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="container relative grid h-full flex-col items-center justify-center xl:max-w-none xl:grid-cols-7 xl:px-0">
|
||||||
|
<div
|
||||||
|
class="absolute left-10 top-10 z-20 flex items-center text-lg font-medium">
|
||||||
|
<Link class="mr-2 h-6 w-6" />
|
||||||
|
Shortener
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="relative col-span-4 hidden h-full flex-col bg-muted p-10 text-white dark:border-r xl:flex">
|
||||||
|
<div class="absolute inset-0 bg-zinc-900" />
|
||||||
|
</div>
|
||||||
|
<div class="col-span-3 lg:p-8">
|
||||||
|
<div
|
||||||
|
class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||||
|
<div class="flex flex-col gap-10 text-center">
|
||||||
|
<div class="flex flex-col gap-2 pb-8">
|
||||||
|
<h1 class="text-2xl font-semibold tracking-tight">
|
||||||
|
Get Started
|
||||||
|
</h1>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Create a new account
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<UserSignUpForm />
|
||||||
|
<p class="px-8 text-center text-sm text-muted-foreground">
|
||||||
|
Have an account?
|
||||||
|
<RouterLink
|
||||||
|
to="login"
|
||||||
|
class="underline underline-offset-4 hover:text-primary">
|
||||||
|
Sign In Now
|
||||||
|
</RouterLink>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
darkMode: ['class'],
|
||||||
|
|
||||||
|
content: [
|
||||||
|
'./pages/**/*.{ts,tsx,vue}',
|
||||||
|
'./components/**/*.{ts,tsx,vue}',
|
||||||
|
'./app/**/*.{ts,tsx,vue}',
|
||||||
|
'./src/**/*.{ts,tsx,vue}',
|
||||||
|
'./index.html',
|
||||||
|
],
|
||||||
|
|
||||||
|
theme: {
|
||||||
|
container: {
|
||||||
|
center: true,
|
||||||
|
padding: '2rem',
|
||||||
|
screens: {
|
||||||
|
'2xl': '1400px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
border: 'hsl(var(--border))',
|
||||||
|
input: 'hsl(var(--input))',
|
||||||
|
ring: 'hsl(var(--ring))',
|
||||||
|
background: 'hsl(var(--background))',
|
||||||
|
foreground: 'hsl(var(--foreground))',
|
||||||
|
primary: {
|
||||||
|
DEFAULT: 'hsl(var(--primary))',
|
||||||
|
foreground: 'hsl(var(--primary-foreground))',
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
DEFAULT: 'hsl(var(--secondary))',
|
||||||
|
foreground: 'hsl(var(--secondary-foreground))',
|
||||||
|
},
|
||||||
|
destructive: {
|
||||||
|
DEFAULT: 'hsl(var(--destructive))',
|
||||||
|
foreground: 'hsl(var(--destructive-foreground))',
|
||||||
|
},
|
||||||
|
muted: {
|
||||||
|
DEFAULT: 'hsl(var(--muted))',
|
||||||
|
foreground: 'hsl(var(--muted-foreground))',
|
||||||
|
},
|
||||||
|
accent: {
|
||||||
|
DEFAULT: 'hsl(var(--accent))',
|
||||||
|
foreground: 'hsl(var(--accent-foreground))',
|
||||||
|
},
|
||||||
|
popover: {
|
||||||
|
DEFAULT: 'hsl(var(--popover))',
|
||||||
|
foreground: 'hsl(var(--popover-foreground))',
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
DEFAULT: 'hsl(var(--card))',
|
||||||
|
foreground: 'hsl(var(--card-foreground))',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
lg: 'var(--radius)',
|
||||||
|
md: 'calc(var(--radius) - 2px)',
|
||||||
|
sm: 'calc(var(--radius) - 4px)',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
'accordion-down': {
|
||||||
|
from: { height: 0 },
|
||||||
|
to: { height: 'var(--radix-accordion-content-height)' },
|
||||||
|
},
|
||||||
|
'accordion-up': {
|
||||||
|
from: { height: 'var(--radix-accordion-content-height)' },
|
||||||
|
to: { height: 0 },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
||||||
|
'accordion-up': 'accordion-up 0.2s ease-out',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [require('tailwindcss-animate')],
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||||
|
"exclude": ["src/**/__tests__/*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"extends": "@tsconfig/node18/tsconfig.json",
|
||||||
|
"include": [
|
||||||
|
"vite.config.*",
|
||||||
|
"vitest.config.*",
|
||||||
|
"cypress.config.*",
|
||||||
|
"nightwatch.conf.*",
|
||||||
|
"playwright.config.*"
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"types": ["node"]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue