Progress!

components/Postcard.tsx

@@ -6,7 +6,7 @@ export function Postcard() {
     const [postcard, _] = useDefinedContext(PostcardContext)
 
     return (
-        <Image
+        <img
             className="postcard"
             src={typeof postcard === "string" ? postcard : postcard.src}
             alt=""

hooks/useTelegramToFestaCallback.ts

@@ -4,10 +4,11 @@ import { ApiError, ApiResult } from "../types/api"
 import { FestaLoginData, TelegramLoginData } from "../types/user"
 
 
-export function useTelegramToFestaCallback(setLogin: Dispatch<SetStateAction<FestaLoginData | null>>, setError: Dispatch<SetStateAction<ApiError | null | undefined>>): (data: TelegramLoginData) => Promise<void> {
+export function useTelegramToFestaCallback(setLogin: Dispatch<SetStateAction<FestaLoginData | null>>, setError: Dispatch<SetStateAction<ApiError | null | undefined>>, setWorking: Dispatch<SetStateAction<boolean>>): (data: TelegramLoginData) => Promise<void> {
     return useCallback(
         async (data: TelegramLoginData) => {
             setError(null)
+            setWorking(true)
 
             try {
                 var response = await axios.post<ApiResult<FestaLoginData>>("/api/login?provider=telegram", data)
@@ -17,6 +18,9 @@ export function useTelegramToFestaCallback(setLogin: Dispatch<SetStateAction<Fes
                 setError(axe?.response?.data as ApiError | undefined)
                 return
             }
+            finally {
+                setWorking(false)
+            }
 
             setLogin(response.data as FestaLoginData)
             localStorage.setItem("login", JSON.stringify(response.data))

next.config.js

@@ -1,6 +1,8 @@
 const {i18n} = require("./next-i18next.config")
 
-/** @type {import('next').NextConfig} */
+/** 
+ * @type {import('next').NextConfig} 
+ */
 const nextConfig = {
   reactStrictMode: true,
   i18n,

pages/index.tsx

@@ -21,41 +21,40 @@ export async function getStaticProps(context: NextPageContext) {
 export default function PageIndex() {
     const { t } = useTranslation("common")
     const [login, setLogin] = useDefinedContext(LoginContext)
+    const [working, setWorking] = useState<boolean>(false)
     const [error, setError] = useState<ApiError | null | undefined>(null)
-
-    const onLogin = useTelegramToFestaCallback(setLogin, setError)
-
-    return (
-        login ? 
-            <main className="page-index">
+    const onLogin = useTelegramToFestaCallback(setLogin, setError, setWorking)
+    
+    if(!login) return (
+        <main id="page-index" className="page">
+            <hgroup className="hero-titles">
                 <h1>
                     {t("siteTitle")}
                 </h1>
-            </main>
-        :
-            <main id="page-hero" className="page">
-                <hgroup className="hgroup-hero">
-                    <h1>
-                        {t("siteTitle")}
-                    </h1>
-                    <h2>
-                        {t("siteSubtitle")}
-                    </h2>
-                </hgroup>
-                {
-                    error ? 
-                    <div className="negative">
+                <h2>
+                    {t("siteSubtitle")}
+                </h2>
+            </hgroup>
+            {error ? 
+                <div className="hero-action negative">
+                    <p>
+                        {t("telegramLoginError")}
+                    </p>
+                    <p>
+                        <code>
+                            {JSON.stringify(error)}
+                        </code>
+                    </p>
+                </div>
+                :
+                working ?
+                    <div>
                         <p>
-                            {t("telegramLoginError")}
-                        </p>
-                        <p>
-                            <code>
-                                {JSON.stringify(error)}
-                            </code>
+                            {t("telegramLoginWorking")}
                         </p>
                     </div>
                     :
-                    <div>
+                    <div className="hero-action">
                         <p>
                             {t("telegramLoginDescription")}
                         </p>
@@ -64,7 +63,41 @@ export default function PageIndex() {
                             botName={process.env.NEXT_PUBLIC_TELEGRAM_USERNAME}
                         />
                     </div>
-                }
-            </main>
+            }
+        </main>
+    )
+
+    return (
+        <main id="page-index" className="page">
+            <hgroup className="hero-titles">
+                <h1>
+                    {t("siteTitle")}
+                </h1>
+                <h2>
+                    {t("eventsSubtitleFirst")}
+                </h2>
+            </hgroup>
+            <div className="hero-action">
+                <label htmlFor="input-name">
+                    <p>
+                        {t("eventsInputDescriptionFirst")}
+                    </p>
+                </label>
+                <form className="form-event-create">
+                    <input 
+                        id="input-name" 
+                        placeholder={t("eventsInputName")}
+                        type="text"
+                    />
+                    <input
+                        id="input-submit"
+                        type="submit"
+                        aria-label={t("eventsInputSubmitLabel")}
+                        value="→"
+                        className="square-40 positive"
+                    />
+                </form>
+            </div>
+        </main>
     )
 }

public/locales/it-IT/common.json

@@ -1,6 +1,14 @@
 {
     "siteTitle": "Festa",
-    "siteSubtitle": "Organizza con facilità il tuo evento!",
+    "siteSubtitle": "Organizza eventi con facilità!",
     "telegramLoginDescription": "Per iniziare, effettua il login con Telegram.",
-    "logOutPrompt": "Non sei tu?"
+    "telegramLoginWorking": "Un attimo solo, sto effettuando il login...",
+    "telegramLoginError": "Si è verificato il seguente errore durante il login con Telegram:",
+    "logOutPrompt": "Non sei tu?",
+    "eventsSubtitleFirst": "Crea il tuo primo evento!",
+    "eventsInputDescriptionFirst": "Dai un nome al tuo primo evento!",
+    "eventsSubtitleAnother": "Cosa vuoi fare oggi?",
+    "eventsInputName": "Nome evento",
+    "eventsInputNamePlaceholder": "Festa a Festà",
+    "eventsInputSubmitLabel": "Crea evento"
 }

styles/globals.css

@@ -54,7 +54,6 @@ a:active {
 
 input, button {
     padding: 8px;
-    margin: 2px 4px;
 
     color: var(--foreground);
     background-color: var(--interactable);
@@ -75,6 +74,7 @@ input[type="text"] {
 
 input[type="submit"], button {
     border-style: outset;
+    text-align: center;
 }
 
 input[type="submit"]:active, button:active {
@@ -96,6 +96,7 @@ input.negative, button.negative {
 
 .page {
     min-height: 100vh;
+    padding: 12px;
 }
 
 .container-btn-telegram > div {

styles/page-tweaks.css

@@ -1,44 +1,60 @@
-#page-hero {
-    display: flex;
-    flex-direction: column;
+#page-index {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 1fr 1fr;
 
-    justify-content: space-evenly;
-    align-items: center;
+    justify-content: center;
     text-align: center;
 }
 
-#page-hero h1 {
+#page-index .hero-titles {
+    align-self: center;
+    grid-row: 1;
+}
+
+.hero-titles h1 {
     font-size: 10rem;
 }
 
-#page-hero h2 {
+.hero-titles h2 {
     font-size: 2.5rem;
 }
 
-@media (max-width: 640px) {
-    #page-hero h1 {
+@media (max-width: 640px) or (max-height: 640px) {
+    .hero-titles h1 {
         font-size: 5rem;
     }
 
-    #page-hero h2 {
+    .hero-titles h2 {
         font-size: 1.5rem;
     }
 }
 
-#page-events {
-    display: flex;
-    flex-direction: column;
-
-    justify-content: space-evenly;
-    align-items: center;
-    text-align: center;
+#page-index .hero-action {
+    align-self: start;
+    grid-row: 2;
 }
 
-#page-create {
+.form-event-create {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
 
     justify-content: space-evenly;
     align-items: center;
     text-align: center;
+    gap: 8px;
+
+    width: 100%;
+    max-width: 480px;
+
+    margin: 0 auto;
+}
+
+.form-event-create #input-name {
+    flex-grow: 1;
+    width: 100%;
+}
+
+.form-event-create #input-submit {
+    flex-shrink: 0;
 }