Skip to content

Update Security UI to match all other Settings #4274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
timothycarambat merged 7 commits into from
Aug 12, 2025
Merged

Update Security UI to match all other Settings #4274

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bda9562
Update Security UI to match all other Settings
AshikaAnand12 Aug 11, 2025
ead1353
Normalizing translations
AshikaAnand12 Aug 11, 2025
4fc0a26
Running yarn lint
AshikaAnand12 Aug 12, 2025
8230ab5
Set back all the null values
AshikaAnand12 Aug 12, 2025
8ab2d41
fix spacing + lint
timothycarambat Aug 12, 2025
a0c0c55
remap name
timothycarambat Aug 12, 2025
dcaac6d
Merge branch 'master' into 4272-uiUpdateForSecurityTab
timothycarambat Aug 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Update Security UI to match all other Settings
  • Loading branch information
@AshikaAnand12
AshikaAnand12 committed Aug 11, 2025
commit bda9562d61e8124d41d1e6ae92db805bb44ea5cb
23 changes: 13 additions & 10 deletions frontend/src/locales/en/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -682,17 +682,20 @@ const TRANSLATIONS = {
},
},

multi: {
title: "Multi-User Mode",
description:
"Set up your instance to support your team by activating Multi-User Mode.",
enable: {
"is-enable": "Multi-User Mode is Enabled",
enable: "Enable Multi-User Mode",
security: {
title: "Security",
multiuser: {
title: "Multi-User Mode",
description:
"By default, you will be the only admin. As an admin you will need to create accounts for all new users or admins. Do not lose your password as only an Admin user can reset passwords.",
username: "Admin account username",
password: "Admin account password",
"Set up your instance to support your team by activating Multi-User Mode.",
enable: {
"is-enable": "Multi-User Mode is Enabled",
enable: "Enable Multi-User Mode",
description:
"By default, you will be the only admin. As an admin you will need to create accounts for all new users or admins. Do not lose your password as only an Admin user can reset passwords.",
username: "Admin account username",
password: "Admin account password",
},
},
password: {
title: "Password Protection",
Expand Down
52 changes: 29 additions & 23 deletions frontend/src/pages/GeneralSettings/Security/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,19 @@ import CTAButton from "@/components/lib/CTAButton";
import { useTranslation } from "react-i18next";

export default function GeneralSecurity() {
const { t } = useTranslation();
return (
<div className="w-screen h-screen overflow-hidden bg-theme-bg-container flex">
<Sidebar />
<div
style={{ height: isMobile ? "100%" : "calc(100% - 32px)" }}
className="relative md:ml-[2px] md:mr-[16px] md:my-[16px] md:rounded-[16px] bg-theme-bg-secondary w-full h-full overflow-y-scroll p-4 md:p-0"
>
<div className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:pt-6">
<p className="text-lg leading-6 font-bold text-theme-text-primary md-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10 p-4">
{t("security.title")}
</p>
</div>
<MultiUserMode />
<PasswordProtection />
</div>
Expand Down Expand Up @@ -86,17 +92,17 @@ function MultiUserMode() {
<form
onSubmit={handleSubmit}
onChange={() => setHasChanges(true)}
className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16"
className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px]"
>
<div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
<div className="w-full flex flex-col gap-y-1 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10 pb-8">
<div className="w-full flex flex-col gap-y-1 w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
<div className="w-full flex flex-col gap-y-1">
<div className="items-center flex gap-x-4">
<p className="text-lg leading-6 font-bold text-white">
{t("multi.title")}
<p className="text-base font-bold text-white mt-6">
{t("security.multiuser.title")}
</p>
</div>
<p className="text-xs leading-[18px] font-base text-white text-opacity-60">
{t("multi.description")}
{t("security.multiuser.description")}
</p>
</div>
{hasChanges && (
Expand All @@ -115,10 +121,10 @@ function MultiUserMode() {
<div className="space-y-6 flex h-full w-full">
<div className="w-full flex flex-col gap-y-4">
<div className="">
<label className="mb-2.5 block font-medium text-white">
<label className="text-white text-sm font-semibold block mb-3">
{multiUserModeEnabled
? t("multi.enable.is-enable")
: t("multi.enable.enable")}
? t("security.multiuser.enable.is-enable")
: t("security.multiuser.enable.enable")}
</label>

<label className="relative inline-flex cursor-pointer items-center">
Expand All @@ -139,9 +145,9 @@ function MultiUserMode() {
<div className="w-80">
<label
htmlFor="username"
className="block mb-3 font-medium text-white"
className="text-white text-sm font-semibold block mb-3"
>
{t("multi.enable.username")}
{t("security.multiuser.enable.username")}
</label>
<input
name="username"
Expand All @@ -158,9 +164,9 @@ function MultiUserMode() {
<div className="mt-4 w-80">
<label
htmlFor="password"
className="block mb-3 font-medium text-white"
className="text-white text-sm font-semibold block mb-3"
>
{t("multi.enable.password")}
{t("security.multiuser.enable.password")}
</label>
<input
name="password"
Expand All @@ -179,7 +185,7 @@ function MultiUserMode() {
</div>
<div className="flex items-center justify-between space-x-14">
<p className="text-white text-opacity-80 text-xs rounded-lg w-96">
{t("multi.enable.description")}
{t("security.multiuser.enable.description")}
</p>
</div>
</div>
Expand Down Expand Up @@ -263,17 +269,17 @@ function PasswordProtection() {
<form
onSubmit={handleSubmit}
onChange={() => setHasChanges(true)}
className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px] md:py-6 py-16"
className="flex flex-col w-full px-1 md:pl-6 md:pr-[50px]"
>
<div className="w-full flex flex-col gap-y-1 pb-6 border-white light:border-theme-sidebar-border border-b-2 border-opacity-10">
<div className="w-full flex flex-col gap-y-1">
<div className="items-center flex gap-x-4">
<p className="text-lg leading-6 font-bold text-white">
{t("multi.password.title")}
<p className="text-base font-bold text-white mt-6">
{t("security.password.title")}
</p>
</div>
<p className="text-xs leading-[18px] font-base text-white text-opacity-60">
{t("multi.password.description")}
{t("security.password.description")}
</p>
</div>
{hasChanges && (
Expand All @@ -292,8 +298,8 @@ function PasswordProtection() {
<div className="space-y-6 flex h-full w-full">
<div className="w-full flex flex-col gap-y-4">
<div className="">
<label className="mb-2.5 block font-medium text-white">
{t("multi.password.title")}
<label className="text-white text-sm font-semibold block mb-3">
{t("security.password.title")}
</label>

<label className="relative inline-flex cursor-pointer items-center">
Expand All @@ -311,9 +317,9 @@ function PasswordProtection() {
<div className="mt-4 w-80">
<label
htmlFor="password"
className="block mb-3 font-medium text-white"
className="text-white text-sm font-semibold block mb-3"
>
{t("multi.password.password-label")}
{t("security.password.password-label")}
</label>
<input
name="password"
Expand All @@ -332,7 +338,7 @@ function PasswordProtection() {
</div>
<div className="flex items-center justify-between space-x-14">
<p className="text-white text-opacity-80 light:text-theme-text text-xs rounded-lg w-96">
{t("multi.password.description")}
{t("security.password.description")}
</p>
</div>
</div>
Expand Down