commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.1k Packages Projects Releases Wiki Activity

Design improvements for v2 security settings pages (#4087)

Browse Source 
* fix password change design

* fix 2fa design

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
This commit is contained in:
Carina Wollendorfer
2022-09-05 15:08:59 -06:00
committed by GitHub
co-authored by CarinaWolli
parent 8653e8eea5
commit faf62ac8e7
2 changed files with 40 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/pages/v2/settings/security/password.tsx
+37 -33
View File
@@ -52,40 +52,44 @@ const PasswordView = () => {
const { oldPassword, newPassword } = values;
mutation.mutate({ oldPassword, newPassword });
}}>
<div className="flex space-x-4">
<Controller
name="oldPassword"
control={formMethods.control}
render={({ field: { value } }) => (
<TextField
name="oldPassword"
label={t("old_password")}
value={value}
type="password"
onChange={(e) => {
formMethods.setValue("oldPassword", e?.target.value);
}}
/>
)}
/>
<Controller
name="newPassword"
control={formMethods.control}
render={({ field: { value } }) => (
<TextField
name="newPassword"
label={t("new_password")}
value={value}
type="password"
placeholder={t("secure_password")}
onChange={(e) => {
formMethods.setValue("newPassword", e?.target.value);
}}
/>
)}
/>
<div className="max-w-[38rem] sm:flex sm:space-x-4">
<div className="flex-grow">
<Controller
name="oldPassword"
control={formMethods.control}
render={({ field: { value } }) => (
<TextField
name="oldPassword"
label={t("old_password")}
value={value}
type="password"
onChange={(e) => {
formMethods.setValue("oldPassword", e?.target.value);
}}
/>
)}
/>
</div>
<div className="flex-grow">
<Controller
name="newPassword"
control={formMethods.control}
render={({ field: { value } }) => (
<TextField
name="newPassword"
label={t("new_password")}
value={value}
type="password"
placeholder={t("secure_password")}
onChange={(e) => {
formMethods.setValue("newPassword", e?.target.value);
}}
/>
)}
/>
</div>
</div>
<p>
<p className="text-sm text-gray-600">
<Trans i18nKey="valid_password">
Password must be at least at least 7 characters, mix of uppercase & lowercase letters, and
contain at least 1 number
apps/web/pages/v2/settings/security/two-factor-auth.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { useState, useContext } from "react";
import { useState } from "react";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
@@ -34,12 +34,12 @@ const TwoFactorAuthView = () => {
/>
<div>
<div className="flex">
<p>{t("two_factor_auth")}</p>
<p className="font-semibold">{t("two_factor_auth")}</p>
<Badge className="ml-2 text-xs" variant={user?.twoFactorEnabled ? "success" : "gray"}>
{user?.twoFactorEnabled ? t("enabled") : t("disabled")}
</Badge>
</div>
<p>Add an extra layer of security to your account.</p>
<p className="text-sm text-gray-600">Add an extra layer of security to your account.</p>
</div>
</div>