From 4179d183bd1685dafbf5aca0364aaa37bb07166a Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Mon, 1 Jul 2024 13:31:37 +0530
Subject: [PATCH] Unenum

---
 .../accounts/components/PasswordStrength.tsx  | 26 ++++++++++---------
 web/packages/accounts/utils/index.ts          | 16 +++++-------
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/web/packages/accounts/components/PasswordStrength.tsx b/web/packages/accounts/components/PasswordStrength.tsx
index d2977e0e7f..de378a23bc 100644
--- a/web/packages/accounts/components/PasswordStrength.tsx
+++ b/web/packages/accounts/components/PasswordStrength.tsx
@@ -1,30 +1,30 @@
-import {
-    PasswordStrength,
-    estimatePasswordStrength,
-} from "@ente/accounts/utils";
+import { estimatePasswordStrength } from "@ente/accounts/utils";
 import { FlexWrapper } from "@ente/shared/components/Container";
 import { Typography } from "@mui/material";
 import { t } from "i18next";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 
-export const PasswordStrengthHint = ({
-    password,
-}: {
+interface PasswordStrengthHintProps {
     password: string;
-}): JSX.Element => {
+}
+
+export const PasswordStrengthHint: React.FC<PasswordStrengthHintProps> = ({
+    password,
+}) => {
     const passwordStrength = useMemo(
         () => estimatePasswordStrength(password),
         [password],
     );
+
     return (
         <FlexWrapper mt={"8px"} mb={"4px"}>
             <Typography
                 variant="small"
                 sx={(theme) => ({
                     color:
-                        passwordStrength === PasswordStrength.WEAK
+                        passwordStrength == "weak"
                             ? theme.colors.danger.A700
-                            : passwordStrength === PasswordStrength.MODERATE
+                            : passwordStrength == "moderate"
                               ? theme.colors.warning.A500
                               : theme.colors.accent.A500,
                 })}
@@ -32,7 +32,9 @@ export const PasswordStrengthHint = ({
                 flex={1}
             >
                 {password
-                    ? t("PASSPHRASE_STRENGTH", { context: passwordStrength })
+                    ? t("PASSPHRASE_STRENGTH", {
+                          context: passwordStrength.toUpperCase(),
+                      })
                     : ""}
             </Typography>
         </FlexWrapper>
diff --git a/web/packages/accounts/utils/index.ts b/web/packages/accounts/utils/index.ts
index 7b311eea9b..c2b5055447 100644
--- a/web/packages/accounts/utils/index.ts
+++ b/web/packages/accounts/utils/index.ts
@@ -1,10 +1,6 @@
 import zxcvbn from "zxcvbn";
 
-export enum PasswordStrength {
-    WEAK = "WEAK",
-    MODERATE = "MODERATE",
-    STRONG = "STRONG",
-}
+export type PasswordStrength = "weak" | "moderate" | "strong";
 
 export const convertBufferToBase64 = (buffer: Buffer) => {
     return buffer.toString("base64");
@@ -16,19 +12,19 @@ export const convertBase64ToBuffer = (base64: string) => {
 
 export function estimatePasswordStrength(password: string): PasswordStrength {
     if (!password) {
-        return PasswordStrength.WEAK;
+        return "weak";
     }
 
     const zxcvbnResult = zxcvbn(password);
     if (zxcvbnResult.score < 2) {
-        return PasswordStrength.WEAK;
+        return "weak";
     } else if (zxcvbnResult.score < 3) {
-        return PasswordStrength.MODERATE;
+        return "moderate";
     } else {
-        return PasswordStrength.STRONG;
+        return "strong";
     }
 }
 
 export const isWeakPassword = (password: string) => {
-    return estimatePasswordStrength(password) === PasswordStrength.WEAK;
+    return estimatePasswordStrength(password) == "weak";
 };