Merge pull request #47 from ricardo-campos-org/feat/33-from-docker-to-github-registry

feat: change to ghcr

.github/workflows/pr.yml

@@ -35,17 +35,20 @@ jobs:
       - uses: actions/checkout@v4
       - uses: docker/setup-buildx-action@v3
         name: Set up Docker Buildx
+
       - uses: docker/login-action@v3
-        name: Login to Docker Hub
+        name: Login to GitHub Container Registry
         with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Build and push
         uses: docker/build-push-action@v6
         with:
           push: true
           context: ./client
-          tags: rmcampos/tasknote:${{ github.event.number }}
+          tags: ghcr.io/ricardo-campos-org/react-typescript-todolist/client:${{ github.event.number }}
           build-args: BUILD=${{ github.event.number }}
           cache-from: type=gha
           cache-to: type=gha,mode=max

.gitignore

@@ -1,16 +1,16 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
-/.pnp
-.pnp.js
+client/node_modules
+client/.pnp
+client.pnp.js
 
 # testing
-/coverage
+client/coverage
 
 # production
-/build
-/dist
+client/build
+client/dist
 
 # misc
 .DS_Store

client/src/App.tsx

@@ -11,14 +11,23 @@ import Layout from './layout/PrivateLayout';
 import browserRoutes from './routes';
 import NotFound from './views/NotFound';
 import AuthContext from './context/AuthContext';
+import Login from './views/Login';
 
 const App: React.FC = () => {
   const { signed, checkCurrentAuthUser } = useContext(AuthContext);
 
   const notSignedRouter = createBrowserRouter([
     {
-      path: '*',
+      path: '/',
       element: <Landing />
+    },
+    {
+      path: '/signin',
+      element: <Login />
+    },
+    {
+      path: '*',
+      element: <NotFound />
     }
   ]);
 

client/src/views/Landing/index.tsx

@@ -1,22 +1,22 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Button } from 'react-bootstrap';
 import './styles.scss';
-import AuthContext from '../../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
 
 /**
  *
  */
 function Landing() {
-  const { signIn } = useContext(AuthContext);
+  const navigate = useNavigate();
 
   return (
     <>
       <h1>This is landing page</h1>
       <Button
         type="button"
-        onClick={() => signIn()}
+        onClick={() => navigate('/signin')}
       >
-        Login
+        SignIn
       </Button>
     </>
   );

client/src/views/Login/index.tsx

@@ -0,0 +1,108 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { FeedbackType } from 'react-bootstrap/esm/Feedback';
+import AuthContext from '../../context/AuthContext';
+
+/**
+ * Created the Login component.
+ */
+function Login() {
+  const { signIn } = useContext(AuthContext);
+  const [validated, setValidated] = useState<boolean>(true);
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [emailValidType, setEmailValidType] = useState<FeedbackType | undefined>('valid');
+  const [emailValidMsg, setEmailValidMsg] = useState<string>('Looks good!');
+  const [passwordValidType, setPasswordValidType] = useState<FeedbackType | undefined>('valid');
+  const [passwordValidMsg, setPasswordValidMsg] = useState<string>('Looks good!');
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setValidated(true);
+
+    const form = event.currentTarget;
+    if (form.checkValidity() === false) {
+      if (email.length === 0) {
+        setEmailValidType('invalid');
+        setEmailValidMsg('Please type your email!');
+      } else {
+        setEmailValidType('valid');
+        setEmailValidMsg('Looks good!');
+      }
+
+      if (password.length === 0) {
+        setPasswordValidType('invalid');
+        setPasswordValidMsg('Please type your password!');
+      } else {
+        setPasswordValidType('valid');
+        setPasswordValidMsg('Looks good!');
+      }
+
+      return;
+    }
+
+    setEmailValidType('valid');
+    setEmailValidMsg('Looks good!');
+
+    setPasswordValidType('valid');
+    setPasswordValidMsg('Looks good!');
+    signIn();
+  };
+
+  const resetForm = () => {
+    setValidated(false);
+    setEmail('');
+    setEmailValidType('valid');
+    setPassword('');
+    setPasswordValidType('valid');
+  };
+
+  useEffect(() => {}, [validated]);
+
+  return (
+    <>
+      <h1>This is login page</h1>
+      <Form noValidate validated={validated} onSubmit={handleSubmit}>
+        <Form.Group className="mb-3" controlId="formBasicEmail">
+          <Form.Label>Email address</Form.Label>
+          <Form.Control
+            required
+            type="email"
+            placeholder="Enter email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            isInvalid={emailValidType === 'invalid'}
+          />
+          <Form.Control.Feedback type={emailValidType}>
+            {emailValidMsg}
+          </Form.Control.Feedback>
+        </Form.Group>
+
+        <Form.Group className="mb-3" controlId="formBasicPassword">
+          <Form.Label>Password</Form.Label>
+          <Form.Control
+            required
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            isInvalid={passwordValidType === 'invalid'}
+          />
+          <Form.Control.Feedback type={passwordValidType}>
+            {passwordValidMsg}
+          </Form.Control.Feedback>
+        </Form.Group>
+
+        <Button variant="primary" type="submit">
+          Login
+        </Button>
+        <Button variant="secondary" type="button" onClick={() => resetForm()}>
+          Reset
+        </Button>
+      </Form>
+    </>
+  );
+}
+
+export default Login;

docker-compose.yml

@@ -2,19 +2,23 @@
 
 services:
   client:
-    container_name: tasknote
+    container_name: client
     image: node:20.17-bullseye-slim
     ports: 
       - "5000:5000"
     entrypoint: sh -c "npm i --no-update-notifier && npm start"
     user: root
     volumes: 
-      - "./:/app"
+      - "./client:/app"
     working_dir: /app
     environment:
       LOG_LEVEL: debug
     healthcheck:
-      test: timeout 10s bash -c 'true > /dev/tcp/127.0.0.1/3000'
+      test: timeout 10s bash -c 'true > /dev/tcp/127.0.0.1/5000'
+      interval: 1m30s
+      timeout: 15s
+      retries: 3
+      start_period: 10s
 
   java-api:
     container_name: java-api
@@ -39,9 +43,9 @@ services:
     healthcheck:
       test: curl -f http://localhost:8585/actuator/health | grep '"status":"UP"'
       interval: 1m30s
-      timeout: 30s
-      retries: 5
-      start_period: 30s
+      timeout: 15s
+      retries: 3
+      start_period: 10s
 
   postgres:
     container_name: postgres
@@ -52,8 +56,9 @@ services:
       POSTGRES_USER: tasknoteuser
       POSTGRES_PASSWORD: default
       POSTGRES_PORT: 5432
+      PGDATA: /tmp
     volumes:
-      - "/pgdata"
+      - "./data:/tmp"
     ports:
       - "5432:5432"
     healthcheck:
@@ -61,7 +66,7 @@ services:
       interval: 1m30s
       timeout: 15s
       retries: 3
-      start_period: 15s
+      start_period: 10s
 
   caddy:
     container_name: caddy

tools/run-docker.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+docker compose up -d

tools/stop-docker.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+docker compose down