@learnpack/learnpack 5.0.53 → 5.0.57

package/src/creator/src/components/Login.tsx

@@ -0,0 +1,263 @@
+import { useEffect, useState } from "react"
+import { BREATHECODE_HOST, RIGOBOT_HOST } from "../utils/constants"
+import { SVGS } from "../assets/svgs"
+import toast from "react-hot-toast"
+import useStore from "../utils/store"
+import { useShallow } from "zustand/react/shallow"
+
+type LoginInfo = {
+  email: string
+  password: string
+}
+
+const checkParams = () => {
+  const urlParams = new URLSearchParams(window.location.search)
+  const token = urlParams.get("token")
+
+  return { token }
+}
+
+const getRigobotJSON = async (breathecodeToken: string) => {
+  const rigoUrl = `${RIGOBOT_HOST}/v1/auth/me/token?breathecode_token=${breathecodeToken}`
+  const rigoResp = await fetch(rigoUrl)
+  if (!rigoResp.ok) {
+    throw new Error("Unable to obtain Rigobot token")
+  }
+  const rigobotJson = await rigoResp.json()
+  return rigobotJson
+}
+const validateUser = async (breathecodeToken: string) => {
+  const config = {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Token ${breathecodeToken}`,
+    },
+  }
+
+  const res = await fetch(`${BREATHECODE_HOST}/v1/auth/user/me`, config)
+  if (!res.ok) {
+    console.log("ERROR", res)
+    return null
+  }
+  const json = await res.json()
+
+  if ("roles" in json) {
+    delete json.roles
+  }
+  if ("permissions" in json) {
+    delete json.permissions
+  }
+  if ("settings" in json) {
+    delete json.settings
+  }
+
+  return json
+}
+
+const login4Geeks = async (loginInfo: LoginInfo) => {
+  const url = `${BREATHECODE_HOST}/v1/auth/login/`
+
+  const res = await fetch(url, {
+    body: JSON.stringify(loginInfo),
+    method: "post",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+
+  if (!res.ok) {
+    throw Error("Unable to login with provided credentials")
+  }
+
+  const json = await res.json()
+
+  const rigoJson = await getRigobotJSON(json.token)
+
+  const user = await validateUser(json.token)
+  const returns = { ...json, rigobot: { ...rigoJson }, user }
+
+  return returns
+}
+
+const loginWithToken = async (token: string) => {
+  const rigoJson = await getRigobotJSON(token)
+
+  const user = await validateUser(token)
+
+  const returns = { rigobot: { ...rigoJson }, ...user }
+
+  return returns
+}
+
+export default function Login({ onFinish }: { onFinish: () => void }) {
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+
+  const [showForm, setShowForm] = useState(false)
+
+  const { setAuth } = useStore(
+    useShallow((state) => ({
+      setAuth: state.setAuth,
+    }))
+  )
+
+  const login = async (e: any) => {
+    setIsLoading(true)
+
+    const tid = toast.loading("Logging in...")
+    e.preventDefault()
+
+    if (!email || !password) {
+      //   toast.error(t("please-fill-all-fields"))
+      setIsLoading(false)
+      return
+    }
+
+    const isLoggedId = await login4Geeks({
+      email: email,
+      password: password,
+    })
+
+    if (!isLoggedId) {
+      setIsLoading(false)
+      toast.error("Unable to login with provided credentials", { id: tid })
+      return
+    }
+
+    toast.success("Logged in successfully", { id: tid })
+
+    setAuth({
+      bcToken: isLoggedId.token,
+      userId: isLoggedId.user.id,
+      rigoToken: isLoggedId.rigobot.key,
+    })
+    setIsLoading(false)
+    onFinish()
+  }
+
+  function stringToBase64(str: string) {
+    return btoa(unescape(encodeURIComponent(str)))
+  }
+
+  function getCurrentUrlWithQueryParams() {
+    // let currentUrl = window.location.origin + window.location.pathname
+
+    return window.location.href
+  }
+
+  const redirectGithub = () => {
+    let currentUrl = getCurrentUrlWithQueryParams()
+
+    window.location.href = `${BREATHECODE_HOST}/v1/auth/github/?url=${stringToBase64(
+      currentUrl
+    )}`
+  }
+
+  useEffect(() => {
+    verifySession()
+  }, [])
+
+  const verifySession = async () => {
+    const { token } = checkParams()
+    if (token) {
+      const user = await loginWithToken(token)
+
+      if (user) {
+        setAuth({
+          bcToken: token,
+          userId: user.id,
+          rigoToken: user.rigobot.key,
+        })
+        onFinish()
+      }
+    }
+  }
+
+  return (
+    <>
+      <div className="max-w-sm mx-auto mt-10 bg-white p-8 rounded-xl shadow-md text-center">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-semibold">Login</h2>
+          <div className="bg-blue-50 text-sm p-2 rounded text-left">
+            <p className="text-gray-700 m-0">You don't have an account?</p>
+            <a
+              href="https://4geeks.com/pricing?plan=basic"
+              className="text-blue-600 font-medium"
+            >
+              Register here.
+            </a>
+          </div>
+        </div>
+
+        <p className="text-gray-600 mb-6">
+          Log in to 4Geeks to get performance statistics, access to our AI
+          mentor, and many other benefits
+        </p>
+
+        <button
+          onClick={redirectGithub}
+          className="w-full border border-gray-300 py-2 rounded-md font-semibold flex items-center justify-center gap-2 mb-4"
+        >
+          {SVGS.github}
+          LOGIN WITH GITHUB
+        </button>
+
+        <div className="flex items-center mb-4">
+          <hr className="flex-grow border-gray-300" />
+          <span className="mx-2 text-gray-400 text-sm">or</span>
+          <hr className="flex-grow border-gray-300" />
+        </div>
+
+        {showForm ? (
+          <form className="space-y-3" onSubmit={login}>
+            <input
+              type="email"
+              placeholder="Email"
+              className="w-full border border-gray-300 px-3 py-2 rounded-md"
+              onChange={(e) => setEmail(e.target.value)}
+            />
+            <input
+              type="password"
+              placeholder="Password"
+              className="w-full border border-gray-300 px-3 py-2 rounded-md"
+              onChange={(e) => setPassword(e.target.value)}
+            />
+            <div className="flex gap-2 mt-4">
+              <button
+                type="submit"
+                className="flex-1 bg-sky-500 text-white py-2 rounded-md font-semibold"
+              >
+                {isLoading ? "Logging in..." : "Log in"}
+              </button>
+              <button
+                type="button"
+                onClick={() => setShowForm(false)}
+                className="flex-1 border border-sky-500 text-sky-600 py-2 rounded-md font-semibold"
+              >
+                Skip
+              </button>
+            </div>
+            <div className="text-sm text-gray-600 mt-2">
+              Forgot your password?{" "}
+              <a
+                href={`${BREATHECODE_HOST}/v1/auth/password/reset?url=${getCurrentUrlWithQueryParams()}`}
+                className="text-sky-600 font-medium"
+              >
+                Recover it here.
+              </a>
+            </div>
+          </form>
+        ) : (
+          <button
+            onClick={() => setShowForm(true)}
+            className="w-full bg-blue-600 text-white py-2 rounded-md font-semibold"
+          >
+            Login with Email
+          </button>
+        )}
+      </div>
+    </>
+  )
+}

package/src/creator/src/components/SelectableCard.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+
+interface SelectableCardProps {
+  title: string
+  subtitle?: string
+  selected?: boolean
+  onClick: () => void
+}
+
+const SelectableCard: React.FC<SelectableCardProps> = ({
+  title,
+  selected = false,
+  subtitle = "",
+  onClick,
+}) => {
+  return (
+    <div
+      className={`cursor-pointer bg-white rounded-lg shadow-md p-6 text-center transition-all 
+        hover:shadow-lg border-2 ${
+          selected ? "border-blue-500" : "border-transparent"
+        }`}
+      onClick={onClick}
+    >
+      <p className="text-md font-medium">{title}</p>
+      {subtitle && <p className="text-sm text-gray-600">{subtitle}</p>}
+    </div>
+  )
+}
+
+export default SelectableCard

package/src/creator/src/components/StepWizard.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from "react"
+
+export type Step = {
+  title: string
+  subtitle?: string
+  content: React.ReactNode
+}
+
+type Props = {
+  steps: Step[]
+  initialStep?: number
+}
+
+const StepWizard: React.FC<Props> = ({ steps, initialStep = 0 }) => {
+  const [currentStep, setCurrentStep] = useState(initialStep)
+  const totalSteps = steps.length
+
+  const goNext = () => {
+    if (currentStep < totalSteps - 1) setCurrentStep((s) => s + 1)
+  }
+
+  const goBack = () => {
+    if (currentStep > 0) setCurrentStep((s) => s - 1)
+  }
+
+  useEffect(() => {
+    setCurrentStep(initialStep)
+  }, [initialStep])
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center  text-center px-4">
+      <div className=" rounded-xl  p-8 w-full max-w-xl">
+        <h5 className="text-sm text-blue-400 uppercase mb-2">
+          {steps[currentStep].subtitle || "Setting up your tutorial"}
+        </h5>
+        <h2 className="text-lg font-medium mb-6">
+          <span className="text-blue-600 mr-1">{currentStep + 1}.</span>
+          {steps[currentStep].title}
+        </h2>
+
+        <div className="mb-6">{steps[currentStep].content}</div>
+
+        {/* Dot Indicators */}
+        <div className="flex justify-center mb-4 space-x-2">
+          {steps.map((_, i) => (
+            <span
+              key={i}
+              className={`h-2 w-2 rounded-full ${
+                i === currentStep ? "bg-blue-600" : "bg-gray-300"
+              }`}
+            />
+          ))}
+        </div>
+
+        {/* Navigation */}
+        <div className="flex justify-between">
+          <button
+            onClick={goBack}
+            disabled={currentStep === 0}
+            className="text-sm text-gray-500 hover:text-gray-900 disabled:opacity-40"
+          >
+            ⬅ Back
+          </button>
+          <button
+            onClick={goNext}
+            disabled={currentStep === totalSteps - 1}
+            className="text-sm text-blue-600 hover:text-blue-800 disabled:opacity-40"
+          >
+            Next ➡
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default StepWizard