fixes: login methods UI issues

supertokens · Mar 18, 2024 · c773176 · c773176
1 parent 03289c3
commit c773176
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 68 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -15,7 +15,7 @@
 	"editor.trimAutoWhitespace": true,
 	"editor.formatOnSave": true,
 	"editor.codeActionsOnSave": {
-		"source.organizeImports": true
+		"source.organizeImports": "explicit"
 	},
 	"files.exclude": {
 		"**/.DS_Store": true,

diff --git a/src/ui/components/copyText/CopyText.scss b/src/ui/components/copyText/CopyText.scss
@@ -20,6 +20,7 @@
 	max-width: 100%;
 	.copy-text-text {
 		@include text-ellipsis(100%);
+		max-width: 180px;
 		flex: 1;
 		padding-right: 4px;
 	}

diff --git a/src/ui/components/phoneNumber/PhoneNumberInput.tsx b/src/ui/components/phoneNumber/PhoneNumberInput.tsx
@@ -239,7 +239,7 @@ const PhoneNumberTextField: FC<PhoneNumberTextFieldProps> = forwardRef(
 PhoneNumberTextField.displayName = "PhoneNumberTextField";
 
 export const PhoneNumberInput: FC<PhoneNumberInputProps> = (props: PhoneNumberInputProps) => {
-	const { onChange, value, error, forceShowError } = props;
+	const { onChange, value, error, forceShowError, disabled } = props;
 	const [isTouched, setIsTouched] = useState(false);
 
 	// call the `onChange` and set form as touched
@@ -252,13 +252,17 @@ export const PhoneNumberInput: FC<PhoneNumberInputProps> = (props: PhoneNumberIn
 	);
 
 	return (
-		<div>
+		<div
+			style={{
+				pointerEvents: disabled ? "none" : "all",
+			}}>
 			<label htmlFor={props.name}>{props.label}</label>
 			<PhoneInputWithCountrySelect
 				className={`phone-input ${error !== undefined ? "phone-input-error" : ""}`}
 				value={value}
 				onChange={handleChange}
 				international={true}
+				focusInputOnCountrySelection={false}
 				addInternationalOption={false}
 				withCountryCallingCode={false}
 				countryCallingCodeEditable={true}

diff --git a/src/ui/components/userDetail/loginMethods/LoginMethods.tsx b/src/ui/components/userDetail/loginMethods/LoginMethods.tsx
@@ -152,11 +152,6 @@ const Methods: React.FC<MethodProps> = ({
 	const [emailError, setEmailError] = useState("");
 	const { getUserEmailVerificationStatus } = useVerifyUserEmail();
 
-	const trim = (val: string) => {
-		const len = val.length;
-		return val.substring(0, Math.floor(len / 7)) + "..." + val.substring(6 * Math.floor(len / 7), len);
-	};
-
 	const sendUserEmailVerification = useCallback(
 		async (userId: string, tenantId: string | undefined) => {
 			const res = await getUserEmailVerificationStatus(userId);
@@ -245,11 +240,8 @@ const Methods: React.FC<MethodProps> = ({
 					<UserRecipePill {...loginMethod} />
 					<span className="user-id-span">
 						User ID:
-						<span className="copy-text-wrapper resp">
-							<CopyText copyVal={loginMethod.recipeUserId}>{trim(loginMethod.recipeUserId)}</CopyText>
-						</span>
 						<span className="copy-text-wrapper">
-							<CopyText>{loginMethod.recipeUserId}</CopyText>
+							<CopyText copyVal={loginMethod.recipeUserId}>{loginMethod.recipeUserId}</CopyText>
 						</span>
 					</span>
 				</div>
@@ -285,7 +277,7 @@ const Methods: React.FC<MethodProps> = ({
 				<div>
 					<EditableInput
 						label={"Email ID"}
-						val={loginMethod.email ?? ""}
+						val={send.email ?? ""}
 						edit={loginMethod.recipeId === "thirdparty" ? false : isEditing}
 						type={"email"}
 						error={emailError}
@@ -340,7 +332,7 @@ const Methods: React.FC<MethodProps> = ({
 						<div>
 							<EditableInput
 								label={"Phone Number"}
-								val={loginMethod.phoneNumber ?? ""}
+								val={send.phone ?? ""}
 								edit={isEditing}
 								type={"phone"}
 								onChange={(val) => setSend({ ...send, phone: val })}

diff --git a/src/ui/components/userDetail/loginMethods/components/editableInput.scss b/src/ui/components/userDetail/loginMethods/components/editableInput.scss
@@ -2,6 +2,10 @@
 	display: flex;
 	justify-content: flex-start;
 	align-items: baseline;
+
+	@media (max-width: 340px) {
+		flex-direction: column;
+	}
 }
 
 .input-field-container {

diff --git a/src/ui/components/userDetail/loginMethods/components/editableInput.tsx b/src/ui/components/userDetail/loginMethods/components/editableInput.tsx
@@ -1,8 +1,6 @@
-import React, { useEffect, useState } from "react";
 import InputField from "../../../inputField/InputField";
-import "./editableInput.scss";
 import { PhoneNumberInput } from "../../../phoneNumber/PhoneNumberInput";
-import phoneNumber from "../../../phoneNumber/PhoneNumber";
+import "./editableInput.scss";
 
 export type EditableInputProps = {
 	label: string;
@@ -14,35 +12,29 @@ export type EditableInputProps = {
 };
 
 export const EditableInput = ({ label, val, edit, type, onChange, error }: EditableInputProps) => {
-	if (!edit) {
-		return (
-			<span>
-				{label}:<b>{val == "" ? "-" : val}</b>
-			</span>
-		);
-	} else {
-		return (
-			<span className="input">
-				{label}:&nbsp;{" "}
-				{type === "email" && (
-					<InputField
-						type="email"
-						name="email"
-						error={error ?? ""}
-						value={val}
-						handleChange={({ target }) => {
-							onChange(target.value);
-						}}
-					/>
-				)}
-				{type === "phone" && (
-					<PhoneNumberInput
-						value={val}
-						name="Phone Number"
-						onChange={onChange}
-					/>
-				)}
-			</span>
-		);
-	}
+	return (
+		<span className="input">
+			{label}:&nbsp;{" "}
+			{type === "email" && (
+				<InputField
+					disabled={!edit}
+					type="email"
+					name="email"
+					error={error ?? ""}
+					value={val}
+					handleChange={({ target }) => {
+						onChange(target.value);
+					}}
+				/>
+			)}
+			{type === "phone" && (
+				<PhoneNumberInput
+					disabled={!edit}
+					value={val}
+					name="Phone Number"
+					onChange={onChange}
+				/>
+			)}
+		</span>
+	);
 };
diff --git a/src/ui/components/userDetail/loginMethods/loginMethods.scss b/src/ui/components/userDetail/loginMethods/loginMethods.scss
@@ -15,6 +15,11 @@
 		align-items: baseline;
 		justify-content: space-between;
 
+		.right {
+			display: flex;
+			gap: 4px;
+		}
+
 		.left {
 			display: flex;
 			align-items: baseline;
@@ -25,13 +30,16 @@
 				margin-left: 15px;
 				color: #6e6a65;
 
+				display: flex;
+				flex-wrap: wrap;
+				gap: 6px;
+
 				.copy-text-wrapper {
 					border-radius: 3px;
 					border: 1px solid #d9d9d9;
 					color: #d65078;
 					font-size: 13px;
 					padding: 5px;
-					margin-left: 10px;
 				}
 			}
 
@@ -44,12 +52,8 @@
 				.user-id-span {
 					margin-left: 0;
 
-					.copy-text-wrapper {
-						display: none;
-					}
 					.copy-text-wrapper.resp {
 						display: inline-block;
-						margin-left: 0;
 					}
 				}
 			}
@@ -62,7 +66,7 @@
 		grid-template-columns: 1fr 1fr;
 		gap: 10px;
 
-		@media screen and (max-width: 900px) {
+		@media screen and (max-width: 800px) {
 			grid-template-columns: 1fr;
 		}
 
@@ -74,10 +78,10 @@
 			display: flex;
 			align-items: center;
 			height: 50px;
+		}
 
-			@media screen and (max-width: 900px) {
-				height: 37px;
-			}
+		.phone-input {
+			width: 200px !important;
 		}
 
 		b {
@@ -103,6 +107,12 @@
 	}
 }
 
+@media (max-width: 638px) {
+	.left {
+		flex-direction: column;
+	}
+}
+
 @media (max-width: 480px) {
 	.method {
 		.method-header {
@@ -111,10 +121,6 @@
 		.method-body {
 			padding: 18px 8px;
 		}
-
-		.left {
-			flex-direction: column;
-		}
 	}
 }
 
@@ -147,11 +153,12 @@
 }
 
 .not-verified {
-	border-radius: 22px;
+	border-radius: 16px;
 	border: 1px solid #d2d2d2;
 	background: #ececec;
-	font-size: 12px;
-	padding: 4px 10px;
+	font-size: 10px;
+	padding: 5px;
+
 	color: #252728;
 	text-align: center;
 }
@@ -174,7 +181,6 @@
 
 	&:hover {
 		text-decoration: underline;
-		font-weight: 500;
 	}
 }
 
@@ -208,7 +214,6 @@
 }
 
 .cancel {
-	margin: 0.25rem !important;
-	padding: 6px 12px !important;
+	padding: 7px 12px !important;
 	font-weight: 500;
 }
diff --git a/src/ui/styles/uikit.scss b/src/ui/styles/uikit.scss
@@ -275,7 +275,6 @@ button.button-error-outline {
 	margin: 0px;
 	color: var(--color-button-error);
 	@include gap-horizontal(8px);
-	font-size: inherit;
 	box-shadow: none;
 	transition: background-color 0.3s;