The settings module includes pages which allow the user to modify account preferences such as 2FA, billing information, and notifications.
settings/
├── components/
│ └── SettingsForm.tsx
├── pages/
│ ├── Settings2FAPage.tsx
│ ├── SettingsBillingPage.tsx
│ ├── SettingsDeleteAccountPage.tsx
│ ├── SettingsNotificationsPage.tsx
│ ├── SettingsPage.tsx
│ ├── SettingsPasswordPage.tsx
│ ├── SettingsPrivacyPage.tsx
│ └── SettingsProfilePage.tsx
└── services/
└── settingsApi.ts
- Content-Type: Indicates the media type of the resource.
- CORS: implemented by
cors_layer middleware in back end which restricts the ability to load resources to specified origins
- CSRF: implemented by
csrf_layer middleware in back end which protects against malicious requests by associating a unique random token for every form in a given session
- Input Sanitization: resolved by React by default which escapes string variables in views automatically, foregoing the need to sanitize input as code can not be injected
- XSS: resolved by React by default which escapes string variables in views automatically, preventing injected code
Form to be used for sending settings information and preferences to backend for processing, and storage.
- Wrapped in
BaseLayoutAuthenticated element, with Header and Footer elements
- Contains: 2FA status form
- Links to: settings
- Wrapped in
BaseLayoutAuthenticated element, with Header and Footer elements
- Wrapped in
BaseLayoutAuthenticated element, with Header and Footer elements
- Contains: delete account form
- Links to: settings
- Wrapped in
BaseLayoutAuthenticated element, with Header and Footer elements
- Contains: notifications status form
- Links to: settings
- Wrapped in
BaseLayoutAuthenticated element, with Header and Footer elements
- Links to: profile, password, billing, invoices, services, 2FA, privacy, delete account, contact, policies
- Wrapped in
BaseLayoutAuthenticated element, with Header and Footer elements
- Contains: change password form
- Links to: settings
- Wrapped in
BaseLayoutAuthenticated element, with Header and Footer elements
- Contains: data collection status form
- Links to: settings
- Wrapped in
BaseLayoutAuthenticated element, with Header and Footer elements
- Contains: profile modification form
- Links to: settings
import BaseLayout from "../../core/components/BaseLayoutAuthenticated";
import Header from "../../core/components/Header";
import Footer from "../../core/components/Footer";
import { Link } from "rect-router-dom";
import { fetchWithAuth } from "@/utils/fetchWithAuth";
BaseLayout: Element providing universal authenticated layoutHeader: Element that contains header contentsFooter: Element that contains footer contentsLink: A progressively enhanced <a href> wrapper to enable navigation with client-side routing.fetchWithAuth: Provides authentication check while fetching information
export interface UserSettings {
theme: "light" | "dark";
notifications: boolean;
}
- Contains user settings which can be retrieved and updated
| Method |
Path |
Field |
Type |
| POST |
. |
2FA |
checkbox |
| Method |
Path |
Field |
Type |
| POST |
. |
- |
- |
| Method |
Path |
Field |
Type |
| POST |
. |
email notifications |
checkbox |
| POST |
. |
sms notifications |
checkbox |
| Method |
Path |
Field |
Type |
| POST |
. |
current password |
password |
| POST |
. |
new password |
password |
| POST |
. |
confirm password |
password |
| Method |
Path |
Field |
Type |
| POST |
. |
share data |
checkbox |
| Method |
Path |
Field |
Type |
| POST |
. |
first name |
text |
| POST |
. |
last name |
text |
| POST |
. |
email |
email |
getSettings()
- fetches
/settings, returns json string of token
- export
- async
- param:
token: string
Promise<UserSettings>
updateSettings()
- fetches
/settings/update, returns json string of token, and updates settings via POST method
- export
- async
- param:
token: string, settings: UserSettings
- Add ability to modify email
- Add different types of notification (i.e. important, relevant, general news/info)
components/SettingsForm.tsx is empty