feature: improve UI

PHPcomRapadura · Apr 9, 2024 · 7d57bf6 · 7d57bf6
1 parent edbaad6
commit 7d57bf6
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 91 deletions.
diff --git a/public/static/games.json b/public/static/games.json
@@ -7,69 +7,106 @@
     "updatedAt": "2024-04-05 04:14:13.951247+00",
     "questions": [
       {
-        "id": 1,
-        "text": "Qual das funções pode ser usada para verificar se um número é inteiro?",
+        "id": 5,
+        "text": "Com relação as funções `str_replace()`, `str_ireplace()` e `str_casereplace()`, marque a alternativa correta?",
         "createdAt": "2024-04-05 04:14:13.951247+00",
         "updatedAt": "2024-04-05 04:14:13.951247+00",
         "answers": [
           {
             "correct": false,
             "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`int`"
+            "text": "Não há diferença entre elas"
           },
           {
             "correct": false,
             "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`is_interger`"
+            "text": "`str_ireplace` e `str_casereplace` não existem"
+          },
+          {
+            "correct": false,
+            "createdAt": "2024-04-05 04:14:13.951247+00",
+            "text": "`str_ireplace` e `str_casereplace` são para substituir caracteres em strings com case insensitive"
           },
           {
             "correct": true,
             "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`is_int`"
+            "text": "`str_ireplace` é para substituir caracteres em strings com case insensitive e `str_casereplace` não existe"
+          }
+        ]
+      },
+      {
+        "id": 13,
+        "text": "Indique o resultado da seguinte expressão: \n\n block```$var = '2015PHPinga'; echo $var == 2015 ? 'Igual' : 'Diferente';```block",
+        "createdAt": "2024-04-05 04:14:13.951247+00",
+        "updatedAt": "2024-04-05 04:14:13.951247+00",
+        "answers": [
+          {
+            "correct": false,
+            "createdAt": "2024-04-05 04:14:13.951247+00",
+            "text": "Dá erro: String to Integer convertion error"
+          },
+          {
+            "correct": true,
+            "createdAt": "2024-04-05 04:14:13.951247+00",
+            "text": "`'Igual'`"
           },
           {
             "correct": false,
             "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`isInt`"
+            "text": "`'Diferente'`"
           },
           {
             "correct": false,
             "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`isInteger`"
+            "text": "`'2015PHPinga'`"
           }
         ]
-      },
+      }
+    ]
+  },
+  {
+    "id": 2,
+    "description": "Avançado",
+    "author": "[email protected]",
+    "createdAt": "2024-04-05 04:14:13.951247+00",
+    "updatedAt": "2024-04-05 04:14:13.951247+00",
+    "questions": [
       {
-        "id": 12,
-        "text": "Indique o resultado da seguinte expressão: \n\n block```$var = '0'; echo empty($var) ? 'Vazio' : 'Tem conteúdo';```block",
+        "id": 1,
+        "text": "Qual das funções pode ser usada para verificar se um número é inteiro?",
         "createdAt": "2024-04-05 04:14:13.951247+00",
         "updatedAt": "2024-04-05 04:14:13.951247+00",
         "answers": [
           {
             "correct": false,
             "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "Dá erro: String to Integer convertion error"
+            "text": "`int`"
           },
           {
             "correct": false,
             "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`'Tem conteúdo'`"
+            "text": "`is_interger`"
           },
           {
             "correct": true,
             "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`'Vazio'`"
+            "text": "`is_int`"
           },
           {
             "correct": false,
             "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`'0'`"
+            "text": "`isInt`"
+          },
+          {
+            "correct": false,
+            "createdAt": "2024-04-05 04:14:13.951247+00",
+            "text": "`isInteger`"
           }
         ]
       },
       {
-        "id": 13,
-        "text": "Indique o resultado da seguinte expressão: \n\n block```$var = '2015PHPinga'; echo $var == 2015 ? 'Igual' : 'Diferente';```block",
+        "id": 12,
+        "text": "Indique o resultado da seguinte expressão: \n\n block```$var = '0'; echo empty($var) ? 'Vazio' : 'Tem conteúdo';```block",
         "createdAt": "2024-04-05 04:14:13.951247+00",
         "updatedAt": "2024-04-05 04:14:13.951247+00",
         "answers": [
@@ -79,31 +116,22 @@
             "text": "Dá erro: String to Integer convertion error"
           },
           {
-            "correct": true,
+            "correct": false,
             "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`'Igual'`"
+            "text": "`'Tem conteúdo'`"
           },
           {
-            "correct": false,
+            "correct": true,
             "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`'Diferente'`"
+            "text": "`'Vazio'`"
           },
           {
             "correct": false,
             "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`'2015PHPinga'`"
+            "text": "`'0'`"
           }
         ]
-      }
-    ]
-  },
-  {
-    "id": 2,
-    "description": "Avançado",
-    "author": "[email protected]",
-    "createdAt": "2024-04-05 04:14:13.951247+00",
-    "updatedAt": "2024-04-05 04:14:13.951247+00",
-    "questions": [
+      },
       {
         "id": 2,
         "text": "Qual método pode-se usar como construtor de uma classe?",
@@ -188,34 +216,6 @@
           }
         ]
       },
-      {
-        "id": 5,
-        "text": "Com relação as funções `str_replace()`, `str_ireplace()` e `str_casereplace()`, marque a alternativa correta?",
-        "createdAt": "2024-04-05 04:14:13.951247+00",
-        "updatedAt": "2024-04-05 04:14:13.951247+00",
-        "answers": [
-          {
-            "correct": false,
-            "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "Não há diferença entre elas"
-          },
-          {
-            "correct": false,
-            "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`str_ireplace` e `str_casereplace` não existem"
-          },
-          {
-            "correct": false,
-            "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`str_ireplace` e `str_casereplace` são para substituir caracteres em strings com case insensitive"
-          },
-          {
-            "correct": true,
-            "createdAt": "2024-04-05 04:14:13.951247+00",
-            "text": "`str_ireplace` é para substituir caracteres em strings com case insensitive e `str_casereplace` não existe"
-          }
-        ]
-      },
       {
         "id": 6,
         "text": "Qual é o resultado da variável `$a`, dado que: \n\n`$a = '1 gato' + '2 cachorros' == '3 mamíferos';` ?",

diff --git a/src/App.css b/src/App.css
@@ -23,6 +23,10 @@
     font-size: 1rem;
 }
 
+.GamePlaySessionQuestionUnanswered > .card > .card-body > .form-check p {
+    line-height: 165%;
+}
+
 main .btn.btn-primary {
     box-shadow: rgba(64, 60, 67, 0.4) 1px 2px 4px 1px !important;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,7 +16,7 @@ import { GameWelcomePage } from './view/pages/game/GameWelcomePage.tsx'
 import { GamePlayPage } from './view/pages/game/GamePlayPage.tsx'
 import { GameEndPage } from './view/pages/game/GameEndPage.tsx'
 // session
-import { PrivatePage } from './view/pages/PrivatePage'
+import { DashboardPage } from './view/pages/DashboardPage.tsx'
 import { SignInPage } from './view/pages/SignInPage.tsx'
 
 export default function App () {
@@ -51,8 +51,8 @@ export default function App () {
             element={<ProtectPage />}
           >
             <Route
-              path="/private"
-              element={<PrivatePage />}
+              path="/dashboard"
+              element={<DashboardPage />}
             />
           </Route>
         </Route>

diff --git a/src/view/pages/PrivatePage.tsx → src/view/pages/DashboardPage.tsx b/src/view/pages/PrivatePage.tsx → src/view/pages/DashboardPage.tsx
@@ -1,7 +1,7 @@
-export function PrivatePage () {
+export function DashboardPage () {
   return (
     <p>
       Eu sou uma página privada
     </p>
   )
-}
+}
diff --git a/src/view/pages/SignInPage.tsx b/src/view/pages/SignInPage.tsx
@@ -3,35 +3,82 @@ import { useNavigate } from 'react-router-dom'
 import { useApp } from '../hooks'
 
 export function SignInPage () {
-    const app = useApp()
-    const navigate = useNavigate()
-    const [error, setError] = useState('')
-    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault()
-        setError('')
-        const form = new FormData(event.currentTarget)
-        const username = form.get('username') as string
-        const password = form.get('password') as string
-        const signed = await app.auth.signIn(username, password)
-        if (!signed) {
-            setError('Usuário e/ou senha inválidos')
-            return
-        }
-        navigate('/private')
+  const app = useApp()
+  const navigate = useNavigate()
+  const [error, setError] = useState('')
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    setError('')
+    const form = new FormData(event.currentTarget)
+    const username = form.get('username') as string
+    const password = form.get('password') as string
+    const signed = await app.auth.signIn(username, password)
+    if (!signed) {
+      setError('Usuário e/ou senha inválidos')
+      return
     }
-    return <>
-    <p>Faça o login</p>
-    <form onSubmit={handleSubmit}>
-        <p>Digite seu nome de usuário:</p>
-        <input type="text" name="username" />
-        <p>Digite sua senha:</p>
-        <input type="password" name="password"/>
-        <hr />
-        <button type="submit">Entrar </button>
+    navigate('/dashboard')
+  }
+  return <>
+    <h4>Entrar</h4>
+
+    <div className="card bg-secondary py-2 px-3 rounded">
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label
+            htmlFor="username"
+            className="form-label mt-1"
+          >
+            Usuário
+          </label>
+          <input
+            type="text"
+            className="form-control"
+            id="username"
+            name="username"
+            aria-describedby="username_help"
+            placeholder="Informe seu usuário"
+          />
+          <small
+            id="username_help"
+            className="form-text text-muted"
+          >
+            Utilize seu nome de usuário ou email
+          </small>
+        </div>
+
+        <div>
+          <label
+            htmlFor="password"
+            className="form-label mt-2"
+          >
+            Senha
+          </label>
+          <input
+            type="password"
+            name="password"
+            className="form-control"
+            id="password"
+            placeholder="Password"
+            autoComplete="off"
+          />
+        </div>
+
+        <div className="my-3">
+          <button
+            type="submit"
+            className="btn btn-primary"
+          >
+            Entrar
+          </button>
+        </div>
         {error && (
-            <div>{error}</div>
+          <div className="alert alert-danger text-light-emphasis">
+            {error}
+          </div>
         )}
-    </form>
+      </form>
+    </div>
 
-    </>
+  </>
 }