Skip to content

Commit

Permalink
added authentication and ios install prompt
Browse files Browse the repository at this point in the history
  • Loading branch information
@Stephen-Gordon
Stephen-Gordon committed Mar 19, 2024
1 parent 101ae40 commit 973c6f2
Show file tree
Hide file tree
Showing 13 changed files with 357 additions and 249 deletions.
27 changes: 11 additions & 16 deletions src/app/components/AddToHomeScreen/AddToHomeScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,21 +76,16 @@ export default function AddToHomeScreen() {
)

return (
<>
{
displayPrompt !== ''
?
<>
<div
className="fixed top-0 left-0 right-0 bottom-0 bg-black/70 z-50"
onClick={closePrompt}
>
<Prompt />
</div>
</>
:
<></>
}
</>
<>
{displayPrompt !== '' ? (
<>

<Prompt />

</>
) : (
<></>
)}
</>
);
}
65 changes: 39 additions & 26 deletions src/app/components/AddToHomeScreen/AddToIosSafari.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,53 @@ import { TbShare2 } from 'react-icons/tb'
import { AiOutlinePlusSquare } from 'react-icons/ai'
import { FaTimes } from 'react-icons/fa'
import { ImArrowDown } from 'react-icons/im'

import { Smartphone } from 'lucide-react'
import { Card, CardContent } from '../ui/card'
import { BackgroundGradientAnimation } from '../ui/background-gradient-animation'
interface Props {
closePrompt: () => void;
doNotShowAgain: () => void;
}

function closePrompt () {
return null

}

export default function AddToIosSafari(props: Props) {
const { closePrompt, doNotShowAgain } = props;
const { doNotShowAgain } = props;

return (
<div className="fixed bottom-0 left-0 right-0 h-[60%] z-50 pb-12 px-4 text-white">
<div className="relative bg-primary p-4 h-full rounded-xl flex flex-col justify-around items-center text-center">
<button className="absolute top-0 right-0 p-3" onClick={closePrompt}>
<FaTimes className="text-2xl" />
</button>
<p className="text-lg">For the best experience, we recommend installing the Valley Trader app to your home screen!</p>
<div className="flex gap-2 items-center text-lg">
<p>Click the</p>
<TbShare2 className="text-4xl" />
<p>icon</p>
</div>
<div className="flex flex-col gap-2 items-center text-lg w-full px-4">
<p>Scroll down and then click:</p>
<div className="bg-zinc-800 flex justify-between items-center w-full px-4 py-2 rounded-lg">
<p>Add to Home Screen</p>
<AiOutlinePlusSquare className="text-2xl" />
</div>
<div className='relative'>
<div className='absolute -z-50 '>
<BackgroundGradientAnimation />
</div>
<Card>
<CardContent className='bg-card/30 bg-opacity-90 bg-clip-padding backdrop-blur-sm backdrop-filter'>
<div className='flex h-full flex-col items-center justify-around space-y-6 rounded-xl p-4 text-center'>
<div className='flex justify-center'>
<Smartphone className='h-20 w-20 ' strokeWidth={1} />
</div>
<p className='font-semibold leading-none tracking-tight '>
To install this app, please add it to your home screen{' '}
</p>
<div className='flex items-center gap-2 text-lg'>
<p>Click the</p>
<TbShare2 className='text-4xl' />
<p>icon</p>
</div>
<div className='flex w-full flex-col items-center gap-2 px-4 text-lg'>
<p>Scroll down and then click:</p>
<div className='flex w-full items-center justify-between rounded-lg bg-zinc-800 px-4 py-2'>
<p>Add to Home Screen</p>
<AiOutlinePlusSquare className='text-2xl' />
</div>
<button className="border-2 p-1" onClick={doNotShowAgain}>Don&apos;t show again</button>
<ImArrowDown
className="text-4xl absolute -bottom-[50px] text-indigo-700 -z-10 animate-bounce"
/>
</div>
{/* <ImArrowDown className='animate-bounce text-4xl text-slate-400' />
*/}{' '}
</div>

</div>
)
</CardContent>
</Card>
</div>
);
}
4 changes: 2 additions & 2 deletions src/app/components/AddToHomeScreen/AddToMobileChrome.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function AddToMobileChrome(props: Props) {
return (
<div className="fixed top-0 left-0 right-0 h-[60%] z-50 pt-12 px-4 text-white">
<ImArrowUp className="text-4xl absolute top-[10px] right-[10px] text-indigo-700 z-10 animate-bounce" />
<div className="relative bg-primary p-4 h-full rounded-xl flex flex-col justify-around items-center text-center">
<div className="relative bg-background p-4 h-full rounded-xl flex flex-col justify-around items-center text-center">
<button className="absolute top-0 right-0 p-3" onClick={closePrompt}>
<FaTimes className="text-2xl" />
</button>
Expand All @@ -28,7 +28,7 @@ export default function AddToMobileChrome(props: Props) {
</div>
<div className="flex flex-col gap-2 items-center text-lg w-full px-4">
<p>Scroll down and then click:</p>
<div className="bg-zinc-50 flex justify-between items-center w-full px-4 py-2 rounded-lg text-zinc-900">
<div className="bg-background flex justify-between items-center w-full px-4 py-2 rounded-lg text-zinc-900">
<MdAddToHomeScreen className="text-2xl" />
<p>Add to Home Screen</p>
</div>
Expand Down
56 changes: 34 additions & 22 deletions src/app/components/AddToHomeScreen/AddToMobileChromeIos.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ import { FaTimes } from 'react-icons/fa'
import { ImArrowUp } from 'react-icons/im'
import { TbShare2 } from 'react-icons/tb'

import { Smartphone } from 'lucide-react';
import { Card, CardContent } from '../ui/card';
import { BackgroundGradientAnimation } from '../ui/background-gradient-animation';

interface Props {
closePrompt: () => void;
doNotShowAgain: () => void;
Expand All @@ -14,28 +18,36 @@ export default function AddToMobileChromeIos(props: Props) {
const { closePrompt, doNotShowAgain } = props;

return (
<div className="fixed top-0 left-0 right-0 h-[70%] z-50 pt-12 px-4 text-white">
<div className="relative bg-primary p-4 h-full rounded-xl flex flex-col justify-around items-center text-center">
<ImArrowUp className="text-4xl absolute -top-[40px] right-0 text-indigo-700 z-10 animate-bounce" />
<button className="absolute top-0 right-0 p-3" onClick={closePrompt}>
<FaTimes className="text-2xl" />
</button>
<p className="text-lg">For the best experience, we recommend installing the Valley Trader app to your home screen!</p>
<div className="flex gap-2 items-center text-lg">
<p>Click the</p>
<TbShare2 className="text-4xl" />
<p>icon</p>
</div>
<div className="flex flex-col gap-2 items-center text-lg w-full px-4">
<p>Scroll down and then click:</p>
<div className="bg-zinc-800 flex items-center justify-between w-full px-8 py-2 rounded-lg">
<p>Add to Home Screen</p>
<AiOutlinePlusSquare className="text-2xl" />
</div>
<div className='relative'>
<div className='absolute -z-50 '>
<BackgroundGradientAnimation />
</div>
<Card>
<CardContent className='bg-card/30 bg-opacity-90 bg-clip-padding backdrop-blur-sm backdrop-filter'>
<div className='flex h-full flex-col items-center justify-around space-y-6 rounded-xl p-4 text-center'>
<div className='flex justify-center'>
<Smartphone className='h-20 w-20 ' strokeWidth={1} />
</div>
<p className='font-semibold leading-none tracking-tight '>
To install this app, please add it to your home screen{' '}
</p>
<div className='flex items-center gap-2 text-lg'>
<p>Click the</p>
<TbShare2 className='text-4xl' />
<p>icon</p>
</div>
<div className='flex w-full flex-col items-center gap-2 px-4 text-lg'>
<p>Scroll down and then click:</p>
<div className='flex w-full items-center justify-between rounded-lg bg-zinc-800 px-4 py-2'>
<p>Add to Home Screen</p>
<AiOutlinePlusSquare className='text-2xl' />
</div>
<button className="border-2 p-1" onClick={doNotShowAgain}>Don&apos;t show again</button>
</div>
{/* <ImArrowDown className='animate-bounce text-4xl text-slate-400' />
*/}{' '}
</div>

</div>
)
</CardContent>
</Card>
</div>
);
}
57 changes: 33 additions & 24 deletions src/app/components/AddToHomeScreen/AddToMobileFirefox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,30 +15,39 @@ export default function AddToMobileFirefox(props: Props) {
const { closePrompt, doNotShowAgain } = props;

return (
<div className="fixed bottom-0 left-0 right-0 h-[60%] z-50 pb-12 px-4 text-white">
<div className="relative bg-primary p-4 h-full rounded-xl flex flex-col justify-around items-center text-center">
<button className="absolute top-0 right-0 p-3" onClick={closePrompt}>
<FaTimes className="text-2xl" />
</button>
<p className="text-lg">For the best experience, we recommend installing the Valley Trader app to your home screen!</p>
<div className="flex gap-2 items-center text-lg">
<p>Click the</p>
<HiDotsVertical className="text-4xl" />
<p>icon</p>
</div>
<div className="flex flex-col gap-2 items-center text-lg w-full px-4">
<p>Scroll down and then click:</p>
<div className="bg-zinc-50 flex items-center justify-around w-full px-4 py-2 rounded-lg text-zinc-900">
<div className="flex gap-6 items-center">
<Image src={ffIcon} alt="Firefox install icon" width={32} height={32} />
<p>Install</p>
</div>
</div>
</div>
<button className="border-2 p-1" onClick={doNotShowAgain}>Don&apos;t show again</button>
<ImArrowDownRight className="text-4xl absolute -bottom-[50px] right-1 text-indigo-700 z-10 animate-bounce" />
<div className='fixed bottom-0 left-0 right-0 z-50 h-[60%] px-4 pb-12 text-white'>
<div className='bg-background relative flex h-full flex-col items-center justify-around rounded-xl p-4 text-center'>
<button className='absolute right-0 top-0 p-3' onClick={closePrompt}>
<FaTimes className='text-2xl' />
</button>
<p className='text-lg'>
For the best experience, we recommend installing the Valley Trader
app to your home screen!
</p>
<div className='flex items-center gap-2 text-lg'>
<p>Click the</p>
<HiDotsVertical className='text-4xl' />
<p>icon</p>
</div>
<div className='flex w-full flex-col items-center gap-2 px-4 text-lg'>
<p>Scroll down and then click:</p>
<div className='bg-background flex w-full items-center justify-around rounded-lg px-4 py-2 text-zinc-900'>
<div className='flex items-center gap-6'>
<Image
src={ffIcon}
alt='Firefox install icon'
width={32}
height={32}
/>
<p>Install</p>
</div>
</div>

</div>
<button className='border-2 p-1' onClick={doNotShowAgain}>
Don&apos;t show again
</button>
<ImArrowDownRight className='absolute -bottom-[50px] right-1 z-10 animate-bounce text-4xl text-indigo-700' />
</div>
)
</div>
);
}
62 changes: 33 additions & 29 deletions src/app/components/AddToHomeScreen/AddToMobileFirefoxIos.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,35 +14,39 @@ export default function AddToMobileFirefoxIos(props: Props) {
const { closePrompt, doNotShowAgain } = props;

return (
<div className="fixed bottom-0 left-0 right-0 h-[70%] z-50 pb-12 px-4 text-white">
<div className="relative bg-primary p-4 h-full rounded-xl flex flex-col justify-around items-center text-center">
<button className="absolute top-0 right-0 p-3" onClick={closePrompt}>
<FaTimes className="text-2xl" />
</button>
<p className="text-lg">For the best experience, we recommend installing the Valley Trader app to your home screen!</p>
<div className="flex gap-2 items-center text-lg">
<p>Click the</p>
<FaBars className="text-4xl" />
<p>icon</p>
</div>
<div className="flex flex-col gap-2 items-center text-lg w-full px-4">
<p>Scroll down and then click:</p>
<div className="bg-zinc-800 flex items-center justify-between w-full px-8 py-2 rounded-lg">
<p>Share</p>
<FiShare className="text-2xl" />
</div>
</div>
<div className="flex flex-col gap-2 items-center text-lg w-full px-4">
<p>Then click:</p>
<div className="bg-zinc-800 flex items-center justify-between w-full px-8 py-2 rounded-lg">
<p>Add to Home Screen</p>
<AiOutlinePlusSquare className="text-2xl" />
</div>
</div>
<button className="border-2 p-1" onClick={doNotShowAgain}>Don&apos;t show again</button>
<ImArrowDown className="text-4xl absolute -bottom-[50px] right-[5px] text-indigo-700 z-10 animate-bounce" />
<div className='fixed bottom-0 left-0 right-0 z-50 h-[70%] px-4 pb-12 text-white'>
<div className='bg-background relative flex h-full flex-col items-center justify-around rounded-xl p-4 text-center'>
<button className='absolute right-0 top-0 p-3' onClick={closePrompt}>
<FaTimes className='text-2xl' />
</button>
<p className='text-lg'>
For the best experience, we recommend installing the Valley Trader
app to your home screen!
</p>
<div className='flex items-center gap-2 text-lg'>
<p>Click the</p>
<FaBars className='text-4xl' />
<p>icon</p>
</div>
<div className='flex w-full flex-col items-center gap-2 px-4 text-lg'>
<p>Scroll down and then click:</p>
<div className='flex w-full items-center justify-between rounded-lg bg-zinc-800 px-8 py-2'>
<p>Share</p>
<FiShare className='text-2xl' />
</div>

</div>
<div className='flex w-full flex-col items-center gap-2 px-4 text-lg'>
<p>Then click:</p>
<div className='flex w-full items-center justify-between rounded-lg bg-zinc-800 px-8 py-2'>
<p>Add to Home Screen</p>
<AiOutlinePlusSquare className='text-2xl' />
</div>
</div>
<button className='border-2 p-1' onClick={doNotShowAgain}>
Don&apos;t show again
</button>
<ImArrowDown className='absolute -bottom-[50px] right-[5px] z-10 animate-bounce text-4xl text-indigo-700' />
</div>
)
</div>
);
}
38 changes: 24 additions & 14 deletions src/app/components/AddToHomeScreen/AddToOtherBrowser.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,29 @@ export default function AddToOtherBrowser(props: Props) {
const searchUrl = `https://www.google.com/search?q=add+to+home+screen+for+common-mobile-browsers`;

return (
<div className="fixed bottom-0 left-0 right-0 h-[60%] z-50 pb-12 px-4 text-white flex flex-col items-center justify-around">
<div className="relative bg-primary p-4 h-full rounded-xl flex flex-col justify-around items-center text-center">
<button className="absolute top-0 right-0 p-3" onClick={closePrompt}>
<FaTimes className="text-2xl" />
</button>
<p className="text-lg">For the best experience, we recommend installing the Valley Trader app to your home screen!</p>
<div className="flex flex-col gap-4 items-center text-lg">
<p>Unfortunately, we were unable to determine which browser you are using. Please search for how to install a web app for your browser.</p>
<Link className="text-blue-300" href={searchUrl} target='_blank'>Try This Search</Link>
</div>
<button className="border-2 p-1" onClick={doNotShowAgain}>Don&apos;t show again</button>
</div>

<div className='fixed bottom-0 left-0 right-0 z-50 flex h-[60%] flex-col items-center justify-around px-4 pb-12 text-white'>
<div className='bg-background relative flex h-full flex-col items-center justify-around rounded-xl p-4 text-center'>
<button className='absolute right-0 top-0 p-3' onClick={closePrompt}>
<FaTimes className='text-2xl' />
</button>
<p className='text-lg'>
For the best experience, we recommend installing the Valley Trader
app to your home screen!
</p>
<div className='flex flex-col items-center gap-4 text-lg'>
<p>
Unfortunately, we were unable to determine which browser you are
using. Please search for how to install a web app for your
browser.
</p>
<Link className='text-blue-300' href={searchUrl} target='_blank'>
Try This Search
</Link>
</div>
<button className='border-2 p-1' onClick={doNotShowAgain}>
Don&apos;t show again
</button>
</div>
)
</div>
);
}
Loading

0 comments on commit 973c6f2

Please sign in to comment.