Renamed (app) folder to (main).

src/app/(main)/settings/profile/DateRangeSetting.js

@@ -0,0 +1,28 @@
+import DateFilter from 'components/input/DateFilter';
+import { Button, Flexbox } from 'react-basics';
+import useDateRange from 'components/hooks/useDateRange';
+import { DEFAULT_DATE_RANGE } from 'lib/constants';
+import useMessages from 'components/hooks/useMessages';
+
+export function DateRangeSetting() {
+  const { formatMessage, labels } = useMessages();
+  const [dateRange, setDateRange] = useDateRange();
+  const { value } = dateRange;
+
+  const handleChange = value => setDateRange(value);
+  const handleReset = () => setDateRange(DEFAULT_DATE_RANGE);
+
+  return (
+    <Flexbox gap={10}>
+      <DateFilter
+        value={value}
+        startDate={dateRange.startDate}
+        endDate={dateRange.endDate}
+        onChange={handleChange}
+      />
+      <Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
+    </Flexbox>
+  );
+}
+
+export default DateRangeSetting;

src/app/(main)/settings/profile/LanguageSetting.js

@@ -0,0 +1,32 @@
+import { Button, Dropdown, Item, Flexbox } from 'react-basics';
+import useLocale from 'components/hooks/useLocale';
+import { DEFAULT_LOCALE } from 'lib/constants';
+import { languages } from 'lib/lang';
+import useMessages from 'components/hooks/useMessages';
+
+export function LanguageSetting() {
+  const { formatMessage, labels } = useMessages();
+  const { locale, saveLocale } = useLocale();
+  const options = Object.keys(languages);
+
+  const handleReset = () => saveLocale(DEFAULT_LOCALE);
+
+  const renderValue = value => languages[value].label;
+
+  return (
+    <Flexbox gap={10}>
+      <Dropdown
+        items={options}
+        value={locale}
+        renderValue={renderValue}
+        onChange={saveLocale}
+        menuProps={{ style: { height: 300, width: 300 } }}
+      >
+        {item => <Item key={item}>{languages[item].label}</Item>}
+      </Dropdown>
+      <Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
+    </Flexbox>
+  );
+}
+
+export default LanguageSetting;

src/app/(main)/settings/profile/PasswordChangeButton.js

@@ -0,0 +1,31 @@
+import { Button, Icon, Text, useToasts, ModalTrigger, Modal } from 'react-basics';
+import PasswordEditForm from 'app/(main)/settings/profile/PasswordEditForm';
+import Icons from 'components/icons';
+import useMessages from 'components/hooks/useMessages';
+
+export function PasswordChangeButton() {
+  const { formatMessage, labels, messages } = useMessages();
+  const { showToast } = useToasts();
+
+  const handleSave = () => {
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+  };
+
+  return (
+    <>
+      <ModalTrigger>
+        <Button>
+          <Icon>
+            <Icons.Lock />
+          </Icon>
+          <Text>{formatMessage(labels.changePassword)}</Text>
+        </Button>
+        <Modal title={formatMessage(labels.changePassword)}>
+          {close => <PasswordEditForm onSave={handleSave} onClose={close} />}
+        </Modal>
+      </ModalTrigger>
+    </>
+  );
+}
+
+export default PasswordChangeButton;

src/app/(main)/settings/profile/PasswordEditForm.js

@@ -0,0 +1,68 @@
+import { useRef } from 'react';
+import { Form, FormRow, FormInput, FormButtons, PasswordField, Button } from 'react-basics';
+import useApi from 'components/hooks/useApi';
+import useMessages from 'components/hooks/useMessages';
+
+export function PasswordEditForm({ onSave, onClose }) {
+  const { formatMessage, labels, messages } = useMessages();
+  const { post, useMutation } = useApi();
+  const { mutate, error, isLoading } = useMutation(data => post('/me/password', data));
+  const ref = useRef(null);
+
+  const handleSubmit = async data => {
+    mutate(data, {
+      onSuccess: async () => {
+        onSave();
+        onClose();
+      },
+    });
+  };
+
+  const samePassword = value => {
+    if (value !== ref?.current?.getValues('newPassword')) {
+      return formatMessage(messages.noMatchPassword);
+    }
+    return true;
+  };
+
+  return (
+    <Form ref={ref} onSubmit={handleSubmit} error={error}>
+      <FormRow label={formatMessage(labels.currentPassword)}>
+        <FormInput name="currentPassword" rules={{ required: 'Required' }}>
+          <PasswordField autoComplete="current-password" />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.newPassword)}>
+        <FormInput
+          name="newPassword"
+          rules={{
+            required: 'Required',
+            minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
+          }}
+        >
+          <PasswordField autoComplete="new-password" />
+        </FormInput>
+      </FormRow>
+      <FormRow label={formatMessage(labels.confirmPassword)}>
+        <FormInput
+          name="confirmPassword"
+          rules={{
+            required: formatMessage(labels.required),
+            minLength: { value: 8, message: formatMessage(messages.minPasswordLength, { n: 8 }) },
+            validate: samePassword,
+          }}
+        >
+          <PasswordField autoComplete="confirm-password" />
+        </FormInput>
+      </FormRow>
+      <FormButtons flex>
+        <Button type="submit" variant="primary" disabled={isLoading}>
+          {formatMessage(labels.save)}
+        </Button>
+        <Button onClick={onClose}>{formatMessage(labels.cancel)}</Button>
+      </FormButtons>
+    </Form>
+  );
+}
+
+export default PasswordEditForm;

src/app/(main)/settings/profile/ProfileHeader.js

@@ -0,0 +1,11 @@
+'use client';
+import PageHeader from 'components/layout/PageHeader';
+import { useMessages } from 'components/hooks';
+
+export function ProfileHeader() {
+  const { formatMessage, labels } = useMessages();
+
+  return <PageHeader title={formatMessage(labels.profile)}></PageHeader>;
+}
+
+export default ProfileHeader;

src/app/(main)/settings/profile/ProfileSettings.js

@@ -0,0 +1,62 @@
+'use client';
+import { Form, FormRow } from 'react-basics';
+import TimezoneSetting from 'app/(main)/settings/profile/TimezoneSetting';
+import DateRangeSetting from 'app/(main)/settings/profile/DateRangeSetting';
+import LanguageSetting from 'app/(main)/settings/profile/LanguageSetting';
+import ThemeSetting from 'app/(main)/settings/profile/ThemeSetting';
+import PasswordChangeButton from './PasswordChangeButton';
+import useUser from 'components/hooks/useUser';
+import useMessages from 'components/hooks/useMessages';
+import { ROLES } from 'lib/constants';
+
+export function ProfileSettings() {
+  const { user } = useUser();
+  const { formatMessage, labels } = useMessages();
+  const cloudMode = Boolean(process.env.cloudMode);
+
+  if (!user) {
+    return null;
+  }
+
+  const { username, role } = user;
+
+  const renderRole = value => {
+    if (value === ROLES.user) {
+      return formatMessage(labels.user);
+    }
+    if (value === ROLES.admin) {
+      return formatMessage(labels.admin);
+    }
+    if (value === ROLES.viewOnly) {
+      return formatMessage(labels.viewOnly);
+    }
+
+    return formatMessage(labels.unknown);
+  };
+
+  return (
+    <Form>
+      <FormRow label={formatMessage(labels.username)}>{username}</FormRow>
+      <FormRow label={formatMessage(labels.role)}>{renderRole(role)}</FormRow>
+      {!cloudMode && (
+        <FormRow label={formatMessage(labels.password)}>
+          <PasswordChangeButton />
+        </FormRow>
+      )}
+      <FormRow label={formatMessage(labels.defaultDateRange)}>
+        <DateRangeSetting />
+      </FormRow>
+      <FormRow label={formatMessage(labels.language)}>
+        <LanguageSetting />
+      </FormRow>
+      <FormRow label={formatMessage(labels.timezone)}>
+        <TimezoneSetting />
+      </FormRow>
+      <FormRow label={formatMessage(labels.theme)}>
+        <ThemeSetting />
+      </FormRow>
+    </Form>
+  );
+}
+
+export default ProfileSettings;

src/app/(main)/settings/profile/ThemeSetting.js

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import { Button, Icon } from 'react-basics';
+import useTheme from 'components/hooks/useTheme';
+import Sun from 'assets/sun.svg';
+import Moon from 'assets/moon.svg';
+import styles from './ThemeSetting.module.css';
+
+export function ThemeSetting() {
+  const { theme, saveTheme } = useTheme();
+
+  return (
+    <div className={styles.buttons}>
+      <Button
+        className={classNames({ [styles.active]: theme === 'light' })}
+        onClick={() => saveTheme('light')}
+      >
+        <Icon>
+          <Sun />
+        </Icon>
+      </Button>
+      <Button
+        className={classNames({ [styles.active]: theme === 'dark' })}
+        onClick={() => saveTheme('dark')}
+      >
+        <Icon>
+          <Moon />
+        </Icon>
+      </Button>
+    </div>
+  );
+}
+
+export default ThemeSetting;

src/app/(main)/settings/profile/ThemeSetting.module.css

@@ -0,0 +1,8 @@
+.buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.active {
+  border: 2px solid var(--primary400);
+}

src/app/(main)/settings/profile/TimezoneSetting.js

@@ -0,0 +1,30 @@
+import { Dropdown, Item, Button, Flexbox } from 'react-basics';
+import { listTimeZones } from 'timezone-support';
+import useTimezone from 'components/hooks/useTimezone';
+import useMessages from 'components/hooks/useMessages';
+import { getTimezone } from 'lib/date';
+
+export function TimezoneSetting() {
+  const { formatMessage, labels } = useMessages();
+  const [timezone, saveTimezone] = useTimezone();
+  const options = listTimeZones();
+
+  const handleReset = () => saveTimezone(getTimezone());
+
+  return (
+    <Flexbox gap={10}>
+      <Dropdown
+        items={options}
+        value={timezone}
+        onChange={saveTimezone}
+        style={{ flex: 1 }}
+        menuProps={{ style: { height: 300 } }}
+      >
+        {item => <Item key={item}>{item}</Item>}
+      </Dropdown>
+      <Button onClick={handleReset}>{formatMessage(labels.reset)}</Button>
+    </Flexbox>
+  );
+}
+
+export default TimezoneSetting;

src/app/(main)/settings/profile/page.js

@@ -0,0 +1,11 @@
+import ProfileHeader from './ProfileHeader';
+import ProfileSettings from './ProfileSettings';
+
+export default function () {
+  return (
+    <>
+      <ProfileHeader />
+      <ProfileSettings />
+    </>
+  );
+}