Skip to content

Commit

Permalink
Invite Page creation and sign in/landing page updated (freeCodeCamp#26)
Browse files Browse the repository at this point in the history 
* removing not used variable

* This one actually adds TailwindCSS

* Added rerouting to sign in button and made a component that takes in classrooms from db

* adding styling to invite page

* adding copy to clipboard functionality

* adding drop down menu and clickable button

* Change Invite page to Classes

* Added sample env file back, Fixed package.json merge conflicts, and deleted some unnecessary comments

* Deleted package-lock.json

* Adding package-lock.json back (used npm install to create it)

Co-authored-by: egall18 <[email protected]>
  • Loading branch information
@EPeralta18 @egall18
EPeralta18 and egall18 authored Apr 15, 2022
1 parent 65cf6ec commit 39ae1ec
Show file tree
Hide file tree
Showing 14 changed files with 1,627 additions and 304 deletions.
3 changes: 2 additions & 1 deletion .env.sample
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@

DATABASE_URL="postgresql://postgres:password@localhost:5432/classroom"

# Enter credentials from GitHub OAuth App
GITHUB_ID=
GITHUB_SECRET=
GITHUB_SECRET=
149 changes: 149 additions & 0 deletions components/ClassInviteTable.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
import React, { useState } from 'react';

export default function ClassInviteTable({ classes }) {
const [showOptions, setShowOptions] = useState(false);
const handleClick = () => {
setShowOptions(!showOptions);
};
return (
<>
<div className='p-7'>
<div
href='#'
className='group block max-w-xl mx-auto p-6 bg-[#d0d0d5] border-2 border-[#0a0a23] ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-[#0a0a23] hover:ring-sky-500'
>
<div className='group flex items-center'>
<h2 className='text-slate-900 group-hover:text-white text-l font-semibold'>
Classroom: {classes.classroomName}
</h2>

{/* <-------Menu Item Selection -----> */}
<div className='group ml-auto flex items-center'>
<div className='relative inline-block text-right'>
<div>
<button
onClick={handleClick}
type='button'
className='inline-flex justify-center w-full rounded-md border border-gray-300 shadow-xl px-2 py-1 bg-white text-sm font-medium text-gray-700 hover:bg-[#ffbf00] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500'
id='menu-button'
aria-expanded='true'
aria-haspopup='true'
>
<svg
xmlns='http://www.w3.org/2000/svg'
className='h-4 w-4'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
strokeWidth='2'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
d='M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z'
/>
</svg>
</button>
</div>
{showOptions && (
<div
className='flex-row origin-top-right absolute -right-20 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none'
role='menu'
aria-orientation='vertical'
aria-labelledby='menu-button'
tabIndex='-1'
>
<div clasclassNames='py-1' role='none'>
<a
href='#'
className='group flex items-center text-gray-700 block px-4 py-2 text-sm hover:bg-gray-300'
role='menuitem'
tabIndex='-1'
id='menu-item-0'
>
<svg
xmlns='http://www.w3.org/2000/svg'
className='h-6 w-6'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
strokeWidth='2'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
d='M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z'
/>
</svg>
<span className='group flex pl-5 items-center'>
Edit
</span>
</a>
</div>
<div clasclassNames='py-1' role='none'>
<a
href='#'
className='group flex items-center text-gray-700 block px-4 py-2 text-sm hover:bg-gray-300'
role='menuitem'
tabIndex='-1'
id='menu-item-1'
>
<svg
xmlns='http://www.w3.org/2000/svg'
className='h-6 w-6'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
strokeWidth='2'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
d='M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3'
/>
</svg>
<span className='group flex pl-5 items-center'>
Invite
</span>
</a>
</div>
<div className='py-1' role='none'>
<a
href='#'
className='group flex items-center text-gray-700 block px-4 py-2 text-sm hover:bg-gray-300'
role='menuitem'
tabIndex='-1'
id='menu-item-2'
>
<svg
xmlns='http://www.w3.org/2000/svg'
className='h-6 w-6'
fill='none'
viewBox='0 0 24 24'
stroke='currentColor'
strokeWidth='2'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16'
/>
</svg>
<div className='group flex pl-5 items-center'>
Delete
</div>
</a>
</div>
</div>
)}
</div>
</div>
</div>
<button className='border-2 border-[#d0d0d5] bg-[#0a0a23] text-white font-bold py-2 px-4 rounded'>
View Class
</button>
</div>
</div>
</>
);
}
24 changes: 24 additions & 0 deletions components/Login.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
.cta_button {
border: 2px solid black;
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
}
.cta_button:hover {
background-color: #0a0a23; /* Green */
color: #ffffff;
}
.container {
height: 200px;
position: relative;
border: 3px solid green;
}

.box {
display: grid;
padding: 10px;
align-items: center;
justify-content: center;
}
24 changes: 19 additions & 5 deletions components/auth-button.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,34 @@
import { useSession, signIn, signOut } from 'next-auth/react';
import loginStyles from './Login.module.css';

export default function AuthButton() {
const { data: session } = useSession();
if (session) {
return (
<>
Signed in as {session.user.email} <br />{' '}
<img src={session.user.image} witdth='250' height="250'"></img>
<button onClick={() => signOut()}>Sign out</button>
<div className={loginStyles.box}>
Signed in as {session.user.email} <br />{' '}
<button onClick={() => signOut()} className={loginStyles.cta_button}>
Sign out
</button>
</div>
</>
);
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
<div>
<div className={loginStyles.box}>
<button
onClick={() =>
signIn(null, { callbackUrl: 'http://localhost:3000/classes' })
}
className={loginStyles.cta_button}
>
Sign In
</button>
</div>
</div>
</>
);
}
Loading

0 comments on commit 39ae1ec

Please sign in to comment.