feature: Login branding

limanmys · May 20, 2024 · 27d86d9 · 27d86d9
1 parent e632b17
commit 27d86d9
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 1 deletion.
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
@@ -1,7 +1,21 @@
+import { useEffect, useState } from "react"
+import { apiService } from "@/services"
+
 import { Icons } from "@/components/ui/icons"
 import { UserAuthForm } from "@/components/ui/user-auth-form"
 
 export default function AuthenticationPage() {
+  const [loginBranding, setLoginBranding] = useState<string>("")
+
+  useEffect(() => {
+    apiService
+      .getInstance()
+      .get("/auth/branding")
+      .then((res) => {
+        setLoginBranding(res.data.image)
+      })
+  }, [])
+
   return (
     <>
       <div className="container relative h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
@@ -16,7 +30,13 @@ export default function AuthenticationPage() {
             <Icons.dugumluLogo className="h-10 w-24 fill-white" />
           </div>
           <div className="relative z-20 mt-auto">
-            <Icons.aciklab className="h-12 w-64 fill-white" />
+            {!loginBranding && (
+              <Icons.aciklab className="h-12 w-64 fill-white" />
+            )}
+
+            {loginBranding && (
+              <img src={loginBranding} alt="Logo" className="max-h-32 w-auto" />
+            )}
           </div>
         </div>
         <div className="lg:p-8">

diff --git a/src/pages/settings/advanced/tweaks.tsx b/src/pages/settings/advanced/tweaks.tsx
@@ -9,6 +9,7 @@ import * as z from "zod"
 
 import { setFormErrors } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import PageHeader from "@/components/ui/page-header"
@@ -50,6 +51,7 @@ const AdvancedTweaksPage: NextPageWithLayout = () => {
     EXTENSION_DEVELOPER_MODE: z.boolean(),
     NEW_LOG_LEVEL: z.string(),
     LDAP_IGNORE_CERT: z.boolean(),
+    LOGIN_IMAGE: z.string().optional(),
   })
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -270,6 +272,50 @@ const AdvancedTweaksPage: NextPageWithLayout = () => {
               )}
             />
 
+            <FormField
+              control={form.control}
+              name="LOGIN_IMAGE"
+              render={({ field }) => (
+                <div className="flex flex-col gap-3">
+                  <Label htmlFor="LOGIN_IMAGE">Giriş Ekranı Marka Logosu</Label>
+                  <div className="relative">
+                    <Input
+                      id="LOGIN_IMAGE"
+                      type="file"
+                      accept="image/*"
+                      onChange={(e) => {
+                        const file = e.target.files?.[0]
+                        if (file) {
+                          const reader = new FileReader()
+                          reader.onloadend = () => {
+                            const base64Data = reader.result?.toString() || ""
+                            form.setValue("LOGIN_IMAGE", base64Data)
+                          }
+                          reader.readAsDataURL(file)
+                        } else {
+                          form.setValue("LOGIN_IMAGE", "")
+                        }
+                      }}
+                    />
+
+                    {field.value && (
+                      <Card className="mt-2 border-dashed">
+                        <img
+                          src={field.value}
+                          className="max-h-40 w-auto rounded-lg object-cover"
+                        />
+                      </Card>
+                    )}
+                  </div>
+                  <small className="-mt-2 italic text-muted-foreground">
+                    Giriş ekranında gösterilecek marka logosu. Maksimum 1MB
+                    boyutunda olmalıdır.
+                  </small>
+                  <FormMessage />
+                </div>
+              )}
+            />
+
             <FormField
               control={form.control}
               name="LDAP_IGNORE_CERT"