diff --git a/.env.local b/.env.local new file mode 100644 index 0000000..34c8c52 --- /dev/null +++ b/.env.local @@ -0,0 +1 @@ +VITE_FIREBASE_CONFIG={"apiKey":"AIzaSyDPLT8GiDHDR1R4nI66Qi0BY1aYviDPioc","authDomain":"imex-dev.firebaseapp.com","databaseURL":"https://imex-dev.firebaseio.com","projectId":"imex-dev","storageBucket":"imex-dev.appspot.com","messagingSenderId":"759548147434","appId":"1:759548147434:web:e8239868a48ceb36700993","measurementId":"G-K5XRBVVB4S"} diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..5723d54 --- /dev/null +++ b/.env.production @@ -0,0 +1,5 @@ +KEY=123 # not available +MAIN_VITE_KEY=123 # only main process available +PRELOAD_VITE_KEY=123 # only preload scripts available +RENDERER_VITE_KEY=123 # only renderers available +VITE_KEY=123 # all available \ No newline at end of file diff --git a/.env.staging b/.env.staging new file mode 100644 index 0000000..e69de29 diff --git a/src/main/index.ts b/src/main/index.ts index 3fb666b..892ef99 100644 --- a/src/main/index.ts +++ b/src/main/index.ts @@ -1,5 +1,5 @@ import { electronApp, is, optimizer } from "@electron-toolkit/utils"; -import { app, BrowserWindow, shell } from "electron"; +import { app, BrowserWindow, shell, webContents } from "electron"; import log from "electron-log/main"; import { join } from "path"; import icon from "../../resources/icon.png?asset"; @@ -16,6 +16,7 @@ function createWindow(): void { webPreferences: { preload: join(__dirname, "../preload/index.js"), sandbox: false, + devTools: true, }, }); @@ -35,6 +36,9 @@ function createWindow(): void { } else { mainWindow.loadFile(join(__dirname, "../renderer/index.html")); } + if (import.meta.env.DEV) { + mainWindow.webContents.openDevTools(); + } } // This method will be called when Electron has finished diff --git a/src/renderer/index.html b/src/renderer/index.html index e198e05..027e508 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -4,10 +4,10 @@ Electron - + /> --> diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 9c0e89e..63c5fd8 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -1,7 +1,8 @@ -import ipcTypes from "../../util/ipcTypes.json"; -import electronLogo from "./assets/electron.svg"; -import Versions from "./components/Versions"; +import { Button } from "antd"; import log from "electron-log/renderer"; +import ipcTypes from "../../util/ipcTypes.json"; +import SignInForm from "./components/SignInForm/SignInForm"; +import Versions from "./components/Versions"; function App(): JSX.Element { const ipcHandle = (): void => window.electron.ipcRenderer.send("ping"); @@ -11,31 +12,12 @@ function App(): JSX.Element { }; return ( <> - logo -
Powered by electron-vite
-
- Build an Electron app with React -  and TypeScript -
-

- Please try pressing F12 to open the devTool -

-
-
- - Documentation - -
-
- - Send IPC - - - Send IPC written by me. - -
-
+ + + + {import.meta.env.VITE_FIREBASE_CONFIG} + ); } diff --git a/src/renderer/src/assets/base.css b/src/renderer/src/assets/base.css deleted file mode 100644 index 5ed6406..0000000 --- a/src/renderer/src/assets/base.css +++ /dev/null @@ -1,67 +0,0 @@ -:root { - --ev-c-white: #ffffff; - --ev-c-white-soft: #f8f8f8; - --ev-c-white-mute: #f2f2f2; - - --ev-c-black: #1b1b1f; - --ev-c-black-soft: #222222; - --ev-c-black-mute: #282828; - - --ev-c-gray-1: #515c67; - --ev-c-gray-2: #414853; - --ev-c-gray-3: #32363f; - - --ev-c-text-1: rgba(255, 255, 245, 0.86); - --ev-c-text-2: rgba(235, 235, 245, 0.6); - --ev-c-text-3: rgba(235, 235, 245, 0.38); - - --ev-button-alt-border: transparent; - --ev-button-alt-text: var(--ev-c-text-1); - --ev-button-alt-bg: var(--ev-c-gray-3); - --ev-button-alt-hover-border: transparent; - --ev-button-alt-hover-text: var(--ev-c-text-1); - --ev-button-alt-hover-bg: var(--ev-c-gray-2); -} - -:root { - --color-background: var(--ev-c-black); - --color-background-soft: var(--ev-c-black-soft); - --color-background-mute: var(--ev-c-black-mute); - - --color-text: var(--ev-c-text-1); -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - font-weight: normal; -} - -ul { - list-style: none; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/renderer/src/assets/electron.svg b/src/renderer/src/assets/electron.svg deleted file mode 100644 index 45ef09c..0000000 --- a/src/renderer/src/assets/electron.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css deleted file mode 100644 index 0179fc4..0000000 --- a/src/renderer/src/assets/main.css +++ /dev/null @@ -1,171 +0,0 @@ -@import './base.css'; - -body { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - background-image: url('./wavy-lines.svg'); - background-size: cover; - user-select: none; -} - -code { - font-weight: 600; - padding: 3px 5px; - border-radius: 2px; - background-color: var(--color-background-mute); - font-family: - ui-monospace, - SFMono-Regular, - SF Mono, - Menlo, - Consolas, - Liberation Mono, - monospace; - font-size: 85%; -} - -#root { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - margin-bottom: 80px; -} - -.logo { - margin-bottom: 20px; - -webkit-user-drag: none; - height: 128px; - width: 128px; - will-change: filter; - transition: filter 300ms; -} - -.logo:hover { - filter: drop-shadow(0 0 1.2em #6988e6aa); -} - -.creator { - font-size: 14px; - line-height: 16px; - color: var(--ev-c-text-2); - font-weight: 600; - margin-bottom: 10px; -} - -.text { - font-size: 28px; - color: var(--ev-c-text-1); - font-weight: 700; - line-height: 32px; - text-align: center; - margin: 0 10px; - padding: 16px 0; -} - -.tip { - font-size: 16px; - line-height: 24px; - color: var(--ev-c-text-2); - font-weight: 600; -} - -.react { - background: -webkit-linear-gradient(315deg, #087ea4 55%, #7c93ee); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-weight: 700; -} - -.ts { - background: -webkit-linear-gradient(315deg, #3178c6 45%, #f0dc4e); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - font-weight: 700; -} - -.actions { - display: flex; - padding-top: 32px; - margin: -6px; - flex-wrap: wrap; - justify-content: flex-start; -} - -.action { - flex-shrink: 0; - padding: 6px; -} - -.action a { - cursor: pointer; - text-decoration: none; - display: inline-block; - border: 1px solid transparent; - text-align: center; - font-weight: 600; - white-space: nowrap; - border-radius: 20px; - padding: 0 20px; - line-height: 38px; - font-size: 14px; - border-color: var(--ev-button-alt-border); - color: var(--ev-button-alt-text); - background-color: var(--ev-button-alt-bg); -} - -.action a:hover { - border-color: var(--ev-button-alt-hover-border); - color: var(--ev-button-alt-hover-text); - background-color: var(--ev-button-alt-hover-bg); -} - -.versions { - position: absolute; - bottom: 30px; - margin: 0 auto; - padding: 15px 0; - font-family: 'Menlo', 'Lucida Console', monospace; - display: inline-flex; - overflow: hidden; - align-items: center; - border-radius: 22px; - background-color: #202127; - backdrop-filter: blur(24px); -} - -.versions li { - display: block; - float: left; - border-right: 1px solid var(--ev-c-gray-1); - padding: 0 20px; - font-size: 14px; - line-height: 14px; - opacity: 0.8; - &:last-child { - border: none; - } -} - -@media (max-width: 720px) { - .text { - font-size: 20px; - } -} - -@media (max-width: 620px) { - .versions { - display: none; - } -} - -@media (max-width: 350px) { - .tip, - .actions { - display: none; - } -} diff --git a/src/renderer/src/assets/wavy-lines.svg b/src/renderer/src/assets/wavy-lines.svg deleted file mode 100644 index d08c611..0000000 --- a/src/renderer/src/assets/wavy-lines.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/renderer/src/components/SignInForm/SignInForm.tsx b/src/renderer/src/components/SignInForm/SignInForm.tsx new file mode 100644 index 0000000..bf27878 --- /dev/null +++ b/src/renderer/src/components/SignInForm/SignInForm.tsx @@ -0,0 +1,85 @@ +import { auth } from "@renderer/util/firebase"; +import type { FormProps } from "antd"; +import { Button, Checkbox, Form, Input } from "antd"; +import log from "electron-log/renderer"; +import { signInWithEmailAndPassword } from "firebase/auth"; +import errorTypeCheck from "../../../../util/errorTypeCheck"; + +type SignInFormProps = {}; + +type FieldType = { + username: string; + password: string; + remember?: string; +}; + +const SignInForm: React.FC = ({}) => { + const onFinish: FormProps["onFinish"] = async (values) => { + log.info("Form submitted successfully:", values); + const { username, password } = values; + try { + const result = await signInWithEmailAndPassword(auth, username, password); + log.debug("Login result", result); + } catch (error) { + log.error("Login error", errorTypeCheck(error)); + } + }; + + const onFinishFailed: FormProps["onFinishFailed"] = ( + errorInfo + ) => { + log.log("Failed:", errorInfo); + }; + + return ( +
+ + label="Username" + name="username" + rules={[{ required: true, message: "Please input your username!" }]} + > + + + + label="Password" + name="password" + rules={[{ required: true, message: "Please input your password!" }]} + > + + + + name="remember" + valuePropName="checked" + label={null} + > + Remember me + + + + + + + ); +}; +export default SignInForm; diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx index f4d40c7..3fd3a69 100644 --- a/src/renderer/src/main.tsx +++ b/src/renderer/src/main.tsx @@ -1,11 +1,9 @@ -import './assets/main.css' +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' - -ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( -) +); diff --git a/src/renderer/src/util/firebase.ts b/src/renderer/src/util/firebase.ts new file mode 100644 index 0000000..10f885c --- /dev/null +++ b/src/renderer/src/util/firebase.ts @@ -0,0 +1,10 @@ +import { initializeApp } from "firebase/app"; +import { getAuth, updatePassword, updateProfile } from "firebase/auth"; + +// TODO: Replace the following with your app's Firebase project configuration +const firebaseConfig = JSON.parse(import.meta.env.VITE_FIREBASE_CONFIG); + +const app = initializeApp(firebaseConfig); +export const auth = getAuth(); + +export default app; diff --git a/src/util/errorTypeCheck.ts b/src/util/errorTypeCheck.ts index cd47aa8..3d65c0e 100644 --- a/src/util/errorTypeCheck.ts +++ b/src/util/errorTypeCheck.ts @@ -1,4 +1,4 @@ -function ErrorTypeCheck(passedError: any): ParsedError { +function errorTypeCheck(passedError: any): ParsedError { const errorMessage = passedError instanceof Error ? passedError.message : String(passedError); const errorStack = @@ -9,7 +9,7 @@ function ErrorTypeCheck(passedError: any): ParsedError { stack: errorStack, }; } -export default ErrorTypeCheck; +export default errorTypeCheck; interface ParsedError { message: string;