mirror of
https://github.com/fergalmoran/opengifame.git
synced 2025-12-22 09:38:44 +00:00
New navbar
This commit is contained in:
Fergal Moran
@@ -3,10 +3,12 @@ import LoginButton from './widgets/login/LoginButton';
|
||||
import TaggedInput from './widgets/TaggedInput';
|
||||
import ImageUpload from './widgets/ImageUpload';
|
||||
import SharingComponent from './widgets/SharingComponent';
|
||||
import UserNavDropdown from './widgets/UserNavDropdown';
|
||||
export {
|
||||
GifContainer,
|
||||
LoginButton,
|
||||
TaggedInput,
|
||||
ImageUpload,
|
||||
SharingComponent,
|
||||
UserNavDropdown,
|
||||
};
|
||||
|
||||
@@ -1,69 +1,297 @@
|
||||
import React from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
|
||||
import { BellIcon, AcademicCapIcon, XIcon } from '@heroicons/react/24/outline';
|
||||
import Image from 'next/image';
|
||||
import { LoginButton } from '@components';
|
||||
import { useSession } from 'next-auth/react';
|
||||
import { Disclosure, Menu, Transition } from '@headlessui/react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
function classNames(...classes) {
|
||||
return classes.filter(Boolean).join(' ');
|
||||
}
|
||||
const Navbar = () => {
|
||||
const { data: session } = useSession();
|
||||
const router = useRouter();
|
||||
const currentRoute = router.pathname;
|
||||
return (
|
||||
<div className="navbar bg-accent/50">
|
||||
<div className="navbar-start">
|
||||
<div className="dropdown">
|
||||
<label
|
||||
tabIndex={0}
|
||||
className="btn btn-ghost lg:hidden"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M4 6h16M4 12h8m-8 6h16"
|
||||
/>
|
||||
</svg>
|
||||
</label>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className="p-2 mt-3 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52"
|
||||
>
|
||||
<li>
|
||||
<a href="upload">Upload</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="request">Request</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Link href="/">
|
||||
<a className="text-xl normal-case btn btn-ghost">Open Gifame</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="hidden lg:flex">
|
||||
<div className="form-control">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
className="input input-bordered"
|
||||
/>
|
||||
</div>
|
||||
<ul className="p-0 menu menu-horizontal">
|
||||
<li>
|
||||
<a href="upload">Upload</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="request">Request</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="navbar-end">
|
||||
<LoginButton />
|
||||
</div>
|
||||
</div>
|
||||
<Disclosure
|
||||
as="nav"
|
||||
className="bg-gray-800"
|
||||
>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<div className="px-2 mx-auto max-w-7xl sm:px-4 lg:px-8">
|
||||
<div className="relative flex items-center justify-between h-16">
|
||||
<div className="flex items-center px-2 lg:px-0">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="block w-auto h-8 lg:hidden">
|
||||
<Link href="/">
|
||||
<a>
|
||||
<Image
|
||||
width={32}
|
||||
height={32}
|
||||
src="/img/icon.svg"
|
||||
alt="Workflow"
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="hidden w-auto h-8 lg:block">
|
||||
<Link href="/">
|
||||
<a>
|
||||
<Image
|
||||
width={32}
|
||||
height={32}
|
||||
src="/img/icon.svg"
|
||||
alt="Workflow"
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:block lg:ml-6">
|
||||
<div className="flex space-x-4">
|
||||
<Link href="/upload">
|
||||
<a
|
||||
className={
|
||||
currentRoute === '/upload'
|
||||
? 'px-3 py-2 text-sm font-medium bg-accent rounded-md'
|
||||
: 'px-3 py-2 text-sm font-medium rounded-md hover:bg-accent/20'
|
||||
}
|
||||
>
|
||||
Upload
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/request">
|
||||
<a
|
||||
className={
|
||||
currentRoute === '/request'
|
||||
? 'px-3 py-2 text-sm font-medium bg-accent rounded-md'
|
||||
: 'px-3 py-2 text-sm font-medium rounded-md hover:bg-accent/20 '
|
||||
}
|
||||
>
|
||||
Request
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center flex-1 px-2 lg:ml-6 lg:justify-end">
|
||||
<div className="w-full max-w-lg lg:max-w-xs">
|
||||
<label
|
||||
htmlFor="search"
|
||||
className="sr-only"
|
||||
>
|
||||
Search
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<MagnifyingGlassIcon
|
||||
className="w-5 h-5 text-gray-400"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
id="search"
|
||||
name="search"
|
||||
className="block w-full py-2 pl-10 pr-3 leading-5 text-gray-300 placeholder-gray-400 bg-gray-700 border border-transparent rounded-md focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-gray-900 sm:text-sm"
|
||||
placeholder="Search"
|
||||
type="search"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex lg:hidden">
|
||||
{/* Mobile menu button */}
|
||||
<Disclosure.Button className="inline-flex items-center justify-center p-2 text-gray-400 rounded-md hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
|
||||
<span className="sr-only">Open main menu</span>
|
||||
{open ? (
|
||||
<XIcon
|
||||
className="block w-6 h-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : (
|
||||
<AcademicCapIcon
|
||||
className="block w-6 h-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
<div className="hidden lg:block lg:ml-4">
|
||||
<div className="flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="flex-shrink-0 p-1 text-gray-400 bg-gray-800 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
|
||||
>
|
||||
<span className="sr-only">View notifications</span>
|
||||
<BellIcon
|
||||
className="w-6 h-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Profile dropdown */}
|
||||
<Menu
|
||||
as="div"
|
||||
className="relative flex-shrink-0 ml-4"
|
||||
>
|
||||
<div>
|
||||
<Menu.Button className="flex text-sm text-white bg-gray-800 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||
<span className="sr-only">Open user menu</span>
|
||||
<img
|
||||
className="w-8 h-8 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</Menu.Button>
|
||||
</div>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-0 w-48 py-1 mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
active ? 'bg-gray-100' : '',
|
||||
'block px-4 py-2 text-sm text-gray-700'
|
||||
)}
|
||||
>
|
||||
Your Profile
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
active ? 'bg-gray-100' : '',
|
||||
'block px-4 py-2 text-sm text-gray-700'
|
||||
)}
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<a
|
||||
href="#"
|
||||
className={classNames(
|
||||
active ? 'bg-gray-100' : '',
|
||||
'block px-4 py-2 text-sm text-gray-700'
|
||||
)}
|
||||
>
|
||||
Sign out
|
||||
</a>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Disclosure.Panel className="lg:hidden">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1">
|
||||
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
|
||||
<Disclosure.Button
|
||||
as="a"
|
||||
href="#"
|
||||
className="block px-3 py-2 text-base font-medium text-white bg-gray-900 rounded-md"
|
||||
>
|
||||
Dashboard
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Button
|
||||
as="a"
|
||||
href="#"
|
||||
className="block px-3 py-2 text-base font-medium text-gray-300 rounded-md hover:bg-gray-700 hover:text-white"
|
||||
>
|
||||
Team
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Button
|
||||
as="a"
|
||||
href="#"
|
||||
className="block px-3 py-2 text-base font-medium text-gray-300 rounded-md hover:bg-gray-700 hover:text-white"
|
||||
>
|
||||
Projects
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Button
|
||||
as="a"
|
||||
href="#"
|
||||
className="block px-3 py-2 text-base font-medium text-gray-300 rounded-md hover:bg-gray-700 hover:text-white"
|
||||
>
|
||||
Calendar
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
<div className="pt-4 pb-3 border-t border-gray-700">
|
||||
<div className="flex items-center px-5">
|
||||
<div className="flex-shrink-0">
|
||||
<img
|
||||
className="w-10 h-10 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<div className="text-base font-medium text-white">
|
||||
Tom Cook
|
||||
</div>
|
||||
<div className="text-sm font-medium text-gray-400">
|
||||
tom@example.com
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="flex-shrink-0 p-1 ml-auto text-gray-400 bg-gray-800 rounded-full hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
|
||||
>
|
||||
<span className="sr-only">View notifications</span>
|
||||
<BellIcon
|
||||
className="w-6 h-6"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="px-2 mt-3 space-y-1">
|
||||
<Disclosure.Button
|
||||
as="a"
|
||||
href="#"
|
||||
className="block px-3 py-2 text-base font-medium text-gray-400 rounded-md hover:text-white hover:bg-gray-700"
|
||||
>
|
||||
Your Profile
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Button
|
||||
as="a"
|
||||
href="#"
|
||||
className="block px-3 py-2 text-base font-medium text-gray-400 rounded-md hover:text-white hover:bg-gray-700"
|
||||
>
|
||||
Settings
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Button
|
||||
as="a"
|
||||
href="#"
|
||||
className="block px-3 py-2 text-base font-medium text-gray-400 rounded-md hover:text-white hover:bg-gray-700"
|
||||
>
|
||||
Sign out
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
43
components/widgets/UserNavDropdown.tsx
Normal file
43
components/widgets/UserNavDropdown.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { logger } from '@lib/logger';
|
||||
import React from 'react';
|
||||
import { UserCircleIcon } from '@heroicons/react/24/solid';
|
||||
import { signOut } from 'next-auth/react';
|
||||
|
||||
interface IUserNavDropdownProps {
|
||||
session: any;
|
||||
}
|
||||
const UserNavDropdown: React.FC<IUserNavDropdownProps> = ({ session }) => {
|
||||
React.useEffect(() => {
|
||||
logger.debug('UserNavDropdown', 'session', session);
|
||||
}, [session]);
|
||||
|
||||
return (
|
||||
<div className="dropdown dropdown-end">
|
||||
<label
|
||||
tabIndex={0}
|
||||
className="btn btn-ghost btn-circle avatar"
|
||||
>
|
||||
<div className="w-10 rounded-full">
|
||||
{session?.user?.image ? (
|
||||
<img src={session?.user?.image} />
|
||||
) : (
|
||||
<UserCircleIcon />
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
<ul
|
||||
tabIndex={0}
|
||||
className="p-2 mt-3 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52"
|
||||
>
|
||||
<li>
|
||||
<a>Profile</a>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={() => signOut()}>Logout</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserNavDropdown;
|
||||
@@ -1,21 +1,18 @@
|
||||
import React from 'react';
|
||||
import { useSession, signIn, signOut } from 'next-auth/react';
|
||||
import { signIn } from 'next-auth/react';
|
||||
import {
|
||||
ArrowLeftCircleIcon,
|
||||
ArrowRightCircleIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { UserNavDropdown } from '@components';
|
||||
|
||||
const LoginButton = () => {
|
||||
const { data: session } = useSession();
|
||||
interface ILoginButtonProps {
|
||||
session: any;
|
||||
}
|
||||
|
||||
const LoginButton: React.FC<ILoginButtonProps> = ({ session }) => {
|
||||
return session ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => signOut()}
|
||||
className="btn"
|
||||
>
|
||||
<ArrowLeftCircleIcon className="w-5 h-5" />
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
<UserNavDropdown session={session} />
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
"start:prod:migrate": "prisma migrate deploy && yarn start:prod"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.7.3",
|
||||
"@types/mime-types": "^2.1.1",
|
||||
"mime-types": "^2.1.35"
|
||||
},
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import NextAuth, { NextAuthOptions } from 'next-auth';
|
||||
import { PrismaAdapter } from '@next-auth/prisma-adapter';
|
||||
import CredentialsProvider from 'next-auth/providers/credentials';
|
||||
import GitHubProvider from 'next-auth/providers/github';
|
||||
import prisma from '@lib/prismadb';
|
||||
import { confirmPassword, hashPassword } from '@lib/crypt';
|
||||
import { confirmPassword } from '@lib/crypt';
|
||||
import { omit } from 'lodash';
|
||||
type Credentials = {
|
||||
email: string;
|
||||
@@ -23,6 +24,10 @@ export const authOptions: NextAuthOptions = {
|
||||
},
|
||||
secret: process.env.SECRET_KEY,
|
||||
providers: [
|
||||
GitHubProvider({
|
||||
clientId: process.env.GITHUB_ID as string,
|
||||
clientSecret: process.env.GITHUB_SECRET as string,
|
||||
}),
|
||||
CredentialsProvider({
|
||||
type: 'credentials',
|
||||
credentials: {
|
||||
@@ -54,13 +59,13 @@ export const authOptions: NextAuthOptions = {
|
||||
},
|
||||
}),
|
||||
],
|
||||
pages: {
|
||||
signIn: '/auth/signin',
|
||||
signOut: '/auth/signout',
|
||||
error: '/auth/error', // Error code passed in query string as ?error=
|
||||
verifyRequest: '/auth/verify-request', // (used for check email message)
|
||||
newUser: '/auth/new-user', // New users will be directed here on first sign in (leave the property out if not of interest)
|
||||
},
|
||||
// pages: {
|
||||
// signIn: '/auth/signin',
|
||||
// signOut: '/auth/signout',
|
||||
// error: '/auth/error', // Error code passed in query string as ?error=
|
||||
// verifyRequest: '/auth/verify-request', // (used for check email message)
|
||||
// newUser: '/auth/new-user', // New users will be directed here on first sign in (leave the property out if not of interest)
|
||||
// },
|
||||
};
|
||||
|
||||
export default NextAuth(authOptions);
|
||||
|
||||
@@ -3,6 +3,8 @@ import React, { FormEventHandler } from 'react';
|
||||
import Router from 'next/router';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { logger } from '@lib/logger';
|
||||
import { debug } from 'console';
|
||||
const SigninPage = () => {
|
||||
const [userInfo, setUserInfo] = React.useState({
|
||||
email: 'fergal.moran+frasiergifs@gmail.com',
|
||||
@@ -22,6 +24,11 @@ const SigninPage = () => {
|
||||
console.log('signin', 'handleSubmit', res);
|
||||
};
|
||||
|
||||
const handleProviderAuth = async (provider: string) => {
|
||||
const res = await signIn(provider);
|
||||
debugger;
|
||||
logger.debug(res);
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-col justify-center min-h-full py-1 sm:px-6 lg:px-8">
|
||||
<div className="sm:mx-auto sm:w-full sm:max-w-md">
|
||||
@@ -29,7 +36,7 @@ const SigninPage = () => {
|
||||
Sign in to your account
|
||||
</h2>
|
||||
<p className="mt-2 text-sm text-center ">
|
||||
Or{' '}
|
||||
Or
|
||||
<Link href="/auth/signup">
|
||||
<a className="font-medium ">create a new account</a>
|
||||
</Link>
|
||||
@@ -48,8 +55,7 @@ const SigninPage = () => {
|
||||
htmlFor="email"
|
||||
className="block text-sm font-medium "
|
||||
>
|
||||
{' '}
|
||||
Email address{' '}
|
||||
Email address
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
@@ -71,8 +77,7 @@ const SigninPage = () => {
|
||||
htmlFor="password"
|
||||
className="block text-sm font-medium "
|
||||
>
|
||||
{' '}
|
||||
Password{' '}
|
||||
Password
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
@@ -101,8 +106,7 @@ const SigninPage = () => {
|
||||
htmlFor="remember-me"
|
||||
className="block ml-2 text-sm text-accent"
|
||||
>
|
||||
{' '}
|
||||
Remember me{' '}
|
||||
Remember me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -111,8 +115,7 @@ const SigninPage = () => {
|
||||
href="#"
|
||||
className="font-medium text-primary hover:text-primary/50"
|
||||
>
|
||||
{' '}
|
||||
Forgot your password?{' '}
|
||||
Forgot your password?
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -132,9 +135,9 @@ const SigninPage = () => {
|
||||
|
||||
<div className="grid grid-cols-3 gap-3 mt-6">
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50"
|
||||
<button
|
||||
onClick={() => handleProviderAuth('Github')}
|
||||
className="inline-flex justify-center w-full px-2 py-1 btn btn-outline "
|
||||
>
|
||||
<span className="sr-only">Sign in with Facebook</span>
|
||||
<svg
|
||||
@@ -149,13 +152,13 @@ const SigninPage = () => {
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50"
|
||||
<button
|
||||
onClick={() => handleProviderAuth('Github')}
|
||||
className="inline-flex justify-center w-full px-2 py-1 btn btn-outline "
|
||||
>
|
||||
<span className="sr-only">Sign in with Twitter</span>
|
||||
<svg
|
||||
@@ -166,13 +169,13 @@ const SigninPage = () => {
|
||||
>
|
||||
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
|
||||
</svg>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="#"
|
||||
className="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50"
|
||||
<button
|
||||
onClick={() => handleProviderAuth('Github')}
|
||||
className="inline-flex justify-center w-full px-2 py-1 btn btn-outline "
|
||||
>
|
||||
<span className="sr-only">Sign in with GitHub</span>
|
||||
<svg
|
||||
@@ -187,7 +190,7 @@ const SigninPage = () => {
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { signIn } from 'next-auth/react';
|
||||
import React, { FormEventHandler } from 'react';
|
||||
import Router, { useRouter } from 'next/router';
|
||||
import { useRouter } from 'next/router';
|
||||
import { logger } from '@lib/logger';
|
||||
|
||||
const SignUpPage = () => {
|
||||
|
||||
25
pages/request.tsx
Normal file
25
pages/request.tsx
Normal file
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
|
||||
const RequestPage = () => {
|
||||
return (
|
||||
<div className="relative px-4 sm:px-6 lg:px-8">
|
||||
<div className="mx-auto text-lg max-w-prose">
|
||||
<h1>
|
||||
<span className="block text-base font-semibold tracking-wide text-center uppercase">
|
||||
Work in progress
|
||||
</span>
|
||||
<span className="block mt-2 text-3xl font-extrabold leading-8 tracking-tight text-center sm:text-4xl">
|
||||
Request a gif
|
||||
</span>
|
||||
</h1>
|
||||
<p className="mt-8 text-xl leading-8">
|
||||
Here you can allow your users to request a gif, if you have the TV
|
||||
Show module enabled you can allow Season/Episode/Timestamp/Duration
|
||||
type stuff
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RequestPage;
|
||||
@@ -0,0 +1,5 @@
|
||||
-- AlterTable
|
||||
ALTER TABLE "User" ADD COLUMN "emailVerified" TIMESTAMP(3),
|
||||
ADD COLUMN "image" TEXT,
|
||||
ADD COLUMN "name" TEXT,
|
||||
ALTER COLUMN "email" DROP NOT NULL;
|
||||
@@ -0,0 +1,2 @@
|
||||
-- AlterTable
|
||||
ALTER TABLE "User" ALTER COLUMN "password" DROP NOT NULL;
|
||||
@@ -40,13 +40,16 @@ model Session {
|
||||
}
|
||||
|
||||
model User {
|
||||
id String @id @default(cuid())
|
||||
email String @unique
|
||||
password String
|
||||
accounts Account[]
|
||||
sessions Session[]
|
||||
Tags Tags[]
|
||||
Gif Gif[]
|
||||
id String @id @default(cuid())
|
||||
password String?
|
||||
name String?
|
||||
email String? @unique
|
||||
emailVerified DateTime?
|
||||
image String?
|
||||
accounts Account[]
|
||||
sessions Session[]
|
||||
Tags Tags[]
|
||||
Gif Gif[]
|
||||
}
|
||||
|
||||
model VerificationToken {
|
||||
|
||||
55
public/img/icon.svg
Normal file
55
public/img/icon.svg
Normal file
@@ -0,0 +1,55 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
|
||||
<g>
|
||||
<path style="fill:#FBB346;" d="M273.357,385.122c0-202.505,225.648,0,225.648,0S273.357,587.626,273.357,385.122z"/>
|
||||
<path style="fill:#FBB346;" d="M12.994,385.122c0,0,225.648-202.505,225.648,0S12.994,385.122,12.994,385.122z"/>
|
||||
</g>
|
||||
<path style="fill:#FFD248;" d="M255.999,41.188c0,0,202.505,225.648,0,225.648S255.999,41.188,255.999,41.188z"/>
|
||||
<path d="M255.999,275.514c-49.985,0-81.409-13.622-93.397-40.488c-13.002-29.14-2.003-71.908,32.689-127.115
|
||||
c25.016-39.808,53.067-71.203,54.249-72.52l6.459-7.198l6.459,7.198c1.181,1.317,29.234,32.712,54.249,72.52
|
||||
c34.692,55.207,45.691,97.975,32.689,127.115C337.409,261.892,305.986,275.514,255.999,275.514z M256.002,54.391
|
||||
c-33.418,39.315-97.514,128.835-77.547,173.566c8.945,20.039,35.034,30.199,77.544,30.199c42.512,0,68.603-10.162,77.547-30.204
|
||||
C353.522,183.185,289.424,93.693,256.002,54.391z"/>
|
||||
<path d="M331.875,483.807c-9.892,0-18.801-1.76-26.707-5.289c-26.866-11.988-40.488-43.411-40.488-93.396
|
||||
s13.622-81.409,40.488-93.396c29.141-13.001,71.908-2.003,127.115,32.689c39.809,25.016,71.203,53.068,72.521,54.249l7.198,6.459
|
||||
l-7.198,6.459c-1.318,1.181-32.712,29.234-72.521,54.249C392.056,471.109,358.432,483.807,331.875,483.807z M331.802,303.8
|
||||
c-7.146,0-13.734,1.175-19.567,3.778c-20.039,8.945-30.2,35.034-30.2,77.543c0,42.512,10.162,68.603,30.204,77.545
|
||||
c5.838,2.605,12.438,3.78,19.586,3.78c47.668,0.002,119.797-52.26,153.975-81.325C451.612,356.064,379.454,303.8,331.802,303.8z"/>
|
||||
<path d="M180.125,483.807c-26.558,0-60.177-12.698-100.408-37.977c-39.809-25.016-71.203-53.068-72.521-54.249L0,385.122
|
||||
l7.198-6.459c1.318-1.181,32.712-29.234,72.521-54.249c55.207-34.694,97.978-45.692,127.115-32.689
|
||||
c26.866,11.988,40.488,43.411,40.488,93.396s-13.622,81.409-40.488,93.396C198.927,482.046,190.013,483.807,180.125,483.807z
|
||||
M26.199,385.12c34.189,29.06,106.346,81.32,153.998,81.322c7.146,0,13.734-1.175,19.567-3.778
|
||||
c20.039-8.945,30.2-35.034,30.2-77.543c0-42.512-10.162-68.603-30.204-77.545C154.989,287.601,65.5,351.697,26.199,385.12z"/>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -42,6 +42,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
|
||||
integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
|
||||
|
||||
"@headlessui/react@^1.7.3":
|
||||
version "1.7.3"
|
||||
resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.3.tgz#853c598ff47b37cdd192c5cbee890d9b610c3ec0"
|
||||
integrity sha512-LGp06SrGv7BMaIQlTs8s2G06moqkI0cb0b8stgq7KZ3xcHdH3qMP+cRyV7qe5x4XEW/IGY48BW4fLesD6NQLng==
|
||||
|
||||
"@heroicons/react@^2.0.12":
|
||||
version "2.0.12"
|
||||
resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.12.tgz#7e5a16c82512f89a30266dd36f8b8465b3e3e216"
|
||||
|
||||
Reference in New Issue
Block a user