From 13128a8a90cad8416eae48501f58ae22cb139fee Mon Sep 17 00:00:00 2001
From: s33g <dev@charlie.fyi>
Date: Fri, 4 Apr 2025 01:03:00 +0100
Subject: [PATCH] Add logo to login screen

---
 web/src/assets/styles/index.css    | 13 +++++++++++++
 web/src/pages/auth/login/index.tsx | 19 +++++++++++++++----
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/web/src/assets/styles/index.css b/web/src/assets/styles/index.css
index 13050d8..ade9c50 100644
--- a/web/src/assets/styles/index.css
+++ b/web/src/assets/styles/index.css
@@ -21,3 +21,16 @@ html, body {
 ::-webkit-scrollbar-thumb:hover {
   background: #444;
 }
+
+.spin {
+animation: spin 1s linear;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/web/src/pages/auth/login/index.tsx b/web/src/pages/auth/login/index.tsx
index e3afdd8..a94a881 100644
--- a/web/src/pages/auth/login/index.tsx
+++ b/web/src/pages/auth/login/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, ReactElement } from 'react';
 import { LockOutlined, UserOutlined } from '@ant-design/icons';
 import { Button, Form, Input } from 'antd';
 import { useTranslation } from 'react-i18next';
@@ -11,7 +11,7 @@ import { Head } from '@/components/head.tsx';
 
 import { Tips } from './tips.tsx';
 
-export const Login = () => {
+export const Login = (): ReactElement => {
   const navigate = useNavigate();
   const { t } = useTranslation();
 
@@ -69,8 +69,19 @@ export const Login = () => {
           initialValues={{ remember: true }}
           onFinish={login}
         >
-          <h2 className="text-center text-xl font-semibold text-neutral-100">{t('auth.login')}</h2>
-
+          <div className="flex flex-col items-center justify-center pb-4">
+            <img
+              id="logo"
+              src="/sipeed.ico"
+              alt="Sipeed"
+              onClick={(evt) => {
+                evt.preventDefault();
+                (evt.target as HTMLImageElement).classList.add('animate-spin');
+                setTimeout(() => {
+                  (evt.target as HTMLImageElement).classList.remove('animate-spin');
+                }, 1000);
+              }} />
+          </div>
           <Form.Item
             name="username"
             rules={[{ required: true, message: t('auth.noEmptyUsername'), min: 1 }]}