feat(settings): add Billing, Danger Zone, Domains DNS, Notification, Player, and Security settings pages

- Implemented Billing page with wallet balance, current plan, usage stats, available plans, and payment history.
- Created Danger Zone page for account deletion and data clearing actions with confirmation prompts.
- Developed Domains DNS page for managing whitelisted domains for iframe embedding, including add and remove functionality.
- Added Notification Settings page to configure email, push, marketing, and Telegram notifications.
- Introduced Player Settings page to customize video player behavior such as autoplay, loop, and controls visibility.
- Established Security and Connected Accounts page for managing user profile, two-factor authentication, and connected accounts.
This commit is contained in:
2026-03-01 22:49:30 +07:00
parent c6924afe5b
commit cd9aab8979
65 changed files with 3150 additions and 1133 deletions

View File

@@ -24,12 +24,10 @@ const routes: RouteData[] = [
{
path: "",
component: () => import("./home/Home.vue"),
beforeEnter: (to, from, next) => {
beforeEnter: (to, from) => {
const auth = useAuthStore();
if (auth.user) {
next({ name: "overview" });
} else {
next();
return { name: "overview" };
}
},
},
@@ -48,12 +46,10 @@ const routes: RouteData[] = [
{
path: "",
component: () => import("./auth/layout.vue"),
beforeEnter: (to, from, next) => {
beforeEnter: (to, from) => {
const auth = useAuthStore();
if (auth.user) {
next({ name: "overview" });
} else {
next();
return { name: "overview" };
}
},
children: [
@@ -130,22 +126,6 @@ const routes: RouteData[] = [
// },
],
},
{
path: "payments-and-plans",
name: "payments-and-plans",
component: () => import("./plans/Plans.vue"),
meta: {
head: {
title: "Payments & Plans - Holistream",
meta: [
{
name: "description",
content: "Manage your plans and billing information.",
},
],
},
},
},
{
path: "notification",
name: "notification",
@@ -157,14 +137,99 @@ const routes: RouteData[] = [
},
},
{
path: "profile",
name: "profile",
component: () => import("./profile/Profile.vue"), // TODO: create profile page
path: "settings",
name: "settings",
component: () => import("./settings/Settings.vue"),
meta: {
head: {
title: "Profile - Holistream",
title: "Settings - Holistream",
meta: [
{
name: "description",
content: "Manage your account settings and preferences.",
},
],
},
},
redirect: '/settings/security',
children: [
{
path: "security",
name: "settings-security",
component: () => import("./settings/pages/SecurityNConnected.vue"),
meta: {
head: {
title: "Security & Connected Apps - Holistream",
},
},
},
{
path: "billing",
name: "settings-billing",
component: () => import("./settings/pages/Billing.vue"),
meta: {
head: {
title: "Billing & Plans - Holistream",
meta: [
{
name: "description",
content: "Manage your plans and billing information.",
},
],
},
},
},
{
path: "notifications",
name: "settings-notifications",
component: () => import("./settings/pages/NotificationSettings.vue"),
meta: {
head: {
title: "Notifications - Holistream",
},
},
},
{
path: "player",
name: "settings-player",
component: () => import("./settings/pages/PlayerSettings.vue"),
meta: {
head: {
title: "Player Settings - Holistream",
},
},
},
{
path: "domains",
name: "settings-domains",
component: () => import("./settings/pages/DomainsDns.vue"),
meta: {
head: {
title: "Allowed Domains - Holistream",
},
},
},
{
path: "ads",
name: "settings-ads",
component: () => import("./settings/pages/AdsVast.vue"),
meta: {
head: {
title: "Ads & VAST - Holistream",
},
},
},
{
path: "danger",
name: "settings-danger",
component: () => import("./settings/pages/DangerZone.vue"),
meta: {
head: {
title: "Danger Zone - Holistream",
},
},
},
],
},
],
},
@@ -190,18 +255,14 @@ const createAppRouter = () => {
},
});
router.beforeEach((to, from, next) => {
router.beforeEach((to, from) => {
const auth = useAuthStore();
const head = inject(headSymbol);
(head as any).push(to.meta.head || {});
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (!auth.user) {
next({ name: "login" });
} else {
next();
return { name: "login" };
}
} else {
next();
}
});
return router;