diff --git a/frontend-next-migration/public/images/characters/Cartoon_character_ope.png b/frontend-next-migration/public/images/characters/Cartoon_character_ope.png new file mode 100644 index 000000000..e67481c2a Binary files /dev/null and b/frontend-next-migration/public/images/characters/Cartoon_character_ope.png differ diff --git a/frontend-next-migration/public/images/logos/CommonALT.png b/frontend-next-migration/public/images/logos/CommonALT.png new file mode 100644 index 000000000..c80c0e7b2 Binary files /dev/null and b/frontend-next-migration/public/images/logos/CommonALT.png differ diff --git a/frontend-next-migration/src/features/TeacherSignIn/index.ts b/frontend-next-migration/src/features/TeacherSignIn/index.ts new file mode 100644 index 000000000..5b8a90895 --- /dev/null +++ b/frontend-next-migration/src/features/TeacherSignIn/index.ts @@ -0,0 +1 @@ +export { TeacherSignInCard } from './ui'; diff --git a/frontend-next-migration/src/features/TeacherSignIn/ui/TeacherSignInCard/TeacherSignInCard.module.scss b/frontend-next-migration/src/features/TeacherSignIn/ui/TeacherSignInCard/TeacherSignInCard.module.scss new file mode 100644 index 000000000..c1f10a7ed --- /dev/null +++ b/frontend-next-migration/src/features/TeacherSignIn/ui/TeacherSignInCard/TeacherSignInCard.module.scss @@ -0,0 +1,306 @@ +.PageLayout { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + width: 1920; + height: 1656; +} + +.Container { + --teacher-login-card-width: 760px; + --teacher-login-card-height: 532.58px; + + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 950px; + height: 634px; + max-width: 100%; + margin: 0 auto; + overflow: visible; + box-sizing: border-box; +} + +.AltLogo { + position: absolute; + top: -7px; + left: 30px; + z-index: 20; + width: 193px; + height: 161px; + display: flex; + align-items: center; + justify-content: center; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } + + @media (max-width: $breakpoint-md) { + top: 100px; + left: 3px; + width: 150px; + height: 125px; + } + + @media (max-width: $breakpoint-sm) { + top: 95px; + left: 5px; + width: 120px; + height: 100px; + } +} + +// Main card container +.Card { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + background: #2b353a; + border: 7px solid var(--primary-color); + border-radius: var(--border-radius-md); + padding: 10px; + gap: 10px; + width: var(--teacher-login-card-width); + height: var(--teacher-login-card-height); + max-width: 100%; + box-sizing: border-box; + box-shadow: 0px 4px 4px 0px #000000c4; + + @media (max-width: $breakpoint-md) { + max-width: 90%; + height: auto; + } + + @media (max-width: $breakpoint-sm) { + max-width: 90%; + height: auto; + } +} + +.Title { + width: 644; + height: 63; + top: 495px; + left: 685px; + + text-align: center; + color: var(--primary-color); + margin: 0 0 30px 0; + letter-spacing: 1%; + font: var(--font-sw-xxxl); + text-transform: none; + + @media (max-width: $breakpoint-md) { + font: var(--font-sw-xl); + margin-bottom: 30px; + letter-spacing: 0.5px; + } + + @media (max-width: $breakpoint-sm) { + font: var(--font-sw-m); + margin-bottom: 5px; + } +} + +.Form { + display: flex; + flex-direction: column; + align-items: center; + align-self: center; + gap: 20px; + + width: 438.51px; + max-width: calc(100% - 40px); + + @media (max-width: $breakpoint-sm) { + gap: 15px; + } +} + +.FormGroup { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.UsernameInputWrapper, +.PasswordInputWrapper { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: 100%; +} + +.UsernameInput { + width: 438.51px; + max-width: 100%; + height: 54.54px; + padding: var(--spacing-250) var(--spacing-400) var(--spacing-250) var(--spacing-400); + gap: var(--spacing-400); + font: var(--font-dm-l); + background: var(--background); + border: 1.96px solid var(--Border-blackBorder, #121212); + border-radius: var(--border-radius-xl); + color: var(--primary-color); + transition: all 0.3s ease; + box-sizing: border-box; + + &::placeholder { + color: var(--primary-color); + } + + &:focus { + outline: none; + border-color: var(--black); + background: var(--background); + } + + @media (max-width: $breakpoint-sm) { + padding: 12px 14px; + font: var(--font-dm-m); + } +} + +.PasswordInput { + width: 438.51px; + max-width: 100%; + height: 54.54px; + padding: var(--spacing-250) var(--spacing-400) var(--spacing-250) var(--spacing-400); + gap: var(--spacing-400); + font: var(--font-dm-l); + background: var(--background); + border: 1.96px solid var(--Border-blackBorder, #121212); + border-radius: var(--border-radius-xl); + color: var(--primary-color); + transition: all 0.3s ease; + box-sizing: border-box; + + &::placeholder { + color: var(--primary-color); + } + + &:focus { + outline: none; + border-color: var(--black); + background: var(--background); + } + + @media (max-width: $breakpoint-sm) { + padding: 12px 14px; + padding-right: 46px; + font: var(--font-dm-m); + } +} + +.UsernameToggle, +.PasswordToggle { + gap: 9.81px; + position: absolute; + right: 14px; + top: 50%; + transform: translateY(-50%); + background: none; + border: none; + color: var(--primary-color); + cursor: pointer; + padding: 6px; + display: flex; + align-items: center; + justify-content: center; + transition: color 0.3s ease; + + &:hover { + color: var(--primary-color); + } + + &:focus { + outline: none; + color: var(--primary-color); + } + + svg { + width: 19.62px; + height: 16.68px; + } + + @media (max-width: $breakpoint-sm) { + padding: 5px; + + svg { + width: 18px; + height: 16px; + } + } +} + +.SubmitButton { + width: 180.01px; + height: 58px; + + padding: 11.77px 23.54px 11.77px 23.54px; + gap: 9.81px; + + margin-top: 28px; + letter-spacing: -4%; + + display: flex; + align-items: center; + justify-content: center; + align-self: center; + margin-left: auto; + margin-right: auto; + box-sizing: border-box; + white-space: nowrap; + + border-radius: var(--border-radius-xl); + + box-shadow: 1.96px 3.92px 0px 0px var(--black); + + @media (max-width: $breakpoint-sm) { + margin-top: 20px; + min-width: auto; + } +} + +.TeacherCharacter { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + z-index: 20; + + width: 282px; + height: 282px; + right: 70px; + bottom: -45px; + + img { + width: 100%; + height: 100%; + display: block; + object-fit: contain; + } + + @media (max-width: $breakpoint-md) { + width: 200px; + height: 200px; + right: 30px; + bottom: 75px; + } + + @media (max-width: $breakpoint-sm) { + width: 125px; + height: 125px; + right: -8px; + bottom: 130px; + } +} diff --git a/frontend-next-migration/src/features/TeacherSignIn/ui/TeacherSignInCard/TeacherSignInCard.tsx b/frontend-next-migration/src/features/TeacherSignIn/ui/TeacherSignInCard/TeacherSignInCard.tsx new file mode 100644 index 000000000..9de3e19b0 --- /dev/null +++ b/frontend-next-migration/src/features/TeacherSignIn/ui/TeacherSignInCard/TeacherSignInCard.tsx @@ -0,0 +1,194 @@ +'use client'; +import Image from 'next/image'; +import { useState } from 'react'; +import { useRouter } from 'next/navigation'; +import { useClientTranslation } from '@/shared/i18n'; +import { Button, ButtonSize, ButtonTheme } from '@/shared/ui/Button'; +import { classNames } from '@/shared/lib/classNames/classNames'; +import cls from './TeacherSignInCard.module.scss'; + +/** + * TeacherSignInCardProps defines the properties for the TeacherSignInCard component. + * @property {string} [className] - An optional class name to apply to the component for styling purposes. + */ +interface TeacherSignInCardProps { + className?: string; +} + +/** + * VisibilityIconProps defines the properties for the VisibilityIcon component. + * @property {boolean} isVisible - A boolean indicating whether the icon should represent visibility (true) or invisibility (false). + */ +interface VisibilityIconProps { + isVisible: boolean; +} + +/** + * VisibilityIcon is a React functional component that renders an SVG icon representing visibility or invisibility based on the isVisible prop. + * @param isVisible - A boolean indicating whether the icon should represent visibility (true) or invisibility (false). + * @returns A JSX element containing the SVG icon. + */ +const VisibilityIcon: React.FC = ({ isVisible }) => ( + + {isVisible ? ( + <> + + + + ) : ( + <> + + + + )} + +); + +/** + * TeacherSignInCard is a React functional component that renders a sign-in card for teachers. It includes input fields for username and password, along with visibility toggles for both fields. Upon submission, it navigates to the instructions page. + * @param className - An optional class name to apply to the component for styling purposes. + * @returns A JSX element containing the sign-in card UI. + */ +const TeacherSignInCard: React.FC = ({ className }) => { + const router = useRouter(); + const { t } = useClientTranslation('teachers'); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [showUsername, setShowUsername] = useState(false); + const [showPassword, setShowPassword] = useState(false); + + /** + * Handles the form submission event. Prevents the default form submission behavior and navigates to the instructions page. + * @param event - The form submission event. + */ + const handleSubmit = (event: React.FormEvent) => { + event.preventDefault(); + // Navigate to instructions page + router.push('/teachers/instructions'); + }; + + /** + * Toggles the visibility of the password input field. If the password is currently visible, it will be hidden, and vice versa. + */ + const togglePasswordVisibility = () => { + setShowPassword(!showPassword); + }; + + /** + * Toggles the visibility of the username input field. If the username is currently visible, it will be hidden, and vice versa. + */ + const toggleUsernameVisibility = () => { + setShowUsername(!showUsername); + }; + + /** + * Renders the TeacherSignInCard component, which includes the ALT logo, sign-in form with username and password fields, and a teacher character image. The form includes visibility toggles for both input fields and a submit button that navigates to the instructions page upon submission. + */ + return ( +
+
+ {/* ALT Logo */} +
+ ALT Zone Logo +
+ + {/* Sign In Card */} +
+

{t('signin-card-title')}

+ +
+
+
+ setUsername(event.target.value)} + className={cls.UsernameInput} + aria-label={t('signin-card-username-label')} + autoComplete="username" + /> + +
+
+ +
+
+ setPassword(event.target.value)} + className={cls.PasswordInput} + aria-label={t('signin-card-password-label')} + /> + +
+
+ + +
+
+ + {/* Teacher Character */} +
+ Teacher Character +
+
+
+ ); +}; + +export default TeacherSignInCard; diff --git a/frontend-next-migration/src/features/TeacherSignIn/ui/TeacherSignInCard/index.ts b/frontend-next-migration/src/features/TeacherSignIn/ui/TeacherSignInCard/index.ts new file mode 100644 index 000000000..5b49f5f7f --- /dev/null +++ b/frontend-next-migration/src/features/TeacherSignIn/ui/TeacherSignInCard/index.ts @@ -0,0 +1 @@ +export { default as TeacherSignInCard } from './TeacherSignInCard'; diff --git a/frontend-next-migration/src/features/TeacherSignIn/ui/index.ts b/frontend-next-migration/src/features/TeacherSignIn/ui/index.ts new file mode 100644 index 000000000..33481d0d3 --- /dev/null +++ b/frontend-next-migration/src/features/TeacherSignIn/ui/index.ts @@ -0,0 +1 @@ +export { TeacherSignInCard } from './TeacherSignInCard'; diff --git a/frontend-next-migration/src/preparedPages/TeachersPage/ui/TeachersPage.module.scss b/frontend-next-migration/src/preparedPages/TeachersPage/ui/TeachersPage.module.scss index 74f0c6f00..a73f1a703 100644 --- a/frontend-next-migration/src/preparedPages/TeachersPage/ui/TeachersPage.module.scss +++ b/frontend-next-migration/src/preparedPages/TeachersPage/ui/TeachersPage.module.scss @@ -1,11 +1,8 @@ .container { - padding: 0; - padding-left: 10em; - display: flex; - flex-direction: column; - gap: 2em; - margin-bottom: 3em; + padding: 0; + padding-left: 10em; + display: flex; + flex-direction: column; + gap: 2em; + margin-bottom: 3em; } -.taskButton { - width: fit-content; -} \ No newline at end of file diff --git a/frontend-next-migration/src/preparedPages/TeachersPage/ui/TeachersPage.tsx b/frontend-next-migration/src/preparedPages/TeachersPage/ui/TeachersPage.tsx index 21a6b0f51..8497c9d8a 100644 --- a/frontend-next-migration/src/preparedPages/TeachersPage/ui/TeachersPage.tsx +++ b/frontend-next-migration/src/preparedPages/TeachersPage/ui/TeachersPage.tsx @@ -1,56 +1,12 @@ 'use client'; -import { PageTitle } from '@/shared/ui/PageTitle'; -import cls from './TeachersPage.module.scss'; -import { DescriptionCard, DescriptionCardTheme } from '@/shared/ui/v2/DescriptionCard'; -import LessonList from './LessonList/LessonList'; -import { Button } from '@/shared/ui/v2/Button'; -import { useClientTranslation } from '@/shared/i18n'; -import { Container } from '@/shared/ui/Container'; +import { TeacherSignInCard } from '@/features/TeacherSignIn'; +/** + * TeachersPage is a React functional component that renders the TeacherSignInCard component. It serves as the main page for teachers to sign in. + * @returns A JSX element containing the TeacherSignInCard component. + */ const TeachersPage = () => { - const { t } = useClientTranslation('teachers'); - return ( - -
- - - - {t('welcome')}! -

{t('instruction-title')}

-

- - - - - - - - - {t('preparation-title')} - -

{t('managing-title')}

-

{t('managing-text')}

-

{t('implementation-title')}

-

-

{t('preparatory-materials-title')}

-

{t('preparatory-materials-text')}

-

{t('game-literacy-tasks-title')}

-

{t('game-literacy-tasks-text')}

- - - -
- - ); + return ; }; export default TeachersPage; diff --git a/frontend-next-migration/src/shared/i18n/locales/en/teachers.json b/frontend-next-migration/src/shared/i18n/locales/en/teachers.json index 6a5db843c..813ccb4a1 100644 --- a/frontend-next-migration/src/shared/i18n/locales/en/teachers.json +++ b/frontend-next-migration/src/shared/i18n/locales/en/teachers.json @@ -1,36 +1,13 @@ { - "head-title": "Teacher's Page", - "head-description": "Learn how to set up ALT Zone classroom testing sessions in four simple steps. Create clans, prepare materials, share the game link, and analyze student results — make game-based learning fun and competitive.", - "head-keywords": "altzone, teachers, classroom testing, educational gaming, game-based learning, test instructions, create clans, analyze results", - "og-title": "ALT Zone Teacher's Page", - "og-description": "Step-by-step instructions for teachers on setting up ALT Zone classroom testing sessions. Create clans, prepare materials, launch the game, and analyze student performance results.", - "instructions": "1. Instructions", - "preparation": "2. Preparation", - "gaming": "3. Gaming", - "results": "4. Results", - "welcome": "Welcome", - "instruction-title": "Here you can manage your lessons and prepare for teaching game art", - "instruction-text": "In the Teacher's Panel under My Lessons, you can create a new lesson by giving it an appropriate tag (e.g., Class 7B) as well as browse and delete the lessons you have created.

By navigating to the lesson, a view opens that contains the necessary additional information for joining clans, the slides needed for teaching, the clan leaderboard, and also the homework section for that lesson. During the teaching session, simply project the desired lesson with its content and phases onto the board.

Comprehensive info packages related to game art and the game literacy skills and tasks included in this teaching package have been created to support preparation for teaching.", - "preparation-title": "Preparing for teaching", - "managing-title": "Managing the lesson", - "managing-text": "A teacher can have a maximum of 10 active lessons at the same time. The teacher can delete outdated and completed lessons, freeing up space for new lessons. It is also recommended to delete a completed lesson as soon as possible. If the teacher does not delete a previously created lesson, it will be considered outdated after X months from the creation of the lesson and will then be automatically removed from the system.", - "implementation-title": "Implementing the lesson", - "implementation-text": "The lesson includes two clans that compete against each other during the testing period. First, familiarize yourselves with the game literacy tasks and game art teaching materials, allocating approximately XX time for this.

The testing can begin once the students have downloaded the test version of the game from the bottom of this page and created an account in the game.

Students can join the clans using the passwords assigned to them from within the game. Try to divide into these two clans as evenly as possible.

During the testing, students will complete tasks from different sections of game literacy. After the testing ends, the results can be viewed on the leaderboard. It is advisable to allocate about 20 minutes for the testing portion.", - "preparatory-materials-title": "Materials to support preparation", - "preparatory-materials-text": "What materials for preparation and where. They are included here.", - "game-literacy-tasks-title": "Game literacy tasks", - "game-literacy-tasks-text": "Below you can access the game literacy tasks page. There you can explore the available tasks.", - "game-literacy-tasks-button": "Game literacy tasks", - "my-lessons": "My Lessons", - "create-lesson": "Create new lesson", - "delete-lesson": "Delete lesson", - "goto-lesson": "Go to lesson", - "confirm-delete": "Are you sure you want to delete the lesson?", - "no": "No", - "yes": "Yes", - "lesson": "Lesson", - "create": "Create", - "cancel": "Cancel", - "name-lesson": "Name the lesson", - "number-students": "Number of students" + "head-title": "Teachers Page", + "head-description": "Learn how to set up test sessions in the classroom with ALT Zone in four simple steps. Create clans, prepare materials, share the game link and analyze student results - make game-based learning fun and competitive.", + "head-keywords": "altzone, teachers, classroom testing, educational games, game-based learning, testing instructions, clan creation, results analysis", + "og-title": "ALT Zone Teachers Page", + "og-description": "Step-by-step instructions for teachers to set up test sessions in the classroom with ALT Zone. Create clans, prepare materials, launch the game and analyze student performance results.", + "signin-card-title": "Teacher Sign In", + "signin-card-username-placeholder": "Username", + "signin-card-username-label": "Username", + "signin-card-password-placeholder": "Password", + "signin-card-password-label": "Password", + "signin-card-submit-button": "Sign in" } diff --git a/frontend-next-migration/src/shared/i18n/locales/fi/teachers.json b/frontend-next-migration/src/shared/i18n/locales/fi/teachers.json index 42b0afce3..08928a3f4 100644 --- a/frontend-next-migration/src/shared/i18n/locales/fi/teachers.json +++ b/frontend-next-migration/src/shared/i18n/locales/fi/teachers.json @@ -1,36 +1,13 @@ { - "head-title": "Opettajan sivu", - "head-description": "Opi, miten voit järjestää ALT Zone -luokkahuoneen testisessioita neljässä yksinkertaisessa vaiheessa. Luo klaaneja, valmistele materiaaleja, jaa pelilinkki ja analysoi opiskelijoiden tuloksia - tee pelipohjaisesta oppimisesta hauskaa ja kilpailullista.", - "head-keywords": "altzone, opettajat, luokkahuoneen testaus, koulutuspelaaminen, pelipohjainen oppiminen, testiohjeet, luo klaaneja, analysoi tuloksia", - "og-title": "ALT Zone Opettajan sivu", - "og-description": "Vaiheittaiset ohjeet opettajille ALT Zone -luokkahuoneen testisessioiden järjestämiseen. Luo klaaneja, valmistele materiaaleja, käynnistä peli ja analysoi opiskelijoiden suoritustuloksia.", - "instructions": "1. Ohjeet", - "preparation": "2. Valmistelu", - "gaming": "3. Pelaaminen", - "results": "4. Tulokset", - "welcome": "Tervetuloa", - "instruction-title": "Täällä pääset hallinnoimaan oppituntejasi ja valmistautumaan pelitaiteen opetukseen", - "instruction-text": "Opettajan paneelissa kohdassa Omat oppitunnit voit luoda uuden oppitunnin antamalla sille sopivan tunnisteen (esim. 7B-luokka) sekä selata ja poistaa luomiasi oppitunteja.

Siirtymällä oppituntiin avautuu näkymä, josta löytyy kyseistä oppituntia varten tarvittavat lisätiedot klaaneihin liittymiseksi, opetukseen tarvittavat diat, klaanien tulostaulukko sekä myös kotitehtävän osuus. Opetustilanteessa heijasta vain haluamasi oppitunti sisältöineen ja vaiheineen taululle.

Opetukseen valmistautumisen yhteyteen on tehty perusteelliset infopaketit liittyen mm. pelitaiteeseen sekä tämän opetuspaketin sisältämiin pelilukutaitoihin ja niiden tehtäviin.", - "preparation-title": "Opetukseen valmistautuminen", - "managing-title": "Oppitunnin hallinnointi", - "managing-text": "Opettajalla voi olla samanaikaisesti aktiivisena enintään 10 oppituntia.Opettaja voi poistaa vanhentuneita ja käytyjä oppitunteja, jolloin tilaa vapautuu seuraaville oppitunneille. Suositeltavaa myös on, että suoritettu oppitunti poistetaan mahdollisimman pian. Mikäli opettaja jättää poistamatta aikaisemmin luodun oppitunnin, se katsotaan vanhentuneeksi X kuukauden kuluttua oppitunnin luomisesta ja poistuu silloin järjestelmästä automaattisesti.", - "implementation-title": "Oppitunnin toteutus", - "implementation-text": "Oppituntiin sisällytetään kaksi klaania, jotka kilpailevat keskenään testauksen ajan. Tutustukaa ensin pelilukutaidon tehtäviin ja pelitaiteen opetusmateriaaliin ja varatkaa tälle aikaa noin XX.

Testaus voidaan aloittaa, kun oppilaat ovat ladanneet pelin testiversion tämän sivun alaosasta ja luoneet peliin tunnuksen.

Oppilaat pääsevät liittymään klaaneihin niille osoitetuilla salasanoilla pelistä. Jakaututukaa näihin kahteen klaaniin mahdollisimman tasaisesti.

Testauksen aikana oppilaat suorittavat tehtäviä eri pelilukutaidon osioista. Testauksen päättymisen jälkeen tulokset on nähtävillä tulostaulukosta. Testausosuuteen on hyvä varata aikaa noin 20 minuuttia.", - "preparatory-materials-title": "Valmistautumista tukevat materiaalit", - "preparatory-materials-text": "Mitä materiaaleja valmistautumiseen ja missä. Ne tähän yhteyteen.", - "game-literacy-tasks-title": "Pelilukutaidon tehtävät", - "game-literacy-tasks-text": "Alta pääset pelilukutaidon tehtävien sivulle. Siellä voit tutustua saatavilla oleviin tehtäviin.", - "game-literacy-tasks-button": "Pelilukutaidon tehtävät", - "my-lessons": "Omat oppitunnit", - "create-lesson": "Luo oppitunti", - "delete-lesson": "Poista oppitunti", - "goto-lesson": "Siirry oppituntiin", - "confirm-delete": "Oletko varma, että haluat poistaa oppitunnin?", - "no": "Ei", - "yes": "Kyllä", - "lesson": "Oppitunti", - "create": "Luo", - "cancel": "Peruuta", - "name-lesson": "Nimeä oppitunti", - "number-students": "Oppilaiden määrä" + "head-title": "Opettajien sivu", + "head-description": "Opi kuinka määrittää testisessioita luokkahuoneessa ALT Zonen kanssa neljässä yksinkertaisessa vaiheessa. Luo klaaneja, valmista materiaalia, jaa pelilinkkiä ja analysoi opiskelijoiden tuloksia - tee pelipohjaisesta oppimisesta hauskaa ja kilpailukykyistä.", + "head-keywords": "altzone, opettajat, luokkahuonetestaus, opetuspelit, pelipohjaiset oppiminen, testausohjeet, klaanin luominen, tulosten analyysi", + "og-title": "ALT Zonen opettajien sivu", + "og-description": "Vaiheittaiset ohjeet opettajille testisessioiden määrittämiseen ALT Zonen luokkahuoneissa. Luo klaaneja, valmista materiaalia, käynnistä peli ja analysoi opiskelijoiden suorituksia.", + "signin-card-title": "Opettajan kirjautuminen", + "signin-card-username-placeholder": "Käyttäjätunnus", + "signin-card-username-label": "Käyttäjätunnus", + "signin-card-password-placeholder": "Salasana", + "signin-card-password-label": "Salasana", + "signin-card-submit-button": "Kirjaudu sisään" }