Merge branch 'main' into bugfix/unify-email-sending

pull/375/head
Bailey Pumfleet 2021-08-08 22:21:53 +01:00 committed by GitHub
commit 35fc5964eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 104 additions and 37 deletions

View File

@ -229,16 +229,13 @@ Contributions are what make the open source community such an amazing place to b
2. On the upper right, click "Develop" => "Build App".
3. On "OAuth", select "Create".
4. Name your App.
5. Choose "Account-level app" as the app type.
5. Choose "User-managed app" as the app type.
6. De-select the option to publish the app on the Zoom App Marketplace.
7. Click "Create".
8. Now copy the Client ID and Client Secret to your .env file into the `ZOOM_CLIENT_ID` and `ZOOM_CLIENT_SECRET` fields.
9. Set the Redirect URL for OAuth `<CALENDSO URL>/api/integrations/zoomvideo/callback` replacing CALENDSO URL with the URI at which your application runs.
10. Also add the redirect URL given above as a whitelist URL and enable "Subdomain check". Make sure, it says "saved" below the form.
11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". Search for and check the following scopes:
1. account:write:admin
2. meeting:write:admin
3. user:write:admin
11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". On the left, click the category "Meeting" and check the scope `meeting:write`.
12. Click "Done".
13. You're good to go. Now you can easily add your Zoom integration in the Calendso settings.

View File

@ -329,34 +329,46 @@ export default function Book(props: any): JSX.Element {
</div>
))}
<div className="mb-4">
{!guestToggle && (
<label
onClick={toggleGuestEmailInput}
htmlFor="guests"
className="block text-sm font-medium text-blue-500 mb-1 hover:cursor-pointer">
+ Additional Guests
</label>
)}
{guestToggle && (
<ReactMultiEmail
placeholder="Input your Email Address"
emails={guestEmails}
onChange={(_emails: string[]) => {
setGuestEmails(_emails);
}}
getLabel={(email: string, index: number, removeEmail: (index: number) => void) => {
return (
<div data-tag key={index}>
{email}
<span data-tag-handle onClick={() => removeEmail(index)}>
×
</span>
</div>
);
}}
/>
)}
</div>
{!guestToggle &&
<label
onClick={toggleGuestEmailInput}
htmlFor="guests"
className="block text-sm font-medium dark:text-white text-blue-500 mb-1 hover:cursor-pointer">
+ Additional Guests
</label>
}
{guestToggle && (
<div>
<label
htmlFor="guests"
className="block text-sm font-medium dark:text-white text-gray-700">
Guests
</label>
<ReactMultiEmail
placeholder="guest@example.com"
emails={guestEmails}
onChange={(_emails: string[]) => {
setGuestEmails(_emails);
}}
getLabel={(
email: string,
index: number,
removeEmail: (index: number) => void
) => {
return (
<div data-tag key={index}>
{email}
<span data-tag-handle onClick={() => removeEmail(index)}>
×
</span>
</div>
);
}}
/>
</div>
)}
</div>
<div className="mb-4">
<label
htmlFor="notes"

View File

@ -9,6 +9,7 @@ import { Menu, Transition } from "@headlessui/react";
import { DotsHorizontalIcon } from "@heroicons/react/solid";
import classNames from "@lib/classNames";
import { ClockIcon, XIcon } from "@heroicons/react/outline";
import Loader from "@components/Loader";
export default function Bookings({ bookings }) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@ -17,7 +18,7 @@ export default function Bookings({ bookings }) {
const router = useRouter();
if (loading) {
return <p className="text-gray-400">Loading...</p>;
return <Loader />;
}
async function confirmBookingHandler(booking, confirm: boolean) {

View File

@ -267,7 +267,7 @@ export default function IntegrationHome({ integrations }) {
<p>If you want to add your own App here, get in touch with us.</p>
</div>
<div className="mt-5">
<a href="apps@calendso.com" className="btn btn-white">
<a href="mailto:apps@calendso.com" className="btn btn-white">
Contact us
</a>
</div>

View File

@ -8,6 +8,7 @@ import { getSession, useSession } from "next-auth/client";
import { UsersIcon } from "@heroicons/react/outline";
import TeamList from "../../components/team/TeamList";
import TeamListItem from "../../components/team/TeamListItem";
import Loader from "@components/Loader";
export default function Teams() {
const [, loading] = useSession();
@ -38,7 +39,7 @@ export default function Teams() {
}, []);
if (loading) {
return <p className="text-gray-400">Loading...</p>;
return <Loader />;
}
const createTeam = (e) => {

View File

@ -81,6 +81,7 @@
}
}
/* !important to style multi-email input */
::-moz-selection {
color: white;
background: black;
@ -99,9 +100,64 @@
}
.react-multi-email > [type='text'] {
--tw-ring-shadow: 0 0 0 0 0;
@apply shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md;
}
.react-multi-email {
margin: 0;
max-width: 100%;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
text-align: left;
line-height: 1.25rem;
padding: 0.75em 0.5rem;
padding: 0;
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: flex-start;
}
.react-multi-email > span[data-placeholder] {
display: none;
position: absolute;
left: 0.8rem;
top: 0.75rem;
line-height: 1.25rem;
font-size: 0.875rem;
}
.react-multi-email.empty > span[data-placeholder] {
display: inline;
color: #646b7a;
}
.react-multi-email.focused > span[data-placeholder] {
display: none;
}
.react-multi-email > input {
width: 100% !important;
display: inline-block !important;
@apply mt-1;
}
.react-multi-email [data-tag] {
@apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.react-multi-email [data-tag] [data-tag-item] {
max-width: 100%;
overflow: hidden;
}
.react-multi-email [data-tag] [data-tag-handle] {
margin-left: 0.833em;
cursor: pointer;
}
/* !important to override react-select */
.react-select__value-container{
border: 0 !important;