Skip to content

feat(UI):Add login,signup and forget forms #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rutuHaladkar wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat(UI):Add login,signup and forget forms #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
24275d2
feat(UI):Add login,signup and forget forms
rutuHaladkar Jul 7, 2025
dff95ee
fix: implemented code review changes
rutuHaladkar Jul 9, 2025
5d89d6b
feat(ui): forget and reset page
rutuHaladkar Jul 11, 2025
6d46baf
feat(ui): forget and reset page
rutuHaladkar Jul 11, 2025
b8c759a
added db connection
rutuHaladkar Jul 22, 2025
1f45d3d
nuxt config
rutuHaladkar Jul 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged
npm run lint
16 changes: 16 additions & 0 deletions app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,19 @@
<NuxtPage />
</NuxtLayout>
</template>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Red Hat Text', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Red Hat Display';
}
</style>
298 changes: 298 additions & 0 deletions assets/css/auth.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,298 @@

.form-container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 2rem;
position: relative;
overflow: hidden;
}

.background-decoration {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
background-size: 60px 60px;
animation: float 25s ease-in-out infinite;
pointer-events: none;
}

@keyframes float {

0%,
100% {
transform: translate(0, 0) rotate(0deg);
}

50% {
transform: translate(-20px, -20px) rotate(180deg);
}
}

.form-card {
max-width: 450px;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
position: relative;
}

.form-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4);
background-size: 200% 100%;
animation: gradient 4s ease infinite;
}

@keyframes gradient {

0%,
100% {
background-position: 0% 50%;
}

50% {
background-position: 100% 50%;
}
}

.card-header {
text-align: center;
padding: 3rem 2.5rem 2rem;
}

h1 {
color: #1f2937;
font-size: 2.2rem;
font-weight: 700;
margin: 0 0 0.5rem;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.subtitle {
color: #718096;
font-size: 1rem;
font-weight: 400;
}

form {
padding: 0 2.5rem 2.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.input-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

input,
select {
padding: 1rem 1.25rem;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 1rem;
background: #ffffff;
transition: all 0.3s ease;
}

input:focus,
select:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
transform: translateY(-2px);
}

input.error,
select.error {
border-color: #e53e3e;
background: #fef5f5;
}

input.error:focus,
select.error:focus {
border-color: #e53e3e;
box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

.error-message {
color: #e53e3e;
font-size: 0.875rem;
min-height: 1.25rem;
display: flex;
align-items: center;
font-weight: 500;
}

.login-button {
width: auto !important;
padding: 0.75rem 1.75rem !important;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%) !important;
color: white !important;
border: none !important;
border-radius: 14px !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
cursor: pointer !important;
display: flex !important;
justify-content: center !important;
background-size: 200% 100% !important;
animation: buttonGradient 4s ease infinite !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 20px rgba(99, 102, 241, 0.25),
0 4px 6px rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s ease !important;
}

.login-button::before {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), transparent);
transform: skewX(-25deg);
transition: left 0.6s ease;
z-index: 0;
}

.login-button:hover::before {
left: 125%;
}

.login-button:hover {
transform: translateY(-4px) scale(1.02) !important;
box-shadow: 0 12px 30px rgba(99, 102, 241, 0.35),
0 6px 12px rgba(0, 0, 0, 0.1) !important;
}

.login-button:active {
transform: scale(0.98) !important;
box-shadow: 0 6px 15px rgba(99, 102, 241, 0.2) !important;
}

.login-button span {
position: relative;
z-index: 1;
}

@keyframes buttonGradient {

0%,
100% {
background-position: 0% 50%;
}

50% {
background-position: 100% 50%;
}
}

.links-container {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}

.register-link {
color: #718096;
border-top: 1px solid #e2e8f0;
padding-top: 1rem;
font-size: 0.9rem;
text-align: center;
text-decoration: none;
}

.register-link strong {
color: #6366f1;
}

.register-link:hover {
color: #8b5cf6;
transform: translateY(-1px);
}

/* Responsive tweaks same as login */
@media (max-width: 768px) {
.login-container {
padding: 1rem;
}

.form-card {
border-radius: 16px;
}

.card-header {
padding: 2rem 1.5rem 1.5rem;
}

h1 {
font-size: 1.8rem;
}

form {
padding: 0 1.5rem 1.5rem;
}

input,
select {
padding: 0.875rem 1rem;
font-size: 0.95rem;
}

.login-button {
padding: 0.875rem 1.5rem !important;
font-size: 0.95rem !important;
}
}

@media (max-width: 480px) {
h1 {
font-size: 1.6rem;
}

.subtitle {
font-size: 0.9rem;
}

form {
padding: 0 1rem 1rem;
gap: 1.25rem;
}

input,
select {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}

.login-button {
padding: 0.75rem 1.25rem !important;
font-size: 0.9rem !important;
}

.register-link {
font-size: 0.85rem;
}
}
2 changes: 0 additions & 2 deletions layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<template>
<div>
<h1>Deafult Header</h1>
<slot />
Copy link
Copy Markdown
Contributor

@pshirsat443 pshirsat443 Jul 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

layout is use for common skeleton if you are just using slot I think there is no need of layout can render pages directly

Copy link
Copy Markdown
Contributor

@pshirsat443 pshirsat443 Jul 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still I can see there are no changes in this files

<h1>Deafult Header</h1>
</div>
</template>
17 changes: 15 additions & 2 deletions nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,18 @@ export default defineNuxtConfig({
'@nuxt/scripts',
'@nuxt/test-utils',
'@nuxt/ui'
]
})
],
ssr:false,
css: [
'~/assets/css/auth.css'
],

runtimeConfig: {
supabaseServiceKey: process.env.SUPABASE_SERVICE_KEY,
public: {
API_BASE_URL: process.env.NUXT_PUBLIC_API_BASE_URL,
supabaseUrl: process.env.SUPABASE_URL
}
}
})

Loading