Merge pull request #140 from supertokens/ui/fixes

fix: Dashboard login methods issues and search UI

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.10.5] - 2024-03-19
+
+-   Fixes UI bugs on search and Login methods section in userDetails page.
+
 ## [0.10.4] - 2024-03-08
 
 -   Improves UX when deleting a user from the dashboard.

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dashboard",
-	"version": "0.10.4",
+	"version": "0.10.5",
 	"private": true,
 	"dependencies": {
 		"@babel/core": "^7.16.0",

src/ui/components/button/button.scss

@@ -21,6 +21,7 @@
 	border-radius: 6px;
 	font-family: inherit;
 	line-height: 21px;
+	flex-shrink: 0;
 
 	cursor: pointer;
 

src/ui/components/copyText/CopyText.scss

@@ -20,8 +20,13 @@
 	max-width: 100%;
 	.copy-text-text {
 		@include text-ellipsis(100%);
+		max-width: 180px;
 		flex: 1;
 		padding-right: 4px;
+
+		@media (max-width: 600px) {
+			max-width: 80px;
+		}
 	}
 	.copy-text-action {
 		cursor: pointer;

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}

src/ui/components/search/search.scss

@@ -2,17 +2,21 @@
 	& > div {
 		display: flex;
 		align-items: center;
-		gap: 8px;
+		gap: 0px 8px;
+		flex-wrap: wrap;
+
+		@media (max-width: 480px) {
+			& {
+				gap: 8px 8px;
+			}
+			& > button {
+				width: 100%;
+			}
+		}
 	}
 	#search-btn {
 		background: transparent;
 		justify-content: center;
-		@media screen and (max-width: 768px) {
-			& {
-				width: 30%;
-				margin-left: 0;
-			}
-		}
 	}
 
 	&__input_wrapper {
@@ -26,12 +30,6 @@
 		border: 1px solid #e5e5e5;
 		border-radius: 6px;
 
-		@media screen and (max-width: 768px) {
-			& {
-				width: 100%;
-			}
-		}
-
 		& img {
 			height: 14px;
 			aspect-ratio: 1;
@@ -73,6 +71,12 @@
 				padding-bottom: 0;
 			}
 		}
+
+		@media (max-width: 480px) {
+			& {
+				width: 100%;
+			}
+		}
 	}
 
 	@media (max-width: 486px) {

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 })}

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 {

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>
+	);
 };

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,17 @@
 				margin-left: 15px;
 				color: #6e6a65;
 
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+				gap: 6px;
+
 				.copy-text-wrapper {
 					border-radius: 3px;
 					border: 1px solid #d9d9d9;
 					color: #d65078;
 					font-size: 13px;
 					padding: 5px;
-					margin-left: 10px;
 				}
 			}
 
@@ -41,15 +50,12 @@
 
 			@media screen and (max-width: 900px) {
 				gap: 14px;
+				flex-direction: column;
 				.user-id-span {
 					margin-left: 0;
 
-					.copy-text-wrapper {
-						display: none;
-					}
 					.copy-text-wrapper.resp {
 						display: inline-block;
-						margin-left: 0;
 					}
 				}
 			}
@@ -62,7 +68,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 +80,10 @@
 			display: flex;
 			align-items: center;
 			height: 50px;
+		}
 
-			@media screen and (max-width: 900px) {
-				height: 37px;
-			}
+		.phone-input {
+			width: 200px !important;
 		}
 
 		b {
@@ -111,10 +117,6 @@
 		.method-body {
 			padding: 18px 8px;
 		}
-
-		.left {
-			flex-direction: column;
-		}
 	}
 }
 
@@ -147,11 +149,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 +177,6 @@
 
 	&:hover {
 		text-decoration: underline;
-		font-weight: 500;
 	}
 }
 
@@ -208,7 +210,6 @@
 }
 
 .cancel {
-	margin: 0.25rem !important;
-	padding: 6px 12px !important;
+	padding: 7px 12px !important;
 	font-weight: 500;
 }