implements sign-in and sign-out

Author: raduwen

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true

database.rules.json

@@ -1,6 +1,6 @@
 {
   "rules": {
     ".read": true,
-    ".write": false,
+    ".write": "auth != null"
   }
-}
+}

package.json

@@ -15,9 +15,12 @@
   "dependencies": {
     "firebase": "^8.6.2",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.0"
   },
   "devDependencies": {
+    "@firebase/app-types": "^0.6.3",
+    "@firebase/auth-types": "^0.10.3",
     "@firebase/database-types": "^0.7.2",
     "@types/node": "^14.17.1",
     "@types/react": "^17.0.2",
@@ -27,5 +30,8 @@
     "typescript": "^4.3.2",
     "vite": "^2.4.4",
     "vite-tsconfig-paths": "^3.3.13"
+  },
+  "resolutions": {
+    "styled-components": "^5"
   }
 }

src/components/App.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import '@/global.css';
+import { Preview } from '@/components/Preview'
+import { Index as Admin } from '@/components/admin'
+
+const App = () => {
+  const params = new URLSearchParams(location.search);
+
+  const mode = params.get('mode') || 'preview';
+
+  const Component = mode === 'preview' ? Preview :
+                    mode === 'admin' ? Admin : <></>;
+
+  return (
+    <Component />
+  );
+};
+
+export { App };

src/components/Preview.tsx

@@ -0,0 +1,29 @@
+import React, { VFC } from 'react';
+
+import { TextWidget } from '@/components/TextWidget';
+import { TimeWidget } from '@/components/TimeWidget';
+
+const Widgets = {
+  'text': TextWidget,
+  'time': TimeWidget,
+};
+
+const Preview: VFC = () => {
+  const text = `オレオレOBSウィジェットの整理`;
+
+  const widgets = [
+    { name: 'text', props: { text: text } },
+    { name: 'time', props: { size: 30 } },
+  ];
+
+  return (
+    <div>
+      {widgets.map((widget) => {
+        const Widget = Widgets[widget.name];
+        return <Widget {...widget.props} />
+      })}
+    </div>
+  );
+};
+
+export { Preview };

src/components/admin/SignInForm/index.tsx

@@ -0,0 +1,76 @@
+import React, { VFC, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { auth } from '@/lib/firebase';
+
+const Button = styled.button`
+  padding: 0.5rem 1rem;
+  color: #fff;
+  background-color: #33bbff;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  &:hover {
+    background-color: #1188dd;
+  }
+`;
+
+const FormGroup = styled.div`
+  display: flex;
+  margin-bottom: 1rem;
+  width: 480px;
+  & > label {
+    width: 20%;
+  }
+  & > input {
+    flex-grow: 1;
+  }
+`;
+
+const Input = styled.input`
+  outline: 1px solid #eee;
+  padding: 0.25rem 0.5rem;
+`;
+
+type SignInFormProps = {
+  redirectTo: string;
+};
+
+const SignInForm: VFC<SignInFormProps> = ({ redirectTo }) => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const signin = async (e: React.SyntheticEvent) => {
+    e.preventDefault();
+    try {
+      await auth.signInWithEmailAndPassword(email, password);
+    } catch (err) {
+      alert(err.message);
+    }
+  }
+
+  return (
+    <form onSubmit={signin}>
+      <FormGroup>
+        <label>Email</label>
+        <Input
+          type="email"
+          placeholder="example@example.com"
+          onChange={(e) => setEmail(e.target.value)}
+        />
+      </FormGroup>
+      <FormGroup>
+        <label>Password</label>
+        <Input
+          type="password"
+          onChange={(e) => setPassword(e.target.value)}
+        />
+      </FormGroup>
+      <div>
+        <Button type="submit">
+          Sign In
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+export { SignInForm };

src/components/admin/index.tsx

@@ -0,0 +1,37 @@
+import React, { VFC, useEffect, useState } from 'react';
+import { User } from '@firebase/auth-types';
+
+import { AuthProvider } from '@/lib/AuthProvider';
+import { auth } from '@/lib/firebase';
+import { Signin } from "@/components/admin/signin";
+
+const Index: VFC = () => {
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    auth.onAuthStateChanged((user) => {
+      setCurrentUser(user);
+    });
+  });
+
+  const signout = async () => {
+    try {
+      await auth.signOut();
+    } catch (err) {
+      alert(err.message);
+    }
+  };
+
+  return currentUser !== null ? (
+       <AuthProvider>
+        <h1>Admin</h1>
+        <div>{currentUser?.displayName}</div>
+        <button onClick={signout}>Sign Out</button>
+      </AuthProvider>
+    ) : (
+      <Signin />
+    )
+  ;
+};
+
+export { Index };

src/components/admin/signin.tsx

@@ -0,0 +1,47 @@
+import React, { VFC } from 'react';
+import styled from 'styled-components';
+
+import { SignInForm } from "@/components/admin/SignInForm";
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  height: 100vh;
+  background-color: #444;
+`;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin: 4rem auto;
+  padding: 2rem;
+  width: 640px;
+  max-width: 640px;
+  height: 320px;
+  background-color: #fff;
+  border-radius: 0.25rem;
+  box-shadow: 0px 0px 0.5rem 0.25rem rgb(0 0 0 / 10%);
+`;
+
+const H1 = styled.div`
+  margin-bottom: 2rem;
+  font-size: 2rem;
+  font-weight: bold;
+  line-height: 4rem;
+`;
+
+const Signin: VFC = () => {
+  return (
+    <Wrapper>
+      <Container>
+        <H1>Sign In</H1>
+        <SignInForm redirectTo="/admin" />
+      </Container>
+    </Wrapper>
+  );
+};
+
+export { Signin };

src/lib/AuthProvider.tsx

@@ -0,0 +1,27 @@
+import { User } from '@firebase/auth-types';
+import React, { FC, createContext, useEffect, useState } from 'react';
+import { auth } from '@/lib/firebase';
+
+type AuthContextProps = {
+  currentUser: User | null | undefined;
+};
+
+const AuthContext = createContext<AuthContextProps>({ currentUser: undefined });
+
+const AuthProvider: FC = ({ children }) => {
+  const [currentUser, setCurrentUser] = useState<User | null | undefined>(undefined);
+
+  useEffect(() => {
+    auth.onAuthStateChanged((user) => {
+      setCurrentUser(user);
+    });
+  });
+
+  return (
+    <AuthContext.Provider value={{ currentUser }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export { AuthProvider };

src/lib/firebase.ts

@@ -0,0 +1,27 @@
+import 'firebase/auth';
+import firebase from 'firebase/app';
+
+const config = {
+  apiKey: import.meta.env.VITE_FIREBASE_KEY,
+  authDomain: import.meta.env.VITE_FIREBASE_DOMAIN,
+  databaseURL: import.meta.env.VITE_FIREBASE_DATABASE,
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_SENDER_ID,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
+};
+
+let auth;
+if (firebase.apps.length === 0) {
+  firebase.initializeApp(config);
+  auth = firebase.app().auth();
+  if (import.meta.env.VITE_FIREBASE_AUTH_EMULATOR_HOST) {
+    auth.useEmulator(
+      `http://${import.meta.env.VITE_FIREBASE_AUTH_EMULATOR_HOST}`
+    );
+  }
+}
+
+// TODO: use database emulator
+
+export { auth };