Skip to content

Commit 5f63dee

Browse files
Bran18Bran18
committed
feat:impr responsive
1 parent c845fc9 commit 5f63dee

File tree

19 files changed

+595
-354
lines changed

19 files changed

+595
-354
lines changed

‎apps/masterbots.ai/app/actions/ai-executers.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { parseWordwareResponse } from '@/components/shared/wordware-chat'
44
import { wordwareFlows } from '@/lib/constants/wordware-flows'
55
import type { aiTools } from '@/lib/helpers/ai-schemas'
66
import { validateAndSanitizeJson } from '@/lib/helpers/ai-streams'
7-
import { WordWareDescribeDAtaResponse } from '@/types/wordware-flows.types'
7+
import type { WordWareDescribeDAtaResponse } from '@/types/wordware-flows.types'
88
import axios from 'axios'
99
import type { z } from 'zod'
1010
import { subtractChatbotMetadataLabels } from '.'

‎apps/masterbots.ai/app/auth/forgot-password/page.tsx‎

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,43 @@
1+
'use client'
2+
13
import ForgotPasswordForm from '@/components/auth/forgot-password-form'
4+
import { motion } from 'framer-motion'
5+
import Image from 'next/image'
26

37
export default function ForgotPasswordPage() {
48
return (
5-
<div className="container max-w-md mx-auto mt-10">
6-
<h1 className="mb-4 text-2xl font-bold">Forgot Password</h1>
7-
<ForgotPasswordForm />
8-
</div>
9+
<motion.div
10+
className="flex flex-col min-h-[calc(100vh-4rem)] items-center py-6 sm:py-10"
11+
initial={{ opacity: 0 }}
12+
animate={{ opacity: 1 }}
13+
transition={{ duration: 0.3 }}
14+
>
15+
{/* Logo container with animation */}
16+
<motion.div
17+
className="w-full max-w-[320px] sm:max-w-[500px] md:max-w-[726px] relative aspect-[726/200] mb-6 sm:mb-10"
18+
initial={{ y: 20 }}
19+
animate={{ y: 0 }}
20+
transition={{ duration: 0.4, delay: 0.1 }}
21+
>
22+
<Image
23+
src="/images/masterbotslogo.png"
24+
fill
25+
priority
26+
alt="Masterbots Logo"
27+
className="object-contain"
28+
/>
29+
</motion.div>
30+
31+
{/* Form container with animation and enhanced responsiveness */}
32+
<motion.div
33+
className="w-full max-w-[min(100%,400px)] px-4 space-y-6"
34+
initial={{ y: 20, opacity: 0 }}
35+
animate={{ y: 0, opacity: 1 }}
36+
transition={{ duration: 0.4, delay: 0.2 }}
37+
>
38+
<h1 className="mb-4 text-2xl font-bold">Forgot Password</h1>
39+
<ForgotPasswordForm />
40+
</motion.div>
41+
</motion.div>
942
)
10-
}
43+
}

‎apps/masterbots.ai/app/auth/reset-password/page.tsx‎

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,50 @@
1+
'use client'
2+
13
import { Suspense } from 'react'
24
import ResetPasswordForm from '@/components/auth/reset-password-form'
5+
import { motion } from 'framer-motion'
6+
import Image from 'next/image'
37

48
export default function ResetPasswordPage({
59
searchParams
610
}: {
711
searchParams: { token: string }
812
}) {
913
return (
10-
<div className="container max-w-md mx-auto mt-10">
11-
<h1 className="mb-4 text-2xl font-bold">Reset Password</h1>
12-
<Suspense fallback={<div>Loading...</div>}>
13-
<ResetPasswordForm token={searchParams.token} />
14-
</Suspense>
15-
</div>
14+
<motion.div
15+
className="flex flex-col min-h-[calc(100vh-4rem)] items-center py-6 sm:py-10"
16+
initial={{ opacity: 0 }}
17+
animate={{ opacity: 1 }}
18+
transition={{ duration: 0.3 }}
19+
>
20+
{/* Logo container with animation */}
21+
<motion.div
22+
className="w-full max-w-[320px] sm:max-w-[500px] md:max-w-[726px] relative aspect-[726/200] mb-6 sm:mb-10"
23+
initial={{ y: 20 }}
24+
animate={{ y: 0 }}
25+
transition={{ duration: 0.4, delay: 0.1 }}
26+
>
27+
<Image
28+
src="/images/masterbotslogo.png"
29+
fill
30+
priority
31+
alt="Masterbots Logo"
32+
className="object-contain"
33+
/>
34+
</motion.div>
35+
36+
{/* Form container with animation and enhanced responsiveness */}
37+
<motion.div
38+
className="w-full max-w-[min(100%,400px)] px-4 space-y-6"
39+
initial={{ y: 20, opacity: 0 }}
40+
animate={{ y: 0, opacity: 1 }}
41+
transition={{ duration: 0.4, delay: 0.2 }}
42+
>
43+
<h1 className="mb-4 text-2xl font-bold">Reset Password</h1>
44+
<Suspense fallback={<div>Loading...</div>}>
45+
<ResetPasswordForm token={searchParams.token} />
46+
</Suspense>
47+
</motion.div>
48+
</motion.div>
1649
)
17-
}
50+
}

‎apps/masterbots.ai/app/auth/signin/page.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
// app/auth/signin/page.tsx
2+
13
'use client'
24

35
import Link from 'next/link'
@@ -10,36 +12,41 @@ export default function SignInPage() {
1012
const verified = searchParams.get('verified')
1113

1214
return (
13-
<div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center py-10">
14-
<div
15-
className="relative flex justify-center w-full max-w-[726px] py-4 text-center "
16-
style={{ height: 200 }}
17-
>
15+
<div className="flex flex-col min-h-[calc(100vh-4rem)] items-center py-6 sm:py-10">
16+
<div className="w-full max-w-[320px] sm:max-w-[500px] md:max-w-[726px] relative aspect-[726/200] mb-6 sm:mb-10">
1817
<Image
1918
src="/images/masterbotslogo.png"
20-
fill={true}
19+
fill
20+
priority
2121
alt="Masterbots Logo"
22-
style={{ maxWidth: 726, objectFit: 'contain' }}
23-
className="flex self-center"
22+
className="object-contain"
2423
/>
2524
</div>
26-
<div className="max-w-md mx-auto space-y-6">
25+
26+
<div className="w-full max-w-[min(100%,400px)] px-4 space-y-6">
2727
{verified && (
2828
<div className="p-4 text-sm text-center text-green-800 rounded-lg bg-green-50 dark:bg-green-900/30 dark:text-green-200">
2929
<p className="font-medium">Email verified successfully!</p>
3030
<p>Please sign in to access your account.</p>
3131
</div>
3232
)}
33+
3334
<div className="space-y-2 text-center">
34-
<p className="text-muted-foreground">
35+
<p className="text-sm sm:text-base text-muted-foreground">
3536
Enter your email and password to access your account.
3637
</p>
3738
</div>
39+
3840
<SignInForm />
41+
3942
<div className="space-y-4">
4043
<div className="text-sm text-center text-muted-foreground">
4144
Don&apos;t have an account?{' '}
42-
<Link href="/auth/signup" className="underline" prefetch={false}>
45+
<Link
46+
href="/auth/signup"
47+
className="underline transition-colors hover:text-primary"
48+
prefetch={false}
49+
>
4350
Sign up
4451
</Link>
4552
</div>

‎apps/masterbots.ai/app/auth/signup/page.tsx‎

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,60 @@
1+
'use client'
2+
13
import Image from 'next/image'
24
import SignUpForm from '@/components/auth/signup-form'
5+
import { motion } from 'framer-motion'
36

47
export default function SignUpPage() {
58
return (
6-
<div className="flex flex-col h-[calc(100vh-theme(spacing.16))] items-center py-10">
7-
<div
8-
className="relative flex justify-center w-full max-w-[726px] py-4 text-center "
9-
style={{ height: 200 }}
9+
<motion.div
10+
className="flex flex-col min-h-[calc(100vh-4rem)] items-center py-6 sm:py-10"
11+
initial={{ opacity: 0 }}
12+
animate={{ opacity: 1 }}
13+
transition={{ duration: 0.3 }}
14+
>
15+
{/* Logo container with animation */}
16+
<motion.div
17+
className="w-full max-w-[320px] sm:max-w-[500px] md:max-w-[726px] relative aspect-[726/200] mb-6 sm:mb-10"
18+
initial={{ y: 20 }}
19+
animate={{ y: 0 }}
20+
transition={{ duration: 0.4, delay: 0.1 }}
1021
>
1122
<Image
1223
src="/images/masterbotslogo.png"
13-
fill={true}
24+
fill
25+
priority
1426
alt="Masterbots Logo"
15-
style={{ maxWidth: 726, objectFit: 'contain' }}
16-
className="flex self-center"
27+
className="object-contain"
1728
/>
18-
</div>
19-
<div className="max-w-md mx-auto space-y-6">
29+
</motion.div>
30+
31+
{/* Form container with animation and enhanced responsiveness */}
32+
<motion.div
33+
className="w-full max-w-[min(100%,400px)] px-4 space-y-6"
34+
initial={{ y: 20, opacity: 0 }}
35+
animate={{ y: 0, opacity: 1 }}
36+
transition={{ duration: 0.4, delay: 0.2 }}
37+
>
2038
<div className="space-y-2 text-center">
21-
<p className="text-muted-foreground">
39+
<p className="text-sm sm:text-base text-muted-foreground">
2240
Enter your email and password to create your account.
2341
</p>
2442
</div>
43+
2544
<SignUpForm />
26-
</div>
27-
</div>
45+
46+
{/* Optional: Add terms and conditions notice */}
47+
<p className="mt-6 text-xs text-center text-muted-foreground">
48+
By creating an account, you agree to our{' '}
49+
<a href="/terms" className="underline hover:text-primary">
50+
Terms of Service
51+
</a>{' '}
52+
and{' '}
53+
<a href="/privacy" className="underline hover:text-primary">
54+
Privacy Policy
55+
</a>
56+
</p>
57+
</motion.div>
58+
</motion.div>
2859
)
2960
}

‎apps/masterbots.ai/components/auth/forgot-password-form.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client'
22

3-
import React, { useState } from 'react'
3+
import type React from 'react'
4+
import { useState } from 'react'
45
import { Button } from '@/components/ui/button'
56
import { Input } from '@/components/ui/input'
67
import { Label } from '@/components/ui/label'

‎apps/masterbots.ai/components/auth/reset-password-form.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
'use client'
22

3-
import React from 'react'
3+
import type React from 'react'
44
import { Button } from '@/components/ui/button'
55
import { Input } from '@/components/ui/input'
66
import { Label } from '@/components/ui/label'
77
import { toast } from 'react-hot-toast'
88
import { useRouter } from 'next/navigation'
9-
import PasswordStrengthMeter from '@/components/shared/password-strength-meter'
9+
import { PasswordStrengthMeter } from '@/components/shared/password-strength-meter'
1010
import { isPasswordStrong } from '@/lib/password'
1111
import { Eye, EyeOff } from 'lucide-react'
1212
import { useSetState } from 'react-use'
@@ -146,3 +146,4 @@ export default function ResetPasswordForm({ token }: { token: string }) {
146146
</form>
147147
)
148148
}
149+

‎apps/masterbots.ai/components/auth/signin-form.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ import { signIn } from 'next-auth/react'
99
import Link from 'next/link'
1010
import { useRouter } from 'next/navigation'
1111
import { useState } from 'react'
12+
import { Eye, EyeOff } from 'lucide-react'
1213

1314
export default function SignInForm() {
1415
const router = useRouter()
15-
1616
const [errorMessage, setErrorMessage] = useState<string | null>(null)
17+
const [showPassword, setShowPassword] = useState(false)
1718

1819
const handleSubmit = async (e: React.FormEvent) => {
1920
e.preventDefault()
@@ -54,7 +55,22 @@ export default function SignInForm() {
5455
<Label htmlFor="password" variant="required">
5556
Password
5657
</Label>
57-
<Input id="password" name="password" type="password" required />
58+
<div className="relative">
59+
<Input
60+
id="password"
61+
name="password"
62+
type={showPassword ? 'text' : 'password'}
63+
required
64+
className="pr-10"
65+
/>
66+
<button
67+
type="button"
68+
onClick={() => setShowPassword(!showPassword)}
69+
className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600"
70+
>
71+
{showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
72+
</button>
73+
</div>
5874
</div>
5975
<Button type="submit" className="w-full">
6076
Sign In
@@ -77,4 +93,4 @@ export default function SignInForm() {
7793
)}
7894
</form>
7995
)
80-
}
96+
}

0 commit comments

Comments
 (0)