mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-18 20:09:25 +00:00
feat: email invites frontend
This commit is contained in:
swve
parent
79ddfb1ce1
commit
a6e81cb122
7 changed files with 168 additions and 11 deletions
|
|
@ -14,7 +14,8 @@
|
|||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode",
|
||||
"ms-python.isort",
|
||||
"redhat.vscode-yaml"
|
||||
"redhat.vscode-yaml",
|
||||
"bradlc.vscode-tailwindcss"
|
||||
],
|
||||
"settings": {
|
||||
"[python]": {
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
from pydantic import EmailStr
|
||||
import resend
|
||||
from config.config import get_learnhouse_config
|
||||
|
||||
def send_email(to: str, subject: str, body: str):
|
||||
|
||||
def send_email(to: EmailStr, subject: str, body: str):
|
||||
lh_config = get_learnhouse_config()
|
||||
params = {
|
||||
"from": f"LearnHouse <"
|
||||
+ lh_config.mailing_config.system_email_address
|
||||
+ ">",
|
||||
"from": "LearnHouse <" + lh_config.mailing_config.system_email_address + ">",
|
||||
"to": [to],
|
||||
"subject": subject,
|
||||
"html": body,
|
||||
}
|
||||
|
||||
|
||||
resend.api_key = lh_config.mailing_config.resend_api_key
|
||||
email = resend.Emails.send(params)
|
||||
|
||||
return email
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { useSession } from '@components/Contexts/SessionContext'
|
|||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import OrgUsers from '@components/Dashboard/Users/OrgUsers/OrgUsers'
|
||||
import OrgAccess from '@components/Dashboard/Users/OrgAccess/OrgAccess'
|
||||
import OrgUsersAdd from '@components/Dashboard/Users/OrgUsersAdd/OrgUsersAdd'
|
||||
|
||||
export type SettingsParams = {
|
||||
subpage: string
|
||||
|
|
@ -120,6 +121,7 @@ function UsersSettingsPage({ params }: { params: SettingsParams }) {
|
|||
>
|
||||
{params.subpage == 'users' ? <OrgUsers /> : ''}
|
||||
{params.subpage == 'signups' ? <OrgAccess /> : ''}
|
||||
{params.subpage == 'add' ? <OrgUsersAdd /> : ''}
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -216,13 +216,14 @@ function OrgAccess() {
|
|||
</tbody>
|
||||
</>
|
||||
</table>
|
||||
<button
|
||||
<div className='flex flex-row-reverse mt-3 mr-2'><button
|
||||
onClick={() => createInvite()}
|
||||
className="mt-3 mr-2 flex space-x-2 hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-sm text-green-100"
|
||||
className=" flex space-x-2 hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-sm text-green-100"
|
||||
>
|
||||
<Shield className="w-4 h-4" />
|
||||
<span> Create invite code</span>
|
||||
</button>
|
||||
<span> Generate invite code</span>
|
||||
</button></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
140
apps/web/components/Dashboard/Users/OrgUsersAdd/OrgUsersAdd.tsx
Normal file
140
apps/web/components/Dashboard/Users/OrgUsersAdd/OrgUsersAdd.tsx
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import PageLoading from '@components/Objects/Loaders/PageLoading'
|
||||
import Toast from '@components/StyledElements/Toast/Toast'
|
||||
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
|
||||
import { getAPIUrl } from '@services/config/config'
|
||||
import { inviteBatchUsers } from '@services/organizations/invites'
|
||||
import { swrFetcher } from '@services/utils/ts/requests'
|
||||
import { Info, Shield, UserPlus } from 'lucide-react'
|
||||
import React, { useEffect } from 'react'
|
||||
import toast from 'react-hot-toast'
|
||||
import useSWR, { mutate } from 'swr'
|
||||
|
||||
function OrgUsersAdd() {
|
||||
const org = useOrg() as any
|
||||
const [isLoading, setIsLoading] = React.useState(false)
|
||||
const [invitedUsers, setInvitedUsers] = React.useState('');
|
||||
const [selectedInviteCode, setSelectedInviteCode] = React.useState('');
|
||||
|
||||
async function sendInvites() {
|
||||
setIsLoading(true)
|
||||
let res = await inviteBatchUsers(org.id, invitedUsers, selectedInviteCode)
|
||||
if (res.status == 200) {
|
||||
mutate(`${getAPIUrl()}orgs/${org?.id}/invites/users`)
|
||||
setIsLoading(false)
|
||||
} else {
|
||||
toast.error('Error ' + res.status + ': ' + res.data.detail)
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const { data: invites } = useSWR(
|
||||
org ? `${getAPIUrl()}orgs/${org?.id}/invites` : null,
|
||||
swrFetcher
|
||||
)
|
||||
const { data: invited_users } = useSWR(
|
||||
org ? `${getAPIUrl()}orgs/${org?.id}/invites/users` : null,
|
||||
swrFetcher
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (invites) {
|
||||
setSelectedInviteCode(invites?.[0]?.invite_code_uuid)
|
||||
}
|
||||
console.log('dev,',selectedInviteCode)
|
||||
}
|
||||
, [invites, invited_users])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toast></Toast>
|
||||
{!isLoading ? (
|
||||
<>
|
||||
<div className="h-6"></div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4 anit ">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3 ">
|
||||
<h1 className="font-bold text-xl text-gray-800">Invite users to your Organization</h1>
|
||||
<h2 className="text-gray-500 text-md">
|
||||
{' '}
|
||||
Send invite via email, separated by comma{' '}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="flex space-x-2 mx-auto">
|
||||
<textarea
|
||||
onChange={(e) => setInvitedUsers(e.target.value)}
|
||||
className='w-full h-[200px] rounded-md border px-3 py-2 bg-gray-100/40 placeholder:italic placeholder:text-slate-300' placeholder='Example : spike.spiegel@bepop.space, michael.scott@dundermifflin.com' name="" id="" ></textarea>
|
||||
</div>
|
||||
<div className="flex space-x-2 mx-auto my-5 ml-2 items-center space-x-4 justify-between">
|
||||
|
||||
<div className='flex space-x-2 items-center'>
|
||||
<p className='flex items-center'>Invite Code </p>
|
||||
<select
|
||||
onChange={(e) => setSelectedInviteCode(e.target.value)}
|
||||
defaultValue={selectedInviteCode}
|
||||
className='text-gray-400 border rounded-md px-3 py-1' name="" id="">
|
||||
{invites?.map((invite: any) => (
|
||||
<option key={invite.invite_code_uuid} value={invite.invite_code_uuid}>{invite.invite_code}</option>
|
||||
))}
|
||||
</select>
|
||||
<ToolTip content={'Use one of the invite codes that you generated from the signup access page'} sideOffset={8} side="right"><Info className='text-gray-400' size={14} /></ToolTip>
|
||||
</div>
|
||||
<div className='flex flex-row-reverse '>
|
||||
<button
|
||||
onClick={sendInvites}
|
||||
className="flex space-x-2 hover:cursor-pointer p-1 px-3 bg-green-700 rounded-md font-bold items-center text-sm text-green-100"
|
||||
>
|
||||
<UserPlus className="w-4 h-4" />
|
||||
<span>Send invites via email</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mt-3 mb-3 ">
|
||||
<h1 className="font-bold text-xl text-gray-800">
|
||||
Invited Users
|
||||
</h1>
|
||||
<h2 className="text-gray-500 text-md">
|
||||
{' '}
|
||||
Users who have been invited to join your organization{' '}
|
||||
</h2>
|
||||
</div>
|
||||
<table className="table-auto w-full text-left whitespace-nowrap rounded-md overflow-hidden">
|
||||
<thead className="bg-gray-100 text-gray-500 rounded-xl uppercase">
|
||||
<tr className="font-bolder text-sm">
|
||||
<th className="py-3 px-4">Email</th>
|
||||
<th className="py-3 px-4">Signup Status</th>
|
||||
<th className="py-3 px-4">Email sent</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<>
|
||||
<tbody className="mt-5 bg-white rounded-md">
|
||||
{invited_users?.map((invited_user: any) => (
|
||||
<tr
|
||||
key={invited_user.email}
|
||||
className="border-b border-gray-100 text-sm"
|
||||
>
|
||||
<td className="py-3 px-4">{invited_user.email}</td>
|
||||
<td className="py-3 px-4">{invited_user.pending ? <div className='bg-orange-400 text-orange-100 w-fit px-2 py1 rounded-md'>Pending</div> : <div className='bg-green-400 text-green-100 w-fit px-2 py1 rounded-md'>Signed</div>}</td>
|
||||
<td className="py-3 px-4">{invited_user.email_sent ? <div className='bg-green-600 text-green-100 w-fit px-2 py1 rounded-md'>Sent</div> : <div className='bg-red-400 text-red-100 w-fit px-2 py1 rounded-md'>No</div>}</td>
|
||||
|
||||
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<PageLoading />
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default OrgUsersAdd
|
||||
|
|
@ -42,3 +42,16 @@ export async function validateInviteCode(org_id: any, invite_code: string) {
|
|||
const res = await getResponseMetadata(result)
|
||||
return res
|
||||
}
|
||||
|
||||
export async function inviteBatchUsers(
|
||||
org_id: any,
|
||||
emails: string,
|
||||
invite_code_uuid: string
|
||||
) {
|
||||
const result = await fetch(
|
||||
`${getAPIUrl()}orgs/${org_id}/invites/users/batch?emails=${emails}&invite_code_uuid=${invite_code_uuid}`,
|
||||
RequestBody('POST', null, null)
|
||||
)
|
||||
const res = await getResponseMetadata(result)
|
||||
return res
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"build": "turbo run build",
|
||||
"dev": "turbo run dev",
|
||||
"lint": "turbo run lint",
|
||||
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
|
||||
"format": "prettier --write \"**/*.{ts,tsx,md}\""
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^8.51.0",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue