mythic-insight/calcom
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5
calcom/pages/settings/profile.tsx

318 lines
14 KiB
TypeScript
Raw Normal View History

Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
import { GetServerSideProps } from "next";
import Head from "next/head";
Fixes some linting + codacy issues
2021-07-11 19:35:56 +00:00
import { useEffect, useRef, useState } from "react";
import prisma, { whereAndSelect } from "@lib/prisma";
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
import Modal from "../../components/Modal";
import Shell from "../../components/Shell";
import SettingsShell from "../../components/Settings";
import Avatar from "../../components/Avatar";
import { getSession } from "next-auth/client";
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
import Select from "react-select";
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
import TimezoneSelect from "react-timezone-select";
import { UsernameInput } from "../../components/ui/UsernameInput";
Restricted usernames to be unique, removes the potential for username conflicts
2021-06-09 12:26:00 +00:00
import ErrorAlert from "../../components/ui/alerts/Error";
Add settings section
2021-04-07 15:03:02 +00:00
fix: settings page was missing value prop and restyled dark theme elements on booking page
2021-07-22 12:16:21 +00:00
const themeOptions = [
{ value: "light", label: "Light" },
{ value: "dark", label: "Dark" },
];
Add settings section
2021-04-07 15:03:02 +00:00
export default function Settings(props) {
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
const [successModalOpen, setSuccessModalOpen] = useState(false);
const usernameRef = useRef<HTMLInputElement>();
const nameRef = useRef<HTMLInputElement>();
const descriptionRef = useRef<HTMLTextAreaElement>();
const avatarRef = useRef<HTMLInputElement>();
Hide Calendso branding
2021-06-29 16:08:55 +00:00
const hideBrandingRef = useRef<HTMLInputElement>();
fix: settings page was missing value prop and restyled dark theme elements on booking page
2021-07-22 12:16:21 +00:00
const [selectedTheme, setSelectedTheme] = useState({ value: props.user.theme });
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone });
fix: settings page was missing value prop and restyled dark theme elements on booking page
2021-07-22 12:16:21 +00:00
const [selectedWeekStartDay, setSelectedWeekStartDay] = useState({ value: props.user.weekStart });
Add settings section
2021-04-07 15:03:02 +00:00
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
const [hasErrors, setHasErrors] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
Add success modal
2021-04-20 12:56:50 +00:00
Fixes some linting + codacy issues
2021-07-11 19:35:56 +00:00
useEffect(() => {
setSelectedTheme(
props.user.theme ? themeOptions.find((theme) => theme.value === props.user.theme) : null
);
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
setSelectedWeekStartDay({ value: props.user.weekStart, label: props.user.weekStart });
}, []);
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
const closeSuccessModal = () => {
setSuccessModalOpen(false);
};
Restricted usernames to be unique, removes the potential for username conflicts
2021-06-09 12:26:00 +00:00
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
const handleError = async (resp) => {
if (!resp.ok) {
const error = await resp.json();
throw new Error(error.message);
Add settings section
2021-04-07 15:03:02 +00:00
}
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
};
async function updateProfileHandler(event) {
event.preventDefault();
const enteredUsername = usernameRef.current.value.toLowerCase();
const enteredName = nameRef.current.value;
const enteredDescription = descriptionRef.current.value;
const enteredAvatar = avatarRef.current.value;
const enteredTimeZone = selectedTimeZone.value;
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
const enteredWeekStartDay = selectedWeekStartDay.value;
Hide Calendso branding
2021-06-29 16:08:55 +00:00
const enteredHideBranding = hideBrandingRef.current.checked;
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
// TODO: Add validation
await fetch("/api/user/profile", {
method: "PATCH",
body: JSON.stringify({
username: enteredUsername,
name: enteredName,
description: enteredDescription,
avatar: enteredAvatar,
timeZone: enteredTimeZone,
weekStart: enteredWeekStartDay,
Hide Calendso branding
2021-06-29 16:08:55 +00:00
hideBranding: enteredHideBranding,
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
theme: selectedTheme ? selectedTheme.value : null,
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
}),
headers: {
"Content-Type": "application/json",
},
})
.then(handleError)
.then(() => {
setSuccessModalOpen(true);
setHasErrors(false); // dismiss any open errors
})
.catch((err) => {
setHasErrors(true);
setErrorMessage(err.message);
});
}
return (
added bottom nav, replaced png with svg integration icons, added subtitle to shell component
2021-08-02 14:10:24 +00:00
<Shell heading="Profile" subtitle="Edit your profile information, which shows on your scheduling link.">
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
<Head>
<title>Profile | Calendso</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<SettingsShell>
<form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={updateProfileHandler}>
{hasErrors && <ErrorAlert message={errorMessage} />}
Initial restyling
2021-07-30 23:05:38 +00:00
<div className="py-6 lg:pb-8">
<div className="flex flex-col lg:flex-row">
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
<div className="flex-grow space-y-6">
minor change on profile
2021-08-02 17:22:35 +00:00
<div className="block sm:flex">
<div className="w-full sm:w-1/2 sm:mr-2 mb-6">
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
<UsernameInput ref={usernameRef} defaultValue={props.user.username} />
</div>
minor change on profile
2021-08-02 17:22:35 +00:00
<div className="w-full sm:w-1/2 sm:ml-2">
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
Full name
</label>
<input
ref={nameRef}
type="text"
name="name"
id="name"
autoComplete="given-name"
placeholder="Your name"
required
Initial restyling
2021-07-30 23:05:38 +00:00
className="mt-1 block w-full border border-gray-300 rounded-sm shadow-sm py-2 px-3 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
defaultValue={props.user.name}
/>
</div>
</div>
Add settings section
2021-04-07 15:03:02 +00:00
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
<div>
<label htmlFor="about" className="block text-sm font-medium text-gray-700">
About
</label>
<div className="mt-1">
<textarea
ref={descriptionRef}
id="about"
name="about"
placeholder="A little something about yourself."
rows={3}
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
defaultValue={props.user.bio}
Initial restyling
2021-07-30 23:05:38 +00:00
className="shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm"></textarea>
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
</div>
</div>
<div>
<label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
Timezone
</label>
<div className="mt-1">
<TimezoneSelect
id="timeZone"
value={selectedTimeZone}
onChange={setSelectedTimeZone}
styled teams section
2021-08-02 15:36:28 +00:00
classNamePrefix="react-select"
className="react-select-container border border-gray-300 rounded-sm shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm"
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
/>
</div>
</div>
<div>
<label htmlFor="weekStart" className="block text-sm font-medium text-gray-700">
First Day of Week
</label>
<div className="mt-1">
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
<Select
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
id="weekStart"
value={selectedWeekStartDay}
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
onChange={setSelectedWeekStartDay}
styled teams section
2021-08-02 15:36:28 +00:00
classNamePrefix="react-select"
className="react-select-container border border-gray-300 rounded-sm shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm"
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
options={[
Fixes some linting + codacy issues
2021-07-11 19:35:56 +00:00
{ value: "Sunday", label: "Sunday" },
{ value: "Monday", label: "Monday" },
]}
/>
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
</div>
</div>
<div>
<label htmlFor="theme" className="block text-sm font-medium text-gray-700">
Single Theme
</label>
<div className="my-1">
<Select
id="theme"
isDisabled={!selectedTheme}
defaultValue={selectedTheme || themeOptions[0]}
fix: settings page was missing value prop and restyled dark theme elements on booking page
2021-07-22 12:16:21 +00:00
value={selectedTheme || themeOptions[0]}
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
onChange={setSelectedTheme}
Initial restyling
2021-07-30 23:05:38 +00:00
className="shadow-sm focus:ring-neutral-500 focus:border-neutral-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-sm"
Fixes some linting + codacy issues
2021-07-11 19:35:56 +00:00
options={themeOptions}
/>
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
</div>
Initial restyling
2021-07-30 23:05:38 +00:00
<div className="mt-8 relative flex items-start">
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
<div className="flex items-center h-5">
<input
id="theme-adjust-os"
name="theme-adjust-os"
type="checkbox"
onChange={(e) => setSelectedTheme(e.target.checked ? null : themeOptions[0])}
defaultChecked={!selectedTheme}
Initial restyling
2021-07-30 23:05:38 +00:00
className="focus:ring-neutral-500 h-4 w-4 text-neutral-900 border-gray-300 rounded-sm"
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
/>
</div>
<div className="ml-3 text-sm">
<label htmlFor="theme-adjust-os" className="font-medium text-gray-700">
Automatically adjust theme based on invitee preferences
</label>
</div>
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
</div>
</div>
Hide Calendso branding
2021-06-29 16:08:55 +00:00
<div>
<div className="relative flex items-start">
<div className="flex items-center h-5">
<input
id="hide-branding"
name="hide-branding"
type="checkbox"
ref={hideBrandingRef}
defaultChecked={props.user.hideBranding}
Initial restyling
2021-07-30 23:05:38 +00:00
className="focus:ring-neutral-500 h-4 w-4 text-neutral-900 border-gray-300 rounded-sm"
Hide Calendso branding
2021-06-29 16:08:55 +00:00
/>
</div>
<div className="ml-3 text-sm">
<label htmlFor="hide-branding" className="font-medium text-gray-700">
Disable Calendso branding
</label>
<p className="text-gray-500">Hide all Calendso branding from your public pages.</p>
</div>
</div>
</div>
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
</div>
<div className="mt-6 flex-grow lg:mt-0 lg:ml-6 lg:flex-grow-0 lg:flex-shrink-0">
<p className="mb-2 text-sm font-medium text-gray-700" aria-hidden="true">
Photo
</p>
<div className="mt-1 lg:hidden">
<div className="flex items-center">
<div
className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12"
aria-hidden="true">
<Avatar user={props.user} className="rounded-full h-full w-full" />
</div>
Initial restyling
2021-07-30 23:05:38 +00:00
{/* <div className="ml-5 rounded-sm shadow-sm">
<div className="group relative border border-gray-300 rounded-sm py-2 px-3 flex items-center justify-center hover:bg-gray-50 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-neutral-500">
Add settings section
2021-04-07 15:03:02 +00:00
<label htmlFor="user_photo" className="relative text-sm leading-4 font-medium text-gray-700 pointer-events-none">
<span>Change</span>
<span className="sr-only"> user photo</span>
</label>
Initial restyling
2021-07-30 23:05:38 +00:00
<input id="user_photo" name="user_photo" type="file" className="absolute w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-sm" />
Add settings section
2021-04-07 15:03:02 +00:00
</div>
Set avatar through URL
2021-04-29 12:36:37 +00:00
</div> */}
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
</div>
</div>
<div className="hidden relative rounded-full overflow-hidden lg:block">
<Avatar
user={props.user}
className="relative rounded-full w-40 h-40"
Initial restyling
2021-07-30 23:05:38 +00:00
fallback={<div className="relative bg-neutral-900 rounded-full w-40 h-40"></div>}
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
/>
{/* <label htmlFor="user-photo" className="absolute inset-0 w-full h-full bg-black bg-opacity-75 flex items-center justify-center text-sm font-medium text-white opacity-0 hover:opacity-100 focus-within:opacity-100">
Add settings section
2021-04-07 15:03:02 +00:00
<span>Change</span>
<span className="sr-only"> user photo</span>
Initial restyling
2021-07-30 23:05:38 +00:00
<input type="file" id="user-photo" name="user-photo" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-sm" />
Set avatar through URL
2021-04-29 12:36:37 +00:00
</label> */}
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
</div>
<div className="mt-4">
<label htmlFor="avatar" className="block text-sm font-medium text-gray-700">
Avatar URL
</label>
<input
ref={avatarRef}
type="text"
name="avatar"
id="avatar"
placeholder="URL"
Initial restyling
2021-07-30 23:05:38 +00:00
className="mt-1 block w-full border border-gray-300 rounded-sm shadow-sm py-2 px-3 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm"
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
defaultValue={props.user.avatar}
/>
</div>
</div>
</div>
<hr className="mt-8" />
<div className="py-4 flex justify-end">
<button
type="submit"
Initial restyling
2021-07-30 23:05:38 +00:00
className="ml-2 bg-neutral-900 border border-transparent rounded-sm shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
Save
</button>
</div>
</div>
</form>
<Modal
heading="Profile updated successfully"
description="Your user profile has been updated successfully."
open={successModalOpen}
handleClose={closeSuccessModal}
/>
</SettingsShell>
</Shell>
);
Add settings section
2021-04-07 15:03:02 +00:00
}
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
export const getServerSideProps: GetServerSideProps = async (context) => {
const session = await getSession(context);
if (!session) {
return { redirect: { permanent: false, destination: "/auth/login" } };
}
Add settings section
2021-04-07 15:03:02 +00:00
Fixes some linting + codacy issues
2021-07-11 19:35:56 +00:00
const user = await whereAndSelect(
prisma.user.findFirst,
{
Implemented theme through user preferences
2021-07-09 22:59:21 +00:00
id: session.user.id,
Fixes some linting + codacy issues
2021-07-11 19:35:56 +00:00
},
["id", "username", "name", "email", "bio", "avatar", "timeZone", "weekStart", "hideBranding", "theme"]
);
Prevent users from entering mixed case usernames Booking pages are case insensitive new, so no more case sensitive usernames.
2021-06-23 15:49:10 +00:00
return {
props: { user }, // will be passed to the page component as props
};
};
Reference in a new issue Copy permalink