Merge pull request #37 from FalkorDB/staging

add masked password and defualt submit

app/components/combobox.tsx

@@ -39,7 +39,12 @@ export function Combobox(props: {
  }
  props.options.push(inputRef.current.value)
  props.addOption(props.options)
+ }
 
+ function handleKeyDown(event: any) {
+ if (event.key === "Enter") {
+ onAddOption(event);
+ }
  }
 
  const entityType = props.type ?? ""
@@ -92,7 +97,7 @@ export function Combobox(props: {
  <DialogHeader>
  <DialogTitle>Create a new {entityType}?</DialogTitle>
  <DialogDescription>
- <Input type="text" ref={inputRef} id="create" name="create" placeholder={`${entityType} name ...`} />
+ <Input type="text" ref={inputRef} id="create" name="create" onKeyDown={handleKeyDown} placeholder={`${entityType} name ...`} />
  </DialogDescription>
  </DialogHeader>
  <Button className="rounded-full bg-blue-600 p-4 text-slate-50" type="submit" onClick={onAddOption}>Create</Button>

app/page.tsx

@@ -5,7 +5,7 @@ export default function Page() {
  <main className="flex flex-col items-center justify-center flex-1 px-20 text-center">
  <h1 className="text-6xl font-bold">
  Welcome to{' '}
- <a className="text-blue-600" href="/sandbox">
+ <a className="text-blue-600 underline underline-offset-2" href="/sandbox">
  FalkorDB Cloud
  </a>
  </h1>

app/sandbox/CypherInput.tsx

@@ -50,7 +50,12 @@ export function CypherInput(props: { graphs: string[], onSubmit: (graph: string,
  const [graphs, addGraph] = useState(props.graphs);
 
  // A function that handles the change event of the input box
- function handleChange(event: any) {
+ async function handleChange(event: any) {
+
+ if (event.key === "Enter") {
+ await handleSubmit(event);
+ }
+
  // Get the new value of the input box
  const value = event.target.value;
 
@@ -72,13 +77,14 @@ export function CypherInput(props: { graphs: string[], onSubmit: (graph: string,
  setResults(newResults.data?? [])
  }
  }
+
  // Return the JSX element that renders the input box and a submit button
  return (
  <>
  <Combobox type={"Graph"} options={graphs} addOption={addGraph} selectedValue={selectedValue} setSelectedValue={setSelectedValue}/>
  <form className="flex items-center py-4 space-x-4" onSubmit={handleSubmit}>
  <Label htmlFor="cypher">Query:</Label>
- <Input type="text" id="cypher" name="cypher" value={query} onChange={handleChange} />
+ <Input className='w-[50vw]' type="text" id="cypher" name="cypher" value={query} onChange={handleChange}/>
  <Button className="rounded-full bg-blue-600 p-2 text-slate-50" type="submit">Send</Button>
  </form>
  {/* Show an error message if the query is invalid */}

app/sandbox/DatabaseDetails.tsx

@@ -8,6 +8,7 @@ export function DatabaseDetails(props: { sandbox: Sandbox, onDelete: () => void
 
  let sandbox = props.sandbox
  let redisURL = `redis://${sandbox.password}@${sandbox.host}:${sandbox.port}`
+ let redisURLMasked = `redis://********@${sandbox.host}:${sandbox.port}`
  return (
  <>
  <Dialog>
@@ -27,8 +28,8 @@ export function DatabaseDetails(props: { sandbox: Sandbox, onDelete: () => void
  </Dialog>
  <DatabaseLine label="Host" value={sandbox.host} />
  <DatabaseLine label="Port" value={sandbox.port.toString()} />
- <DatabaseLine label="Password" value={sandbox.password} />
- <DatabaseLine label="Redis URL" value={redisURL} />
+ <DatabaseLine label="Password" value={sandbox.password} masked="********"/>
+ <DatabaseLine label="Redis URL" value={redisURL} masked={redisURLMasked}/>
  </>
  );
 }

app/sandbox/DatabaseLine.tsx

@@ -1,11 +1,11 @@
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
 import { useToast } from "@/components/ui/use-toast"
-import { Sandbox } from "@/app/api/db/sandbox";
+import { useState } from "react";
 
-export function DatabaseLine(props: { label: string, value: string }) {
+export function DatabaseLine(props: { label: string, value: string, masked?: string }) {
 
  const { toast } = useToast()
+ const [showPassword, setShowPassword] = useState(false);
 
  function copyToClipboard(event: any) {
  navigator.clipboard.writeText(event.target.innerText)
@@ -15,9 +15,13 @@ export function DatabaseLine(props: { label: string, value: string }) {
  })
  }
 
+ function showMasked() {
+ setShowPassword(!showPassword)
+ }
+
  return (
  <div>{props.label}: <Button className="bg-transparent text-blue-600 p-2 hover:text-slate-50" onClick={copyToClipboard}>
- {props.value}&ensp;
+ {(showPassword || !props.masked) ? props.value : props.masked}&ensp;
  <svg
  className=" h-4 w-4"
  fill="none"
@@ -33,6 +37,26 @@ export function DatabaseLine(props: { label: string, value: string }) {
  <rect height="14" rx="2" ry="2" width="14" x="8" y="8" />
  <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
  </svg>
- </Button></div>
+ </Button>
+ {props.masked &&
+ <Button className="bg-transparent text-blue-600 p-2 hover:text-slate-50" onClick={showMasked}> 
+ <svg
+ className=" h-4 w-4"
+ fill="none"
+ height="24"
+ stroke="currentColor"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ strokeWidth="2"
+ viewBox="0 0 24 24"
+ width="24"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+ <circle cx="12" cy="12" r="3" />
+ </svg>
+ </Button>
+ }
+ </div>
  );
 }