diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 4d7fb60..a2eb939 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -8,7 +8,7 @@ on: jobs: build: - timeout-minutes: 3 + timeout-minutes: 5 runs-on: ubuntu-latest container: image: cypress/browsers:node18.12.0-chrome106-ff106 diff --git a/README.md b/README.md index b38a068..572282b 100644 --- a/README.md +++ b/README.md @@ -74,10 +74,7 @@ Check out the live demo of the app at https://languages-learner.web.app/ ## Preview (Mobile) -[//]: # (![preview-dictionary-page-mobile](public/preview-dictionary-page-mobile.png)) - -[//]: # (![preview-profile-page-mobile](public/preview-profile-page-mobile.png))

- preview-dictionary-page-mobile - preview-profile-page-mobile + preview-dictionary-page-mobile + preview-profile-page-mobile

diff --git a/cypress/e2e/auth.cy.ts b/cypress/e2e/auth.cy.ts index 08f2377..27d1023 100644 --- a/cypress/e2e/auth.cy.ts +++ b/cypress/e2e/auth.cy.ts @@ -1,6 +1,6 @@ /// -import { elSelector, withLang } from '@@/cypress/utils' +import { withLang } from '@@/cypress/utils' import { EDataTest, EDataTestClass } from '@/enums/EDataTest' describe('user sign-in, sign-up and logout', () => { @@ -20,9 +20,12 @@ describe('user sign-in, sign-up and logout', () => { cy .el(EDataTest.landing_sign_in_button).click() // To make close button unfocused - .elByClass(EDataTestClass.app_card_content).should('be.visible').click() + .elByClass(EDataTestClass.app_dialog).should('be.visible').click() .get('html').toMatchSnapshot('Sign in modal') - .get(`${elSelector(EDataTest.authentication_modal)} .n-base-close`).click() + .elByClass(EDataTestClass.app_dialog).within(() => { + cy.elByClass(EDataTestClass.app_close_button).click() + }) + .authWithoutSession() .elByClass(EDataTestClass.app_notifications).should('be.visible').and('contain', 'successful_authorization') @@ -53,7 +56,9 @@ describe('user sign-in, sign-up and logout', () => { .toMatchSnapshotForEl(EDataTestClass.app_notifications, 'Sign in error notification') cy .el(EDataTest.authentication_modal_error).should('be.visible').contains(errorMessageInvalidEmail) - .get(`${elSelector(EDataTest.authentication_modal)} .n-base-close`).click() + .elByClass(EDataTestClass.app_dialog).within(() => { + cy.elByClass(EDataTestClass.app_close_button).click() + }) cy.authWithoutSession({ username: '', @@ -68,7 +73,9 @@ describe('user sign-in, sign-up and logout', () => { .and('contain', errorMessageInvalidEmail) cy .el(EDataTest.authentication_modal_error).should('be.visible').contains(errorMessageInvalidEmail) - .get(`${elSelector(EDataTest.authentication_modal)} .n-base-close`).click() + .elByClass(EDataTestClass.app_dialog).within(() => { + cy.elByClass(EDataTestClass.app_close_button).click() + }) cy.authWithoutSession({ username: 'email@gmail.com', @@ -83,7 +90,9 @@ describe('user sign-in, sign-up and logout', () => { .and('contain', errorMessageInvalidCredential) cy .el(EDataTest.authentication_modal_error).should('be.visible').contains(errorMessageInvalidCredential) - .get(`${elSelector(EDataTest.authentication_modal)} .n-base-close`).click() + .elByClass(EDataTestClass.app_dialog).within(() => { + cy.elByClass(EDataTestClass.app_close_button).click() + }) cy.authWithoutSession({ username: 'email@gmail.com', @@ -98,16 +107,20 @@ describe('user sign-in, sign-up and logout', () => { .and('contain', errorMessageMissingPassword) cy .el(EDataTest.authentication_modal_error).should('be.visible').contains(errorMessageMissingPassword) - .get(`${elSelector(EDataTest.authentication_modal)} .n-base-close`).click() + .elByClass(EDataTestClass.app_dialog).within(() => { + cy.elByClass(EDataTestClass.app_close_button).click() + }) }) it('should display sign-up error for existing use', () => { cy .el(EDataTest.landing_sign_up_button).click() // To make close button unfocused - .elByClass(EDataTestClass.app_card_content).should('be.visible').click() + .elByClass(EDataTestClass.app_dialog).should('be.visible').click() .get('html').toMatchSnapshot('Sign up modal') - .get(`${elSelector(EDataTest.authentication_modal)} .n-base-close`).click() + .elByClass(EDataTestClass.app_dialog).within(() => { + cy.elByClass(EDataTestClass.app_close_button).click() + }) .authWithoutSession({ ...(Cypress.env('testUser') ?? {}), diff --git a/cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign in error notification.png b/cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign in error notification.png index 1015797..23f54e0 100644 Binary files a/cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign in error notification.png and b/cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign in error notification.png differ diff --git a/cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign in modal.png b/cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign in modal.png index de07d43..e3785c6 100644 Binary files a/cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign in modal.png and b/cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign in modal.png differ diff --git a/cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign up modal.png b/cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign up modal.png index c88f816..ee273fb 100644 Binary files a/cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign up modal.png and b/cypress/snapshots/base/auth.cy.ts/[Desktop] [1100x660] Sign up modal.png differ diff --git a/cypress/snapshots/base/auth.cy.ts/[Mobile] [400x660] Sign in error notification.png b/cypress/snapshots/base/auth.cy.ts/[Mobile] [400x660] Sign in error notification.png index 13ff2d5..c102c93 100644 Binary files a/cypress/snapshots/base/auth.cy.ts/[Mobile] [400x660] Sign in error notification.png and b/cypress/snapshots/base/auth.cy.ts/[Mobile] [400x660] Sign in error notification.png differ diff --git a/cypress/snapshots/base/auth.cy.ts/[Mobile] [400x660] Sign in modal.png b/cypress/snapshots/base/auth.cy.ts/[Mobile] [400x660] Sign in modal.png index 708ae0c..5056318 100644 Binary files a/cypress/snapshots/base/auth.cy.ts/[Mobile] [400x660] Sign in modal.png and b/cypress/snapshots/base/auth.cy.ts/[Mobile] [400x660] Sign in modal.png differ diff --git a/cypress/snapshots/base/auth.cy.ts/[Mobile] [400x660] Sign up modal.png b/cypress/snapshots/base/auth.cy.ts/[Mobile] [400x660] Sign up modal.png index a48dabf..65c82f7 100644 Binary files a/cypress/snapshots/base/auth.cy.ts/[Mobile] [400x660] Sign up modal.png and b/cypress/snapshots/base/auth.cy.ts/[Mobile] [400x660] Sign up modal.png differ diff --git a/index.html b/index.html index 7ef6903..525d45a 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + Languages Learner diff --git a/package-lock.json b/package-lock.json index add82f7..b8170c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14657,11 +14657,10 @@ "peer": true }, "node_modules/naive-ui": { - "version": "2.37.3", - "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.37.3.tgz", - "integrity": "sha512-aUkHFXVIluSi8Me+npbcsdv1NYhVMj5t9YaruoCESlqmfqspj+R2QHEVXkTtUI1kQwVrABMCtAGq/wountqjZA==", + "version": "2.38.1", + "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.38.1.tgz", + "integrity": "sha512-AnU1FQ7K/CbhguAX++V4kCFjk7h7RvWt4nvZPRjORMpq+fUIlzD+EcQ5Cv1VqDloNF8+eMv4Akc2Ogacc9S+5A==", "dev": true, - "license": "MIT", "dependencies": { "@css-render/plugin-bem": "^0.15.12", "@css-render/vue3-ssr": "^0.15.12", diff --git a/package.json b/package.json index 0412b55..2551035 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "jsdom": "^24.0.0", "lint-staged": "^15.2.1", "lodash.debounce": "^4.0.8", - "naive-ui": "^2.34.3", + "naive-ui": "^2.38.1", "postcss": "^8.4.5", "postcss-html": "^1.3.0", "sass": "^1.45.0", diff --git a/public/preview-dictionary-page-mobile.png b/public/preview-dictionary-page-mobile.png deleted file mode 100644 index 0c8ec79..0000000 Binary files a/public/preview-dictionary-page-mobile.png and /dev/null differ diff --git a/public/preview-profile-page-mobile.png b/public/preview-profile-page-mobile.png deleted file mode 100644 index fec4bc8..0000000 Binary files a/public/preview-profile-page-mobile.png and /dev/null differ diff --git a/src/App.vue b/src/App.vue index 8a98631..f296cd1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,7 +10,9 @@ initializeOnAuthStateChangedHook(router) - + + + diff --git a/src/assets/images/main-page-background.webp b/src/assets/images/main-page-background.webp new file mode 100644 index 0000000..e7a65c0 Binary files /dev/null and b/src/assets/images/main-page-background.webp differ diff --git a/src/assets/images/preview-dictionary-page-mobile.webp b/src/assets/images/preview-dictionary-page-mobile.webp new file mode 100644 index 0000000..8280f94 Binary files /dev/null and b/src/assets/images/preview-dictionary-page-mobile.webp differ diff --git a/src/assets/images/preview-profile-page-mobile.webp b/src/assets/images/preview-profile-page-mobile.webp new file mode 100644 index 0000000..16e0f67 Binary files /dev/null and b/src/assets/images/preview-profile-page-mobile.webp differ diff --git a/public/profile-background.svg b/src/assets/images/profile-background.svg similarity index 100% rename from public/profile-background.svg rename to src/assets/images/profile-background.svg diff --git a/src/enums/EDataTest.ts b/src/enums/EDataTest.ts index df22429..16f6460 100644 --- a/src/enums/EDataTest.ts +++ b/src/enums/EDataTest.ts @@ -56,6 +56,7 @@ export enum EDataTestClass { app_checkbox_checked = 'n-checkbox--checked', app_checkbox_disabled = 'n-checkbox--disabled', app_card_content = 'n-card__content', + app_close_button = 'n-base-close', word_status = 'data-test__word_status', diff --git a/src/modules/landing/components/LandingContent/LandingContent.vue b/src/modules/landing/components/LandingContent/LandingContent.vue index e9ad910..9d57dba 100644 --- a/src/modules/landing/components/LandingContent/LandingContent.vue +++ b/src/modules/landing/components/LandingContent/LandingContent.vue @@ -1,6 +1,8 @@ diff --git a/src/modules/landing/layouts/landing-layout.scss b/src/modules/landing/layouts/landing-layout.scss index b7f14a5..b75b1ca 100644 --- a/src/modules/landing/layouts/landing-layout.scss +++ b/src/modules/landing/layouts/landing-layout.scss @@ -1,7 +1,7 @@ .landing-layout { width: 100svw; height: 100dvh; - background-image: url(/main-page-background.jpg); + background-image: url(/src/assets/images/main-page-background.webp); background-repeat: no-repeat; background-position: center center; background-size: cover; diff --git a/src/modules/landing/modules/authenticate/components/AuthenticateModal/AuthenticateModal.vue b/src/modules/landing/modules/authenticate/components/AuthenticateModal/AuthenticateModal.vue index 4a371b9..42cb801 100644 --- a/src/modules/landing/modules/authenticate/components/AuthenticateModal/AuthenticateModal.vue +++ b/src/modules/landing/modules/authenticate/components/AuthenticateModal/AuthenticateModal.vue @@ -4,41 +4,14 @@ import { EAuthenticateModalType } from '@/modules/landing/modules/authenticate/c const props = defineProps<{ type: EAuthenticateModalType - show: boolean }>() -const { isMobile } = useAppBreakpoints() - const authenticateType = ref(props.type) watch(() => props.type, () => authenticateType.value = props.type) - -const modalStyle = computed(() => unref(isMobile) - ? { - width: '100vw', - height: '100dvh', - } - : { - width: '600px', - }) - -const emit = defineEmits<{ - (e: 'update:show', value: boolean): void -}>() - -const updateShow = (value: boolean) => emit('update:show', value) diff --git a/src/modules/landing/modules/authenticate/components/AuthenticateModal/useAuthenticateModal.ts b/src/modules/landing/modules/authenticate/components/AuthenticateModal/useAuthenticateModal.ts new file mode 100644 index 0000000..dc48b2d --- /dev/null +++ b/src/modules/landing/modules/authenticate/components/AuthenticateModal/useAuthenticateModal.ts @@ -0,0 +1,24 @@ +import { defineAsyncComponent } from 'vue' +import { type ModalReactive } from 'naive-ui' +import { type ModalApiInjection } from 'naive-ui/lib/modal/src/ModalProvider' +import { type EAuthenticateModalType } from '@/modules/landing/modules/authenticate/components/AuthenticateModal/EAuthenticateModalType' +const AuthenticateModal = defineAsyncComponent(() => import('@/modules/landing/modules/authenticate/components/AuthenticateModal/AuthenticateModal.vue')) + +export const useAuthenticateModal = (modal: ModalApiInjection) => { + const { t } = useI18n() + const modalInst = ref() + + const openAuthenticateModal = (type: EAuthenticateModalType) => { + modalInst.value = modal.create({ + title: t('authentication'), + content: () => h(AuthenticateModal, { type }), + preset: 'dialog', + transformOrigin: 'center', + showIcon: false, + }) + } + + return { + openAuthenticateModal, + } +} diff --git a/src/modules/workspace/layouts/WorkspaceLayout.vue b/src/modules/workspace/layouts/WorkspaceLayout.vue index efc90c2..dee017b 100644 --- a/src/modules/workspace/layouts/WorkspaceLayout.vue +++ b/src/modules/workspace/layouts/WorkspaceLayout.vue @@ -1,6 +1,6 @@ diff --git a/src/modules/workspace/modules/office/layouts/OfficeLayout.vue b/src/modules/workspace/modules/office/layouts/OfficeLayout.vue index f0252d4..2e4b632 100644 --- a/src/modules/workspace/modules/office/layouts/OfficeLayout.vue +++ b/src/modules/workspace/modules/office/layouts/OfficeLayout.vue @@ -1,6 +1,6 @@ diff --git a/vite.config.ts b/vite.config.ts index 1772aa2..3f09fd9 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,5 +1,5 @@ /// -import { defineConfig } from 'vite' +import { defineConfig, splitVendorChunkPlugin } from 'vite' import vue from '@vitejs/plugin-vue' import { VitePWA } from 'vite-plugin-pwa' import Components from 'unplugin-vue-components/vite' @@ -68,6 +68,7 @@ export default defineConfig({ display: 'standalone', }, }), + splitVendorChunkPlugin(), ], test: { // https://vitest.dev/guide/common-errors#failed-to-terminate-worker