Compare commits

..

14 Commits

Author SHA1 Message Date
Anthony LC 8ad708aac6 test-other-kind-cursor 2025-02-07 21:46:31 +01:00
renovate[bot] a63afffbd6 ⬆️(dependencies) update js dependencies 2025-02-07 18:29:24 +01:00
Anthony LC ebe3efc8f7 💄(frontend) update the favicon
Update the favicon with a better one.
2025-02-07 18:18:22 +01:00
Anthony LC 66fbf27913 🩹(frontend) fix PageLayout
The page layout was rendered behind the header,
which caused the top of the mention legales pages
to be hidden.
This commit fixes this issue.
2025-02-07 18:18:22 +01:00
Anthony LC 20e4a4e42a 🥚(frontend) easter egg in dev tools
Add a easter egg in the browser dev tools.
2025-02-07 18:18:22 +01:00
Anthony LC 1aa4844eeb 🎨(frontend) add dsfr proconnect homepage
If we are with the DSFR theme, we need to add the
proconnect button to the homepage.
We add an option in the cunningham theme to
display the proconnect section instead of the
opensource section.
2025-02-07 18:18:22 +01:00
Nathan Panchout 4bb9c092cb (frontend) add white label homepage
Add white label homepage with new assets and
components. When the user is not logged in,
the homepage will be displayed.
2025-02-07 18:18:22 +01:00
Anthony LC c493eb8924 ♻️(frontend) use a hook instead of a store for auth
We will use a hook instead of a store for the auth
feature. The hook will be powered by ReactQuery,
it will provide us fine-grained control over the
auth state and will be easier to use.
2025-02-07 18:18:22 +01:00
Anthony LC 40fdf97520 🚚(frontend) move auth to its own feature
We will move auth to its own feature to make it
easier to manage and to make it more modular.
2025-02-07 18:18:22 +01:00
Anthony LC 91b10e75dd 💄(email) fix line height email title
The line height of the email title was not
the correct size. We let the title managing
its own line height.
2025-02-07 17:05:49 +01:00
Anthony LC 7a6da10e1c 🐛(i18n) add back the missing email translations
We changed the way we upload the translations to
Crowdin, some translations were missing for the
email templates. We add them back and improve
the tests to make sure we don't forget them again.
2025-02-07 17:05:49 +01:00
Anthony LC 004e8ec645 🌐(CI) build mails when crowdin_upload workflow
When we were executing the crowdin_upload workflow,
we were not building the mail template to dispatch it
to the backend. It resulted in the mail not being
totally translated. This commit fixes that issue
by adding the build mail step to the crowdin_upload.
To do so, we added it to the dependencies workflow.
"dependencies" workflow is callable by other
workflows that need a specific job.
2025-02-07 17:05:49 +01:00
virgile-deville a1bca9c436 📝(doc) add security.md and conduct.md policies
We need a safe way for people to report vulnerabilities.
People now can go on SECURITY.md and follow our policy.

We want to have a policy for expected behaviour.
People can check out CODE_OF_CONDUCT.md.
2025-02-02 14:53:29 +01:00
Sylvain Zimmer d02fa1ddd4 ✏️(readme) fix a few typos
Found a few errors after proof-reading the README
2025-01-30 19:00:56 +01:00
109 changed files with 2673 additions and 1069 deletions
+3 -2
View File
@@ -7,10 +7,11 @@ on:
- 'release/**'
jobs:
install-front:
uses: ./.github/workflows/front-dependencies-installation.yml
install-dependencies:
uses: ./.github/workflows/dependencies.yml
with:
node_version: '20.x'
with-front-dependencies-installation: true
synchronize-with-crowdin:
runs-on: ubuntu-latest
+12 -3
View File
@@ -7,13 +7,15 @@ on:
- main
jobs:
install-front:
uses: ./.github/workflows/front-dependencies-installation.yml
install-dependencies:
uses: ./.github/workflows/dependencies.yml
with:
node_version: '20.x'
with-front-dependencies-installation: true
with-build_mails: true
synchronize-with-crowdin:
needs: install-front
needs: install-dependencies
runs-on: ubuntu-latest
steps:
@@ -29,6 +31,13 @@ jobs:
- name: Install development dependencies
run: pip install --user .
working-directory: src/backend
- name: Restore the mail templates
uses: actions/cache@v4
id: mail-templates
with:
path: "src/backend/core/templates/mail"
key: mail-templates-${{ hashFiles('src/mail/mjml') }}
fail-on-cache-miss: true
- name: Install gettext
run: |
sudo apt-get update
+85
View File
@@ -0,0 +1,85 @@
name: Dependency reusable workflow
on:
workflow_call:
inputs:
node_version:
required: false
default: '20.x'
type: string
with-front-dependencies-installation:
type: boolean
default: false
with-build_mails:
type: boolean
default: false
jobs:
front-dependencies-installation:
if: ${{ inputs.with-front-dependencies-installation == true }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Restore the frontend cache
uses: actions/cache@v4
id: front-node_modules
with:
path: "src/frontend/**/node_modules"
key: front-node_modules-${{ hashFiles('src/frontend/**/yarn.lock') }}
- name: Setup Node.js
if: steps.front-node_modules.outputs.cache-hit != 'true'
uses: actions/setup-node@v4
with:
node-version: ${{ inputs.node_version }}
- name: Install dependencies
if: steps.front-node_modules.outputs.cache-hit != 'true'
run: cd src/frontend/ && yarn install --frozen-lockfile
- name: Cache install frontend
if: steps.front-node_modules.outputs.cache-hit != 'true'
uses: actions/cache@v4
with:
path: "src/frontend/**/node_modules"
key: front-node_modules-${{ hashFiles('src/frontend/**/yarn.lock') }}
build-mails:
if: ${{ inputs.with-build_mails == true }}
runs-on: ubuntu-latest
defaults:
run:
working-directory: src/mail
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Restore the mail templates
uses: actions/cache@v4
id: mail-templates
with:
path: "src/backend/core/templates/mail"
key: mail-templates-${{ hashFiles('src/mail/mjml') }}
- name: Setup Node.js
if: steps.mail-templates.outputs.cache-hit != 'true'
uses: actions/setup-node@v4
with:
node-version: ${{ inputs.node_version }}
- name: Install yarn
if: steps.mail-templates.outputs.cache-hit != 'true'
run: npm install -g yarn
- name: Install node dependencies
if: steps.mail-templates.outputs.cache-hit != 'true'
run: yarn install --frozen-lockfile
- name: Build mails
if: steps.mail-templates.outputs.cache-hit != 'true'
run: yarn build
- name: Cache mail templates
if: steps.mail-templates.outputs.cache-hit != 'true'
uses: actions/cache@v4
with:
path: "src/backend/core/templates/mail"
key: mail-templates-${{ hashFiles('src/mail/mjml') }}
@@ -1,36 +0,0 @@
name: Install frontend installation reusable workflow
on:
workflow_call:
inputs:
node_version:
required: false
default: '20.x'
type: string
jobs:
front-dependencies-installation:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Restore the frontend cache
uses: actions/cache@v4
id: front-node_modules
with:
path: "src/frontend/**/node_modules"
key: front-node_modules-${{ hashFiles('src/frontend/**/yarn.lock') }}
- name: Setup Node.js
if: steps.front-node_modules.outputs.cache-hit != 'true'
uses: actions/setup-node@v4
with:
node-version: ${{ inputs.node_version }}
- name: Install dependencies
if: steps.front-node_modules.outputs.cache-hit != 'true'
run: cd src/frontend/ && yarn install --frozen-lockfile
- name: Cache install frontend
if: steps.front-node_modules.outputs.cache-hit != 'true'
uses: actions/cache@v4
with:
path: "src/frontend/**/node_modules"
key: front-node_modules-${{ hashFiles('src/frontend/**/yarn.lock') }}
+6 -5
View File
@@ -10,13 +10,14 @@ on:
jobs:
install-front:
uses: ./.github/workflows/front-dependencies-installation.yml
install-dependencies:
uses: ./.github/workflows/dependencies.yml
with:
node_version: '20.x'
with-front-dependencies-installation: true
test-front:
needs: install-front
needs: install-dependencies
runs-on: ubuntu-latest
steps:
- name: Checkout repository
@@ -39,7 +40,7 @@ jobs:
lint-front:
runs-on: ubuntu-latest
needs: install-front
needs: install-dependencies
steps:
- name: Checkout repository
uses: actions/checkout@v4
@@ -60,7 +61,7 @@ jobs:
test-e2e-chromium:
runs-on: ubuntu-latest
needs: install-front
needs: install-dependencies
timeout-minutes: 20
steps:
- name: Checkout repository
+7 -41
View File
@@ -9,6 +9,11 @@ on:
- "*"
jobs:
install-dependencies:
uses: ./.github/workflows/dependencies.yml
with:
with-build_mails: true
lint-git:
runs-on: ubuntu-latest
if: github.event_name == 'pull_request' # Makes sense only for pull requests
@@ -56,46 +61,6 @@ jobs:
exit 1
fi
build-mails:
runs-on: ubuntu-latest
defaults:
run:
working-directory: src/mail
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Install Node.js
uses: actions/setup-node@v4
with:
node-version: "18"
- name: Restore the mail templates
uses: actions/cache@v4
id: mail-templates
with:
path: "src/backend/core/templates/mail"
key: mail-templates-${{ hashFiles('src/mail/mjml') }}
- name: Install yarn
if: steps.mail-templates.outputs.cache-hit != 'true'
run: npm install -g yarn
- name: Install node dependencies
if: steps.mail-templates.outputs.cache-hit != 'true'
run: yarn install --frozen-lockfile
- name: Build mails
if: steps.mail-templates.outputs.cache-hit != 'true'
run: yarn build
- name: Cache mail templates
if: steps.mail-templates.outputs.cache-hit != 'true'
uses: actions/cache@v4
with:
path: "src/backend/core/templates/mail"
key: mail-templates-${{ hashFiles('src/mail/mjml') }}
lint-back:
runs-on: ubuntu-latest
defaults:
@@ -121,7 +86,7 @@ jobs:
test-back:
runs-on: ubuntu-latest
needs: build-mails
needs: install-dependencies
defaults:
run:
@@ -169,6 +134,7 @@ jobs:
with:
path: "src/backend/core/templates/mail"
key: mail-templates-${{ hashFiles('src/mail/mjml') }}
fail-on-cache-miss: true
- name: Start MinIO
run: |
+9
View File
@@ -9,6 +9,15 @@ and this project adheres to
## [Unreleased]
## Added
- 📝(doc) Add security.md and codeofconduct.md #604
- ✨(frontend) add home page #553
## Fixed
🌐(CI) Fix email partially translated #616
## [2.1.0] - 2025-01-29
+75
View File
@@ -0,0 +1,75 @@
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our community include:
- Demonstrating empathy and kindness toward other people
- Being respectful of differing opinions, viewpoints, and experiences
- Giving and gracefully accepting constructive feedback
- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience
- Focusing on what is best not just for us as individuals, but for the overall community
Examples of unacceptable behavior include:
- The use of sexualized language or imagery, and sexual attention or advances of any kind
- Trolling, insulting or derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or email address, without their explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting
## Enforcement Responsibilities
- Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful.
- Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate.
## Scope
- This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event.
## Enforcement
- Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at docs@numerique.gouv.fr.
- All complaints will be reviewed and investigated promptly and fairly.
- All community leaders are obligated to respect the privacy and security of the reporter of any incident.
## Enforcement Guidelines
- Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this
## Code of Conduct:
1. Correction
Community Impact: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community.
Consequence: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested.
2. Warning
Community Impact: A violation through a single incident or series of actions.
Consequence: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban.
3. Temporary Ban
Community Impact: A serious violation of community standards, including sustained inappropriate behavior.
Consequence: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban.
4. Permanent Ban
Community Impact: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals.
Consequence: A permanent ban from any sort of public interaction within the community.
Attribution
This Code of Conduct is adapted from the Contributor Covenant, version 2.1, available at https://www.contributor-covenant.org/version/2/1/code_of_conduct.html.
Community Impact Guidelines were inspired by Mozilla's code of conduct enforcement ladder.
For answers to common questions about this code of conduct, see the FAQ at https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations.
+8 -7
View File
@@ -13,8 +13,10 @@ Welcome to Docs! The open source document editor where your notes can become kno
Chat on Matrix
</a> - <a href="/docs/">
Documentation
</a> - <a href="#getting-started">
</a> - <a href="#getting-started-">
Getting started
</a> - <a href="mailto:docs@numerique.gouv.fr">
Reach out
</a>
</p>
@@ -60,7 +62,7 @@ $ docker compose -v
docker compose version 1.27.4, build 40524192
```
> ⚠️ You may need to run the following commands with sudo but this can be avoided by assigning your user to the `docker` group.
> ⚠️ You may need to run the following commands with sudo but this can be avoided by adding your user to the `docker` group.
**Project bootstrap**
The easiest way to start working on the project is to use GNU Make:
@@ -71,7 +73,7 @@ $ make bootstrap FLUSH_ARGS='--no-input'
This command builds the `app` container, installs dependencies, performs database migrations and compile translations. It's a good idea to use this
command each time you are pulling code from the project repository to avoid dependency-releated or migration-releated issues.
command each time you are pulling code from the project repository to avoid dependency-related or migration-related issues.
Your Docker services should now be up and running 🎉
@@ -79,9 +81,8 @@ You can access to the project by going to <http://localhost:3000>.
You will be prompted to log in, the default credentials are:
```shellscript
```
username: impress
password: impress
```
@@ -172,11 +173,11 @@ docs
Docs is built on top of [Django Rest Framework](https://www.django-rest-framework.org/), [Next.js](https://nextjs.org/), [MinIO](https://min.io/), [BlockNote.js](https://www.blocknotejs.org/), [HocusPocus](https://tiptap.dev/docs/hocuspocus/introduction) and [Yjs](https://yjs.dev/)
### Gov ❤️ open source
Docs is the result of a joint effort lead by the French 🇫🇷🥖 ([DINUM](https://www.numerique.gouv.fr/dinum/)) and German 🇩🇪🥨 governments ([ZenDiS](https://zendis.de/)).
Docs is the result of a joint effort led by the French 🇫🇷🥖 ([DINUM](https://www.numerique.gouv.fr/dinum/)) and German 🇩🇪🥨 governments ([ZenDiS](https://zendis.de/)).
We are proud sponsors of [BlockNotejs](https://www.blocknotejs.org/) and [Yjs](https://yjs.dev/).
We are always looking for new public partners (we are currently onboarding the Netherlands 🇳🇱🧀), feel free to [reach out](https://matrix.to/#/#docs-official:matrix.org) if you are interested in using or contributing to Docs.
We are always looking for new public partners (we are currently onboarding the Netherlands 🇳🇱🧀), feel free to [reach out](mailto:docs@numerique.gouv.fr) if you are interested in using or contributing to Docs.
<p align="center">
<img src="/docs/assets/europe_opensource.png" width="50%"/>
+23
View File
@@ -0,0 +1,23 @@
# Security Policy
## Reporting a Vulnerability
Security is very important to us.
If you have any issue regarding security, please disclose the information responsibly submiting [this form](https://vdp.numerique.gouv.fr/p/Send-a-report?lang=en) and not by creating an issue on the repository. You can also email us at docs@numerique.gouv.fr
We appreciate your effort to make Docs more secure.
## Vulnerability disclosure policy
Working with security issues in an open source project can be challenging, as we are required to disclose potential problems that could be exploited by attackers. With this in mind, our security fix policy is as follows:
1. The Maintainers team will handle the fix as usual (Pull Request,
release).
2. In the release notes, we will include the identification numbers from the
GitHub Advisory Database (GHSA) and, if applicable, the Common Vulnerabilities
and Exposures (CVE) identifier for the vulnerability.
3. Once this grace period has passed, we will publish the vulnerability.
By adhering to this security policy, we aim to address security concerns
effectively and responsibly in our open source software project.
@@ -458,6 +458,10 @@ def test_api_document_invitations_create_email_from_content_language():
email_content = " ".join(email.body.split())
assert f"{user.full_name} a partagé un document avec vous!" in email_content
assert (
"Docs, votre nouvel outil incontournable pour organiser, partager et collaborer "
"sur vos documents en équipe." in email_content
)
def test_api_document_invitations_create_email_from_content_language_not_supported():
+23 -2
View File
@@ -2,8 +2,8 @@ msgid ""
msgstr ""
"Project-Id-Version: lasuite-docs\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2025-01-29 13:43+0000\n"
"PO-Revision-Date: 2025-01-30 10:24\n"
"POT-Creation-Date: 2025-02-06 15:30+0000\n"
"PO-Revision-Date: 2025-02-06 15:59\n"
"Last-Translator: \n"
"Language-Team: German\n"
"Language: de_DE\n"
@@ -391,3 +391,24 @@ msgstr "Französisch"
msgid "German"
msgstr "Deutsch"
#: core/templates/mail/html/invitation.html:162
#: core/templates/mail/text/invitation.txt:3
msgid "Logo email"
msgstr "Logo-E-Mail"
#: core/templates/mail/html/invitation.html:209
#: core/templates/mail/text/invitation.txt:10
msgid "Open"
msgstr "Öffnen"
#: core/templates/mail/html/invitation.html:226
#: core/templates/mail/text/invitation.txt:14
msgid " Docs, your new essential tool for organizing, sharing and collaborating on your documents as a team. "
msgstr " Docs, Ihr neues unentbehrliches Werkzeug für die Organisation, den Austausch und die Zusammenarbeit in Ihren Dokumenten als Team. "
#: core/templates/mail/html/invitation.html:233
#: core/templates/mail/text/invitation.txt:16
#, python-format
msgid " Brought to you by %(brandname)s "
msgstr " Erstellt von %(brandname)s "
+23 -2
View File
@@ -2,8 +2,8 @@ msgid ""
msgstr ""
"Project-Id-Version: lasuite-docs\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2025-01-29 13:43+0000\n"
"PO-Revision-Date: 2025-01-30 10:24\n"
"POT-Creation-Date: 2025-02-06 15:30+0000\n"
"PO-Revision-Date: 2025-02-06 15:57\n"
"Last-Translator: \n"
"Language-Team: English\n"
"Language: en_US\n"
@@ -391,3 +391,24 @@ msgstr ""
msgid "German"
msgstr ""
#: core/templates/mail/html/invitation.html:162
#: core/templates/mail/text/invitation.txt:3
msgid "Logo email"
msgstr ""
#: core/templates/mail/html/invitation.html:209
#: core/templates/mail/text/invitation.txt:10
msgid "Open"
msgstr ""
#: core/templates/mail/html/invitation.html:226
#: core/templates/mail/text/invitation.txt:14
msgid " Docs, your new essential tool for organizing, sharing and collaborating on your documents as a team. "
msgstr ""
#: core/templates/mail/html/invitation.html:233
#: core/templates/mail/text/invitation.txt:16
#, python-format
msgid " Brought to you by %(brandname)s "
msgstr ""
+23 -2
View File
@@ -2,8 +2,8 @@ msgid ""
msgstr ""
"Project-Id-Version: lasuite-docs\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2025-01-29 13:43+0000\n"
"PO-Revision-Date: 2025-01-30 10:24\n"
"POT-Creation-Date: 2025-02-06 15:30+0000\n"
"PO-Revision-Date: 2025-02-06 15:59\n"
"Last-Translator: \n"
"Language-Team: French\n"
"Language: fr_FR\n"
@@ -391,3 +391,24 @@ msgstr ""
msgid "German"
msgstr ""
#: core/templates/mail/html/invitation.html:162
#: core/templates/mail/text/invitation.txt:3
msgid "Logo email"
msgstr "Logo de l'e-mail"
#: core/templates/mail/html/invitation.html:209
#: core/templates/mail/text/invitation.txt:10
msgid "Open"
msgstr "Ouvrir"
#: core/templates/mail/html/invitation.html:226
#: core/templates/mail/text/invitation.txt:14
msgid " Docs, your new essential tool for organizing, sharing and collaborating on your documents as a team. "
msgstr " Docs, votre nouvel outil incontournable pour organiser, partager et collaborer sur vos documents en équipe. "
#: core/templates/mail/html/invitation.html:233
#: core/templates/mail/text/invitation.txt:16
#, python-format
msgid " Brought to you by %(brandname)s "
msgstr " Proposé par %(brandname)s "
+23 -2
View File
@@ -2,8 +2,8 @@ msgid ""
msgstr ""
"Project-Id-Version: lasuite-docs\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2025-01-29 13:43+0000\n"
"PO-Revision-Date: 2025-01-30 10:24\n"
"POT-Creation-Date: 2025-02-06 15:30+0000\n"
"PO-Revision-Date: 2025-02-06 15:57\n"
"Last-Translator: \n"
"Language-Team: Dutch\n"
"Language: nl_NL\n"
@@ -391,3 +391,24 @@ msgstr ""
msgid "German"
msgstr ""
#: core/templates/mail/html/invitation.html:162
#: core/templates/mail/text/invitation.txt:3
msgid "Logo email"
msgstr ""
#: core/templates/mail/html/invitation.html:209
#: core/templates/mail/text/invitation.txt:10
msgid "Open"
msgstr ""
#: core/templates/mail/html/invitation.html:226
#: core/templates/mail/text/invitation.txt:14
msgid " Docs, your new essential tool for organizing, sharing and collaborating on your documents as a team. "
msgstr ""
#: core/templates/mail/html/invitation.html:233
#: core/templates/mail/text/invitation.txt:16
#, python-format
msgid " Brought to you by %(brandname)s "
msgstr ""
@@ -1,6 +1,17 @@
import { Page, expect } from '@playwright/test';
export const keyCloakSignIn = async (page: Page, browserName: string) => {
export const keyCloakSignIn = async (
page: Page,
browserName: string,
fromHome: boolean = true,
) => {
if (fromHome) {
await page
.getByRole('button', { name: 'Proconnect Login' })
.first()
.click();
}
const login = `user-e2e-${browserName}`;
const password = `password-e2e-${browserName}`;
@@ -258,3 +269,8 @@ export const mockedAccesses = async (page: Page, json?: object) => {
}
});
};
export const expectLoginPage = async (page: Page) =>
await expect(
page.getByRole('heading', { name: 'Collaborative writing' }),
).toBeVisible();
@@ -63,27 +63,6 @@ test.describe('Config', () => {
expect((await consoleMessage).text()).toContain(invalidMsg);
});
test('it checks that theme is configured from config endpoint', async ({
page,
}) => {
const responsePromise = page.waitForResponse(
(response) =>
response.url().includes('/config/') && response.status() === 200,
);
await page.goto('/');
const response = await responsePromise;
expect(response.ok()).toBeTruthy();
const jsonResponse = await response.json();
expect(jsonResponse.FRONTEND_THEME).toStrictEqual('dsfr');
const footer = page.locator('footer').first();
// alt 'Gouvernement Logo' comes from the theme
await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible();
});
test('it checks that media server is configured from config endpoint', async ({
page,
browserName,
@@ -161,3 +140,28 @@ test.describe('Config', () => {
).toBeVisible();
});
});
test.describe('Config: Not loggued', () => {
test.use({ storageState: { cookies: [], origins: [] } });
test('it checks that theme is configured from config endpoint', async ({
page,
}) => {
const responsePromise = page.waitForResponse(
(response) =>
response.url().includes('/config/') && response.status() === 200,
);
await page.goto('/');
const response = await responsePromise;
expect(response.ok()).toBeTruthy();
const jsonResponse = await response.json();
expect(jsonResponse.FRONTEND_THEME).toStrictEqual('dsfr');
const footer = page.locator('footer').first();
// alt 'Gouvernement Logo' comes from the theme
await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible();
});
});
@@ -24,8 +24,6 @@ test.describe('Doc Create', () => {
const header = page.locator('header').first();
await header.locator('h2').getByText('Docs').click();
await expect(page.getByTestId('grid-loader')).toBeVisible();
const docsGrid = page.getByTestId('docs-grid');
await expect(docsGrid).toBeVisible();
await expect(page.getByTestId('grid-loader')).toBeHidden();
@@ -213,7 +213,6 @@ test.describe('Document grid item options', () => {
test.describe('Documents filters', () => {
test('it checks the prebuild left panel filters', async ({ page }) => {
// All Docs
await expect(page.getByTestId('grid-loader')).toBeVisible();
const response = await page.waitForResponse(
(response) =>
response.url().endsWith('documents/?page=1') &&
@@ -254,7 +253,6 @@ test.describe('Documents filters', () => {
url = new URL(page.url());
target = url.searchParams.get('target');
expect(target).toBe('my_docs');
await expect(page.getByTestId('grid-loader')).toBeVisible();
const responseMyDocs = await page.waitForResponse(
(response) =>
response.url().endsWith('documents/?page=1&is_creator_me=true') &&
@@ -270,7 +268,6 @@ test.describe('Documents filters', () => {
url = new URL(page.url());
target = url.searchParams.get('target');
expect(target).toBe('shared_with_me');
await expect(page.getByTestId('grid-loader')).toBeVisible();
const responseSharedWithMe = await page.waitForResponse(
(response) =>
response.url().includes('documents/?page=1&is_creator_me=false') &&
@@ -291,8 +288,6 @@ test.describe('Documents Grid', () => {
test('checks all the elements are visible', async ({ page }) => {
let docs: SmallDoc[] = [];
await expect(page.getByTestId('grid-loader')).toBeVisible();
const response = await page.waitForResponse(
(response) =>
response.url().endsWith('documents/?page=1') &&
@@ -1,6 +1,6 @@
import { expect, test } from '@playwright/test';
import { keyCloakSignIn, mockedDocument } from './common';
import { expectLoginPage, keyCloakSignIn, mockedDocument } from './common';
test.describe('Doc Routing', () => {
test.beforeEach(async ({ page }) => {
@@ -63,16 +63,13 @@ test.describe('Doc Routing: Not loggued', () => {
await page.goto('/docs/mocked-document-id/');
await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
await page.getByRole('button', { name: 'Login' }).click();
await keyCloakSignIn(page, browserName);
await keyCloakSignIn(page, browserName, false);
await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
});
// eslint-disable-next-line playwright/expect-expect
test('The homepage redirects to login.', async ({ page }) => {
await page.goto('/');
await expect(
page.getByRole('button', {
name: 'Sign In',
}),
).toBeVisible();
await expectLoginPage(page);
});
});
@@ -1,6 +1,11 @@
import { expect, test } from '@playwright/test';
import { createDoc, keyCloakSignIn, verifyDocName } from './common';
import {
createDoc,
expectLoginPage,
keyCloakSignIn,
verifyDocName,
} from './common';
const browsersName = ['chromium', 'webkit', 'firefox'];
@@ -91,7 +96,7 @@ test.describe('Doc Visibility: Restricted', () => {
})
.click();
await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
await expectLoginPage(page);
await page.goto(urlDoc);
@@ -121,6 +126,10 @@ test.describe('Doc Visibility: Restricted', () => {
await keyCloakSignIn(page, otherBrowser!);
await expect(
page.getByRole('link', { name: 'Docs Logo Docs BETA' }),
).toBeVisible();
await page.goto(urlDoc);
await expect(
@@ -169,10 +178,11 @@ test.describe('Doc Visibility: Restricted', () => {
await keyCloakSignIn(page, otherBrowser!);
await page.goto(urlDoc);
await expect(
page.getByRole('link', { name: 'Docs Logo Docs BETA' }),
).toBeVisible();
// eslint-disable-next-line playwright/no-wait-for-timeout
await page.waitForTimeout(1000);
await page.goto(urlDoc);
await verifyDocName(page, docTitle);
await expect(page.getByLabel('Share button')).toBeVisible();
@@ -247,7 +257,7 @@ test.describe('Doc Visibility: Public', () => {
})
.click();
await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
await expectLoginPage(page);
await page.goto(urlDoc);
@@ -313,7 +323,7 @@ test.describe('Doc Visibility: Public', () => {
})
.click();
await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
await expectLoginPage(page);
await page.goto(urlDoc);
@@ -364,7 +374,7 @@ test.describe('Doc Visibility: Authenticated', () => {
})
.click();
await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
await expectLoginPage(page);
await page.goto(urlDoc);
@@ -414,6 +424,10 @@ test.describe('Doc Visibility: Authenticated', () => {
const otherBrowser = browsersName.find((b) => b !== browserName);
await keyCloakSignIn(page, otherBrowser!);
await expect(
page.getByRole('link', { name: 'Docs Logo Docs BETA' }),
).toBeVisible();
await page.goto(urlDoc);
await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
@@ -470,6 +484,10 @@ test.describe('Doc Visibility: Authenticated', () => {
const otherBrowser = browsersName.find((b) => b !== browserName);
await keyCloakSignIn(page, otherBrowser!);
await expect(
page.getByRole('link', { name: 'Docs Logo Docs BETA' }),
).toBeVisible();
await page.goto(urlDoc);
await verifyDocName(page, docTitle);
@@ -1,13 +1,10 @@
import { expect, test } from '@playwright/test';
import { goToGridDoc } from './common';
test.beforeEach(async ({ page }) => {
await page.goto('/');
});
test.describe('Footer', () => {
test.use({ storageState: { cookies: [], origins: [] } });
test('checks all the elements are visible', async ({ page }) => {
await page.goto('/');
const footer = page.locator('footer').first();
await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible();
@@ -47,12 +44,6 @@ test.describe('Footer', () => {
).toBeVisible();
});
test('checks footer is not visible on doc editor', async ({ page }) => {
await expect(page.locator('footer')).toBeVisible();
await goToGridDoc(page);
await expect(page.locator('footer')).toBeHidden();
});
const legalPages = [
{ name: 'Legal Notice', url: '/legal-notice/' },
{ name: 'Personal data and cookies', url: '/personal-data-cookies/' },
@@ -60,6 +51,8 @@ test.describe('Footer', () => {
];
for (const { name, url } of legalPages) {
test(`checks ${name} page`, async ({ page }) => {
await page.goto('/');
const footer = page.locator('footer').first();
await footer.getByRole('link', { name }).click();
@@ -1,6 +1,6 @@
import { expect, test } from '@playwright/test';
import { keyCloakSignIn } from './common';
import { expectLoginPage, keyCloakSignIn } from './common';
test.describe('Header', () => {
test.beforeEach(async ({ page }) => {
@@ -98,6 +98,6 @@ test.describe('Header: Log out', () => {
})
.click();
await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
await expectLoginPage(page);
});
});
@@ -0,0 +1,52 @@
import { expect, test } from '@playwright/test';
test.beforeEach(async ({ page }) => {
await page.goto('/docs/');
});
test.describe('Home page', () => {
test.use({ storageState: { cookies: [], origins: [] } });
test('checks all the elements are visible', async ({ page }) => {
// Check header content
const header = page.locator('header').first();
const footer = page.locator('footer').first();
await expect(header).toBeVisible();
await expect(
header.getByRole('combobox', { name: 'Language' }),
).toBeVisible();
await expect(
header.getByRole('button', { name: 'Les services de La Suite numé' }),
).toBeVisible();
await expect(
header.getByRole('img', { name: 'Gouvernement Logo' }),
).toBeVisible();
await expect(header.getByRole('img', { name: 'Docs logo' })).toBeVisible();
await expect(header.getByRole('heading', { name: 'Docs' })).toBeVisible();
await expect(header.getByText('BETA')).toBeVisible();
// Check the titles
const h2 = page.locator('h2');
await expect(
h2.getByText('Collaborative writing, Simplified.'),
).toBeVisible();
await expect(
h2.getByText('An uncompromising writing experience.'),
).toBeVisible();
await expect(
h2.getByText('Simple and secure collaboration.'),
).toBeVisible();
await expect(h2.getByText('Flexible export.')).toBeVisible();
await expect(
h2.getByText('A new way to organize knowledge.'),
).toBeVisible();
await expect(
page.getByText('Docs is already available, log in to use it now.'),
).toBeVisible();
await expect(
page.getByRole('button', { name: 'Proconnect Login' }),
).toHaveCount(2);
await expect(footer).toBeVisible();
});
});
+1 -1
View File
@@ -12,7 +12,7 @@
"test:ui::chromium": "yarn test:ui --project=chromium"
},
"devDependencies": {
"@playwright/test": "1.50.0",
"@playwright/test": "1.50.1",
"@types/node": "*",
"@types/pdf-parse": "1.1.4",
"eslint-config-impress": "*",
+15 -3
View File
@@ -5,6 +5,7 @@ const config = {
colors: {
'card-border': '#ededed',
'primary-bg': '#FAFAFA',
'primary-action': '#1212FF',
'primary-050': '#F5F5FE',
'primary-100': '#EDF5FA',
'primary-150': '#E5EEFA',
@@ -59,6 +60,11 @@ const config = {
h4: '1.375rem',
h5: '1.25rem',
h6: '1.125rem',
'xl-alt': '5rem',
'lg-alt': '4.5rem',
'md-alt': '4rem',
'sm-alt': '3.5rem',
'xs-alt': '3rem',
},
weights: {
thin: 100,
@@ -224,7 +230,7 @@ const config = {
'color-hover': 'var(--c--theme--colors--primary-700)',
},
border: {
color: 'var(--c--theme--colors--primary-200)',
color: 'var(--c--theme--colors--greyscale-300)',
},
},
tertiary: {
@@ -247,6 +253,9 @@ const config = {
'la-gauffre': {
activated: false,
},
'home-proconnect': {
activated: false,
},
},
},
dsfr: {
@@ -379,8 +388,8 @@ const config = {
'color-active': '#EDEDED',
},
border: {
color: 'var(--c--theme--colors--primary-600)',
'color-hover': 'var(--c--theme--colors--primary-600)',
color: 'var(--c--theme--colors--greyscale-300)',
'color-hover': 'var(--c--theme--colors--greyscale-300)',
},
color: 'var(--c--theme--colors--primary-text)',
},
@@ -462,6 +471,9 @@ const config = {
'la-gauffre': {
activated: true,
},
'home-proconnect': {
activated: true,
},
},
},
},
+13 -13
View File
@@ -15,34 +15,34 @@
"test:watch": "jest --watch"
},
"dependencies": {
"@blocknote/core": "0.21.0",
"@blocknote/mantine": "0.21.0",
"@blocknote/react": "0.21.0",
"@blocknote/xl-docx-exporter": "0.21.0",
"@blocknote/xl-pdf-exporter": "0.21.0",
"@blocknote/core": "0.23.2",
"@blocknote/mantine": "0.23.2",
"@blocknote/react": "0.23.2",
"@blocknote/xl-docx-exporter": "0.23.2",
"@blocknote/xl-pdf-exporter": "0.23.2",
"@gouvfr-lasuite/integration": "1.0.2",
"@hocuspocus/provider": "2.15.1",
"@hocuspocus/provider": "2.15.2",
"@openfun/cunningham-react": "2.9.4",
"@react-pdf/renderer": "4.1.6",
"@sentry/nextjs": "8.52.0",
"@tanstack/react-query": "5.65.1",
"@react-pdf/renderer": "4.2.1",
"@sentry/nextjs": "8.54.0",
"@tanstack/react-query": "5.66.0",
"cmdk": "1.0.4",
"crisp-sdk-web": "1.0.25",
"docx": "9.1.1",
"i18next": "24.2.2",
"i18next-browser-languagedetector": "8.0.2",
"idb": "8.0.1",
"idb": "8.0.2",
"lodash": "4.17.21",
"luxon": "3.5.0",
"next": "15.1.6",
"posthog-js": "1.211.3",
"posthog-js": "1.215.6",
"react": "*",
"react-aria-components": "1.6.0",
"react-dom": "*",
"react-i18next": "15.4.0",
"react-intersection-observer": "9.15.1",
"react-select": "5.10.0",
"styled-components": "6.1.14",
"styled-components": "6.1.15",
"use-debounce": "10.0.4",
"y-protocols": "1.0.6",
"yjs": "13.6.23",
@@ -50,7 +50,7 @@
},
"devDependencies": {
"@svgr/webpack": "8.1.0",
"@tanstack/react-query-devtools": "5.65.1",
"@tanstack/react-query-devtools": "5.66.0",
"@testing-library/dom": "10.4.0",
"@testing-library/jest-dom": "6.6.3",
"@testing-library/react": "16.2.0",
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

@@ -0,0 +1,18 @@
<svg
width="32"
height="33"
viewBox="0 0 32 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.6305 29.5812C22.7983 29.2538 23.9166 28.6562 24.6505 27.6003C25.3749 26.5663 25.5789 25.2547 25.5789 23.9925V5.50099C25.5789 5.17358 25.5611 4.84557 25.5216 4.52148C26.1016 4.74961 26.5486 5.12658 26.8626 5.65239C27.2331 6.25024 27.4184 7.03757 27.4184 8.01435V26.7964C27.4184 28.1184 27.0942 29.1078 26.4458 29.7646C25.7974 30.4214 24.8207 30.7498 23.5155 30.7498H16.4209C16.5889 30.7204 16.7574 30.6901 16.9262 30.659C18.4067 30.3944 19.9713 30.0354 21.6185 29.5846L21.6305 29.5812Z"
fill="#C9191E"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.58203 26.405V7.5977C4.58203 6.45251 4.88938 5.58519 5.50408 4.99575C6.1272 4.40631 6.95242 4.08212 7.97972 4.02318C9.49542 3.93055 10.9311 3.80425 12.2868 3.64425C13.6425 3.47584 14.9393 3.28217 16.1771 3.06324C17.4234 2.8443 18.6359 2.60011 19.8148 2.33065C21.0274 2.04435 21.9578 2.1875 22.6062 2.7601C23.2546 3.33269 23.5788 4.24632 23.5788 5.50099V23.9925C23.5788 25.0956 23.3893 25.9166 23.0104 26.4555C22.6315 27.0029 21.9915 27.4028 21.0905 27.6554C19.4906 28.0933 17.9833 28.4386 16.5687 28.6912C15.154 28.9522 13.7731 29.1501 12.4258 29.2848C11.0785 29.4196 9.69751 29.5248 8.28286 29.6006C7.11241 29.668 6.20299 29.4238 5.5546 28.868C4.90622 28.3207 4.58203 27.4997 4.58203 26.405ZM9.20865 11.0124C11.0635 10.8944 12.7632 10.7131 14.3075 10.4683C14.6822 10.4072 15.0564 10.3436 15.4291 10.2776C15.8192 10.2085 16.1013 9.86859 16.1013 9.47337C16.1013 8.96154 15.638 8.57609 15.135 8.66189C14.846 8.71118 14.5555 8.75909 14.2635 8.80562C12.7346 9.04923 11.0452 9.22998 9.19523 9.3477C8.91819 9.36558 8.69776 9.45188 8.55608 9.62391C8.42209 9.78661 8.35645 9.98229 8.35645 10.2053C8.35645 10.4321 8.43296 10.6295 8.58568 10.7918L8.58783 10.7939C8.75336 10.9595 8.96369 11.0311 9.20865 11.0124ZM9.20801 15.206C11.0631 15.088 12.763 14.9066 14.3075 14.6619C15.8588 14.4089 17.3936 14.1138 18.9112 13.7766C19.2191 13.7081 19.4498 13.6003 19.5652 13.433C19.6786 13.2721 19.7347 13.0876 19.7347 12.8832C19.7347 12.6526 19.6469 12.454 19.476 12.2926C19.2921 12.1189 19.0348 12.0784 18.7304 12.1411L18.7285 12.1415C17.2823 12.4694 15.794 12.7553 14.2635 12.9992C12.7346 13.2428 11.0452 13.4235 9.19523 13.5413C8.91819 13.5591 8.69776 13.6454 8.55608 13.8175C8.42276 13.9794 8.35645 14.1705 8.35645 14.3863C8.35645 14.6203 8.43209 14.8223 8.58558 14.9854L8.59 14.9896C8.75499 15.1449 8.96316 15.2155 9.20551 15.2062L9.20801 15.206ZM9.20847 19.3994C11.0634 19.2729 12.7631 19.0874 14.3075 18.8427C15.8589 18.5982 17.3934 18.3073 18.9112 17.97C19.2199 17.9014 19.4508 17.7891 19.566 17.6127C19.6783 17.4529 19.7347 17.2733 19.7347 17.0766C19.7347 16.8461 19.6469 16.6474 19.476 16.4861C19.2921 16.3123 19.0348 16.2718 18.7304 16.3345L18.729 16.3348C17.2827 16.6543 15.7942 16.9361 14.2635 17.18C12.7345 17.4236 11.045 17.6086 9.19495 17.7347C8.91804 17.7526 8.69771 17.8389 8.55608 18.0109C8.42276 18.1728 8.35645 18.3639 8.35645 18.5797C8.35645 18.8137 8.43209 19.0158 8.58558 19.1789L8.59 19.183C8.75499 19.3383 8.96316 19.4089 9.20551 19.3996L9.20847 19.3994ZM14.3075 23.007C12.7632 23.2518 11.0635 23.4331 9.20867 23.5512C8.9637 23.5698 8.75337 23.4982 8.58783 23.3326L8.58572 23.3305C8.433 23.1682 8.35645 22.9708 8.35645 22.7441C8.35645 22.521 8.42209 22.3253 8.55608 22.1626C8.69776 21.9906 8.91827 21.9043 9.19531 21.8864C11.0453 21.7687 12.7346 21.588 14.2635 21.3443C14.5555 21.2978 14.846 21.2499 15.135 21.2006C15.638 21.1148 16.1013 21.5003 16.1013 22.0121C16.1013 22.4073 15.8192 22.7472 15.4291 22.8163C15.0564 22.8823 14.6822 22.9459 14.3075 23.007Z"
fill="#000091"
/>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

@@ -3,10 +3,10 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useEffect } from 'react';
import { useCunninghamTheme } from '@/cunningham';
import { Auth } from '@/features/auth';
import '@/i18n/initI18n';
import { useResponsiveStore } from '@/stores/';
import { Auth } from './auth/';
import { ConfigProvider } from './config/';
/**
@@ -1,66 +0,0 @@
import { Loader } from '@openfun/cunningham-react';
import { useRouter } from 'next/router';
import { PropsWithChildren, useEffect, useState } from 'react';
import { Box } from '@/components';
import { useAuthStore } from './useAuthStore';
/**
* TODO: Remove this restriction when we will have a homepage design for non-authenticated users.
*
* We define the paths that are not allowed without authentication.
* Actually, only the home page and the docs page are not allowed without authentication.
* When we will have a homepage design for non-authenticated users, we will remove this restriction to have
* the full website accessible without authentication.
*/
const regexpUrlsAuth = [/\/docs\/$/g, /^\/$/g];
export const Auth = ({ children }: PropsWithChildren) => {
const { initAuth, initiated, authenticated, login, getAuthUrl } =
useAuthStore();
const { asPath, replace } = useRouter();
const [pathAllowed, setPathAllowed] = useState<boolean>(
!regexpUrlsAuth.some((regexp) => !!asPath.match(regexp)),
);
useEffect(() => {
initAuth();
}, [initAuth]);
useEffect(() => {
setPathAllowed(!regexpUrlsAuth.some((regexp) => !!asPath.match(regexp)));
}, [asPath]);
// We force to login except on allowed paths
useEffect(() => {
if (!initiated || authenticated || pathAllowed) {
return;
}
login();
}, [authenticated, pathAllowed, login, initiated]);
// Redirect to the path before login
useEffect(() => {
if (!authenticated) {
return;
}
const authUrl = getAuthUrl();
if (authUrl) {
void replace(authUrl);
}
}, [authenticated, getAuthUrl, replace]);
if ((!initiated && pathAllowed) || (!authenticated && !pathAllowed)) {
return (
<Box $height="100vh" $width="100vw" $align="center" $justify="center">
<Loader />
</Box>
);
}
return children;
};
@@ -1,23 +0,0 @@
import { Button } from '@openfun/cunningham-react';
import { useTranslation } from 'react-i18next';
import { useAuthStore } from '@/core/auth';
export const ButtonLogin = () => {
const { t } = useTranslation();
const { logout, authenticated, login } = useAuthStore();
if (!authenticated) {
return (
<Button onClick={login} color="primary-text" aria-label={t('Login')}>
{t('Login')}
</Button>
);
}
return (
<Button onClick={logout} color="primary-text" aria-label={t('Logout')}>
{t('Logout')}
</Button>
);
};
@@ -1,2 +0,0 @@
export * from './getMe';
export * from './types';
@@ -1 +0,0 @@
export const PATH_AUTH_LOCAL_STORAGE = 'docs-path-auth';
@@ -1,4 +0,0 @@
export * from './api/types';
export * from './Auth';
export * from './ButtonLogin';
export * from './useAuthStore';
@@ -1,64 +0,0 @@
import { create } from 'zustand';
import { baseApiUrl } from '@/api';
import { terminateCrispSession } from '@/services';
import { User, getMe } from './api';
import { PATH_AUTH_LOCAL_STORAGE } from './conf';
interface AuthStore {
initiated: boolean;
authenticated: boolean;
initAuth: () => void;
logout: () => void;
login: () => void;
setAuthUrl: (url: string) => void;
getAuthUrl: () => string | undefined;
userData?: User;
}
const initialState = {
initiated: false,
authenticated: false,
userData: undefined,
};
export const useAuthStore = create<AuthStore>((set, get) => ({
initiated: initialState.initiated,
authenticated: initialState.authenticated,
userData: initialState.userData,
initAuth: () => {
getMe()
.then((data: User) => {
set({ authenticated: true, userData: data });
})
.catch(() => {})
.finally(() => {
set({ initiated: true });
});
},
login: () => {
get().setAuthUrl(window.location.pathname);
window.location.replace(`${baseApiUrl()}authenticate/`);
},
logout: () => {
terminateCrispSession();
window.location.replace(`${baseApiUrl()}logout/`);
},
// If we try to access a specific page and we are not authenticated
// we store the path in the local storage to redirect to it after login
setAuthUrl() {
if (window.location.pathname !== '/') {
localStorage.setItem(PATH_AUTH_LOCAL_STORAGE, window.location.pathname);
}
},
// If a path is stored in the local storage, we return it then remove it
getAuthUrl() {
const path_auth = localStorage.getItem(PATH_AUTH_LOCAL_STORAGE);
if (path_auth) {
localStorage.removeItem(PATH_AUTH_LOCAL_STORAGE);
return path_auth;
}
},
}));
@@ -1,3 +1,2 @@
export * from './AppProvider';
export * from './auth';
export * from './config';
@@ -71,6 +71,7 @@
--c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000);
--c--theme--colors--card-border: #ededed;
--c--theme--colors--primary-bg: #fafafa;
--c--theme--colors--primary-action: #1212ff;
--c--theme--colors--primary-050: #f5f5fe;
--c--theme--colors--primary-150: #e5eefa;
--c--theme--colors--primary-950: #1b1b35;
@@ -122,6 +123,11 @@
--c--theme--font--sizes--ml: 0.938rem;
--c--theme--font--sizes--xl: 1.25rem;
--c--theme--font--sizes--t: 0.6875rem;
--c--theme--font--sizes--xl-alt: 5rem;
--c--theme--font--sizes--lg-alt: 4.5rem;
--c--theme--font--sizes--md-alt: 4rem;
--c--theme--font--sizes--sm-alt: 3.5rem;
--c--theme--font--sizes--xs-alt: 3rem;
--c--theme--font--weights--thin: 100;
--c--theme--font--weights--light: 300;
--c--theme--font--weights--regular: 400;
@@ -316,7 +322,7 @@
--c--theme--colors--primary-700
);
--c--components--button--secondary--border--color: var(
--c--theme--colors--primary-200
--c--theme--colors--greyscale-300
);
--c--components--button--tertiary--color: var(
--c--theme--colors--primary-text
@@ -339,6 +345,7 @@
--c--components--button--disabled--color: white;
--c--components--button--disabled--background--color: #b3cef0;
--c--components--la-gauffre--activated: false;
--c--components--home-proconnect--activated: false;
}
.cunningham-theme--dark {
@@ -501,10 +508,10 @@
--c--components--button--secondary--background--color-hover: #f6f6f6;
--c--components--button--secondary--background--color-active: #ededed;
--c--components--button--secondary--border--color: var(
--c--theme--colors--primary-600
--c--theme--colors--greyscale-300
);
--c--components--button--secondary--border--color-hover: var(
--c--theme--colors--primary-600
--c--theme--colors--greyscale-300
);
--c--components--button--secondary--color: var(
--c--theme--colors--primary-text
@@ -584,6 +591,7 @@
);
--c--components--forms-textarea--border-radius: 0;
--c--components--la-gauffre--activated: true;
--c--components--home-proconnect--activated: true;
}
.clr-secondary-text {
@@ -874,6 +882,10 @@
color: var(--c--theme--colors--primary-bg);
}
.clr-primary-action {
color: var(--c--theme--colors--primary-action);
}
.clr-primary-050 {
color: var(--c--theme--colors--primary-050);
}
@@ -1302,6 +1314,10 @@
background-color: var(--c--theme--colors--primary-bg);
}
.bg-primary-action {
background-color: var(--c--theme--colors--primary-action);
}
.bg-primary-050 {
background-color: var(--c--theme--colors--primary-050);
}
@@ -1550,6 +1566,31 @@
letter-spacing: var(--c--theme--font--letterspacings--t);
}
.fs-xl-alt {
font-size: var(--c--theme--font--sizes--xl-alt);
letter-spacing: var(--c--theme--font--letterspacings--xl-alt);
}
.fs-lg-alt {
font-size: var(--c--theme--font--sizes--lg-alt);
letter-spacing: var(--c--theme--font--letterspacings--lg-alt);
}
.fs-md-alt {
font-size: var(--c--theme--font--sizes--md-alt);
letter-spacing: var(--c--theme--font--letterspacings--md-alt);
}
.fs-sm-alt {
font-size: var(--c--theme--font--sizes--sm-alt);
letter-spacing: var(--c--theme--font--letterspacings--sm-alt);
}
.fs-xs-alt {
font-size: var(--c--theme--font--sizes--xs-alt);
letter-spacing: var(--c--theme--font--letterspacings--xs-alt);
}
.f-base {
font-family: var(--c--theme--font--families--base);
}
@@ -75,6 +75,7 @@ export const tokens = {
'danger-text': '#fff',
'card-border': '#ededed',
'primary-bg': '#FAFAFA',
'primary-action': '#1212FF',
'primary-050': '#F5F5FE',
'primary-150': '#E5EEFA',
'primary-950': '#1B1B35',
@@ -129,6 +130,11 @@ export const tokens = {
ml: '0.938rem',
xl: '1.25rem',
t: '0.6875rem',
'xl-alt': '5rem',
'lg-alt': '4.5rem',
'md-alt': '4rem',
'sm-alt': '3.5rem',
'xs-alt': '3rem',
},
weights: {
thin: 100,
@@ -315,7 +321,7 @@ export const tokens = {
color: 'white',
'color-hover': 'var(--c--theme--colors--primary-700)',
},
border: { color: 'var(--c--theme--colors--primary-200)' },
border: { color: 'var(--c--theme--colors--greyscale-300)' },
},
tertiary: {
color: 'var(--c--theme--colors--primary-text)',
@@ -330,6 +336,7 @@ export const tokens = {
disabled: { color: 'white', background: { color: '#b3cef0' } },
},
'la-gauffre': { activated: false },
'home-proconnect': { activated: false },
},
},
dark: {
@@ -502,8 +509,8 @@ export const tokens = {
secondary: {
background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' },
border: {
color: 'var(--c--theme--colors--primary-600)',
'color-hover': 'var(--c--theme--colors--primary-600)',
color: 'var(--c--theme--colors--greyscale-300)',
'color-hover': 'var(--c--theme--colors--greyscale-300)',
},
color: 'var(--c--theme--colors--primary-text)',
},
@@ -575,6 +582,7 @@ export const tokens = {
},
'forms-textarea': { 'border-radius': '0' },
'la-gauffre': { activated: true },
'home-proconnect': { activated: true },
},
},
},
@@ -1,7 +1,7 @@
import { Crisp } from 'crisp-sdk-web';
import fetchMock from 'fetch-mock';
import { useAuthStore } from '../useAuthStore';
import { gotoLogout } from '../utils';
jest.mock('crisp-sdk-web', () => ({
...jest.requireActual('crisp-sdk-web'),
@@ -17,7 +17,7 @@ jest.mock('crisp-sdk-web', () => ({
},
}));
describe('useAuthStore', () => {
describe('utils', () => {
afterEach(() => {
jest.clearAllMocks();
fetchMock.restore();
@@ -33,7 +33,7 @@ describe('useAuthStore', () => {
writable: true,
});
useAuthStore.getState().logout();
gotoLogout();
expect(Crisp.session.reset).toHaveBeenCalled();
});
@@ -0,0 +1,2 @@
export * from './useAuthQuery';
export * from './types';
@@ -1,4 +1,6 @@
import { fetchAPI } from '@/api';
import { UseQueryOptions, useQuery } from '@tanstack/react-query';
import { APIError, fetchAPI } from '@/api';
import { User } from './types';
@@ -19,3 +21,16 @@ export const getMe = async (): Promise<User> => {
}
return response.json() as Promise<User>;
};
export const KEY_AUTH = 'auth';
export function useAuthQuery(
queryConfig?: UseQueryOptions<User, APIError, User>,
) {
return useQuery<User, APIError, User>({
queryKey: [KEY_AUTH],
queryFn: getMe,
staleTime: 1000 * 60 * 15, // 15 minutes
...queryConfig,
});
}
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 22 KiB

@@ -0,0 +1,47 @@
import { Loader } from '@openfun/cunningham-react';
import { useRouter } from 'next/router';
import { PropsWithChildren } from 'react';
import { Box } from '@/components';
import { useAuth } from '../hooks';
export const Auth = ({ children }: PropsWithChildren) => {
const { isLoading, pathAllowed, isFetchedAfterMount, authenticated } =
useAuth();
const { replace, pathname } = useRouter();
if (isLoading && !isFetchedAfterMount) {
return (
<Box $height="100vh" $width="100vw" $align="center" $justify="center">
<Loader />
</Box>
);
}
/**
* If the user is not authenticated and the path is not allowed, we redirect to the login page.
*/
if (!authenticated && !pathAllowed) {
void replace('/login');
return (
<Box $height="100vh" $width="100vw" $align="center" $justify="center">
<Loader />
</Box>
);
}
/**
* If the user is authenticated and the path is the login page, we redirect to the home page.
*/
if (pathname === '/login' && authenticated) {
void replace('/');
return (
<Box $height="100vh" $width="100vw" $align="center" $justify="center">
<Loader />
</Box>
);
}
return children;
};
@@ -0,0 +1,48 @@
import { Button } from '@openfun/cunningham-react';
import Image from 'next/image';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { BoxButton } from '@/components';
import ProConnectImg from '../assets/button-proconnect.svg?url';
import { useAuth } from '../hooks';
import { gotoLogin, gotoLogout } from '../utils';
export const ButtonLogin = () => {
const { t } = useTranslation();
const { authenticated } = useAuth();
if (!authenticated) {
return (
<Button onClick={gotoLogin} color="primary-text" aria-label={t('Login')}>
{t('Login')}
</Button>
);
}
return (
<Button onClick={gotoLogout} color="primary-text" aria-label={t('Logout')}>
{t('Logout')}
</Button>
);
};
export const ProConnectButton = () => {
const { t } = useTranslation();
return (
<BoxButton
onClick={gotoLogin}
aria-label={t('Proconnect Login')}
$css={css`
background-color: var(--c--theme--colors--primary-text);
&:hover {
background-color: var(--c--theme--colors--primary-action);
}
`}
>
<Image src={ProConnectImg} alt={t('ProConnect Image')} />
</BoxButton>
);
};
@@ -0,0 +1,2 @@
export * from './Auth';
export * from './ButtonLogin';
@@ -0,0 +1,5 @@
import { baseApiUrl } from '@/api';
export const PATH_AUTH_LOCAL_STORAGE = 'docs-path-auth';
export const LOGIN_URL = `${baseApiUrl()}authenticate/`;
export const LOGOUT_URL = `${baseApiUrl()}logout/`;
@@ -0,0 +1 @@
export * from './useAuth';
@@ -0,0 +1,34 @@
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { useAuthQuery } from '../api';
import { getAuthUrl } from '../utils';
const regexpUrlsAuth = [/\/docs\/$/g, /\/docs$/g, /^\/$/g];
export const useAuth = () => {
const { data: user, ...authStates } = useAuthQuery();
const { pathname, replace } = useRouter();
const [pathAllowed, setPathAllowed] = useState<boolean>(
!regexpUrlsAuth.some((regexp) => !!pathname.match(regexp)),
);
useEffect(() => {
setPathAllowed(!regexpUrlsAuth.some((regexp) => !!pathname.match(regexp)));
}, [pathname]);
// Redirect to the path before login
useEffect(() => {
if (!user) {
return;
}
const authUrl = getAuthUrl();
if (authUrl) {
void replace(authUrl);
}
}, [user, replace]);
return { user, authenticated: !!user, pathAllowed, ...authStates };
};
@@ -0,0 +1,4 @@
export * from './api/types';
export * from './components';
export * from './hooks';
export * from './utils';
@@ -0,0 +1,27 @@
import { terminateCrispSession } from '@/services/Crisp';
import { LOGIN_URL, LOGOUT_URL, PATH_AUTH_LOCAL_STORAGE } from './conf';
export const getAuthUrl = () => {
const path_auth = localStorage.getItem(PATH_AUTH_LOCAL_STORAGE);
if (path_auth) {
localStorage.removeItem(PATH_AUTH_LOCAL_STORAGE);
return path_auth;
}
};
export const setAuthUrl = () => {
if (window.location.pathname !== '/') {
localStorage.setItem(PATH_AUTH_LOCAL_STORAGE, window.location.pathname);
}
};
export const gotoLogin = () => {
setAuthUrl();
window.location.replace(LOGIN_URL);
};
export const gotoLogout = () => {
terminateCrispSession();
window.location.replace(LOGOUT_URL);
};
@@ -10,7 +10,7 @@ import { css } from 'styled-components';
import * as Y from 'yjs';
import { Box, TextErrors } from '@/components';
import { useAuthStore } from '@/core/auth';
import { useAuth } from '@/features/auth';
import { Doc } from '@/features/docs/doc-management';
import { useUploadFile } from '../hook';
@@ -27,6 +27,36 @@ const cssEditor = (readonly: boolean) => css`
& .ProseMirror {
height: 100%;
.collaboration-cursor__label2 {
color: #0d0d0d;
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: normal;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
position: absolute;
transform: translate(0%, -17px);
background-color: #e2b1f2;
padding: 2px 6px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
height: 37px;
color: black;
transition: opacity 0.2s ease-in-out;
clip-path: polygon(
0% 0%,
100% 0%,
100% 50%,
50% 50%,
5% 50%,
0 100%,
0% 75%
);
}
.bn-side-menu[data-block-type='heading'][data-level='1'] {
height: 50px;
}
@@ -113,7 +143,7 @@ interface BlockNoteEditorProps {
}
export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
const { userData } = useAuthStore();
const { user } = useAuth();
const { setEditor } = useEditorStore();
const { t } = useTranslation();
@@ -126,7 +156,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
const collabName = readOnly
? 'Reader'
: userData?.full_name || userData?.email || t('Anonymous');
: user?.full_name || user?.email || t('Anonymous');
const editor = useCreateBlockNote(
{
@@ -149,19 +179,23 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
return cursor;
}
cursor.classList.add('collaboration-cursor__caret');
cursor.setAttribute('style', `border-color: ${user.color}`);
cursor.classList.add('collaboration-cursor__caret-new-empty');
cursor.setAttribute('spellcheck', `false`);
const label = document.createElement('span');
label.classList.add('collaboration-cursor__label');
label.classList.add('collaboration-cursor__label2');
label.setAttribute('spellcheck', `false`);
label.setAttribute('style', `background-color: ${user.color}`);
label.insertBefore(document.createTextNode(user.name), null);
cursor.insertBefore(document.createTextNode('\u2060'), null); // Non-breaking space
cursor.insertBefore(label, null);
cursor.insertBefore(document.createTextNode('\u2060'), null); // Non-breaking space
return cursor;
},
showCursorLabels: 'activity',
},
dictionary: locales[lang as keyof typeof locales] as Dictionary,
uploadFile,
@@ -1,4 +1,4 @@
import { User } from '@/core';
import { User } from '@/features/auth';
export interface Access {
id: string;
@@ -1,7 +1,7 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api';
import { User } from '@/core/auth';
import { User } from '@/features/auth';
import {
Access,
Doc,
@@ -1,7 +1,7 @@
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { APIError, errorCauses, fetchAPI } from '@/api';
import { User } from '@/core/auth';
import { User } from '@/features/auth';
import { Doc, Role } from '@/features/docs/doc-management';
import { Invitation, OptionType } from '@/features/docs/doc-share/types';
import { ContentLanguage } from '@/i18n/types';
@@ -1,7 +1,7 @@
import { UseQueryOptions, useQuery } from '@tanstack/react-query';
import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
import { User } from '@/core/auth';
import { User } from '@/features/auth';
import { Doc } from '@/features/docs/doc-management';
export type UsersParams = {
@@ -9,8 +9,8 @@ import { css } from 'styled-components';
import { APIError } from '@/api';
import { Box } from '@/components';
import { User } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
import { User } from '@/features/auth';
import { Doc, Role } from '@/features/docs';
import { useLanguage } from '@/i18n/hooks/useLanguage';
@@ -2,8 +2,8 @@ import { Button } from '@openfun/cunningham-react';
import { css } from 'styled-components';
import { Box, Icon, Text } from '@/components';
import { User } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
import { User } from '@/features/auth';
type Props = {
user: User;
@@ -7,8 +7,8 @@ import {
DropdownMenuOption,
IconOptions,
} from '@/components';
import { User } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
import { User } from '@/features/auth';
import { Doc, Role } from '@/features/docs/doc-management';
import { useDeleteDocInvitation, useUpdateDocInvitation } from '../api';
@@ -10,7 +10,7 @@ import {
QuickSearchData,
QuickSearchGroup,
} from '@/components/quick-search/';
import { User } from '@/core';
import { User } from '@/features/auth';
import { Access, Doc } from '@/features/docs';
import { useResponsiveStore } from '@/stores';
import { isValidEmail } from '@/utils';
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box, Icon, Text } from '@/components';
import { User } from '@/core';
import { User } from '@/features/auth';
import { SearchUserRow } from './SearchUserRow';
@@ -3,8 +3,8 @@ import {
QuickSearchItemContent,
QuickSearchItemContentProps,
} from '@/components/quick-search';
import { User } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
import { User } from '@/features/auth';
import { UserAvatar } from './UserAvatar';
@@ -1,8 +1,8 @@
import { css } from 'styled-components';
import { Box } from '@/components';
import { User } from '@/core';
import { tokens } from '@/cunningham';
import { User } from '@/features/auth';
const colors = tokens.themes.default.theme.colors;
@@ -1,16 +1,16 @@
import { useAuthStore } from '@/core/auth';
import { useAuth } from '@/features/auth';
import { Access, Role } from '@/features/docs/doc-management';
export const useWhoAmI = (access: Access) => {
const { userData } = useAuthStore();
const { user } = useAuth();
const isMyself = userData?.id === access.user.id;
const isMyself = user?.id === access.user.id;
const rolesAllowed = access.abilities.set_role_to;
const isLastOwner =
!rolesAllowed.length && access.role === Role.OWNER && isMyself;
const isOtherOwner = access.role === Role.OWNER && userData?.id && !isMyself;
const isOtherOwner = access.role === Role.OWNER && user?.id && !isMyself;
return {
isLastOwner,
@@ -1,4 +1,4 @@
import { User } from '@/core/auth';
import { User } from '@/features/auth';
import { Role } from '@/features/docs';
export interface Invitation {
@@ -1,4 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.6305 28.8312C22.7983 28.5038 23.9166 27.9062 24.6505 26.8503C25.3749 25.8163 25.5789 24.5047 25.5789 23.2425V4.75099C25.5789 4.42358 25.5611 4.09557 25.5216 3.77148C26.1016 3.99961 26.5486 4.37658 26.8626 4.90239C27.2331 5.50024 27.4184 6.28757 27.4184 7.26435V26.0464C27.4184 27.3684 27.0942 28.3578 26.4458 29.0146C25.7974 29.6714 24.8207 29.9998 23.5155 29.9998H16.4209C16.5889 29.9704 16.7574 29.9401 16.9262 29.909C18.4067 29.6444 19.9713 29.2854 21.6185 28.8346L21.6305 28.8312Z" fill="#C9191E"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58203 25.655V6.8477C4.58203 5.70251 4.88938 4.83519 5.50408 4.24575C6.1272 3.65631 6.95242 3.33212 7.97972 3.27318C9.49542 3.18055 10.9311 3.05425 12.2868 2.89425C13.6425 2.72584 14.9393 2.53217 16.1771 2.31324C17.4234 2.0943 18.6359 1.85011 19.8148 1.58065C21.0274 1.29435 21.9578 1.4375 22.6062 2.0101C23.2546 2.58269 23.5788 3.49632 23.5788 4.75099V23.2425C23.5788 24.3456 23.3893 25.1666 23.0104 25.7055C22.6315 26.2529 21.9915 26.6528 21.0905 26.9054C19.4906 27.3433 17.9833 27.6886 16.5687 27.9412C15.154 28.2022 13.7731 28.4001 12.4258 28.5348C11.0785 28.6696 9.69751 28.7748 8.28286 28.8506C7.11241 28.918 6.20299 28.6738 5.5546 28.118C4.90622 27.5707 4.58203 26.7497 4.58203 25.655ZM9.20865 10.2624C11.0635 10.1444 12.7632 9.96305 14.3075 9.71831C14.6822 9.65722 15.0564 9.5936 15.4291 9.52759C15.8192 9.45851 16.1013 9.11859 16.1013 8.72337C16.1013 8.21154 15.638 7.82609 15.135 7.91189C14.846 7.96118 14.5555 8.00909 14.2635 8.05562C12.7346 8.29923 11.0452 8.47998 9.19523 8.5977C8.91819 8.61558 8.69776 8.70188 8.55608 8.87391C8.42209 9.03661 8.35645 9.23229 8.35645 9.45535C8.35645 9.68212 8.43296 9.87951 8.58568 10.0418L8.58783 10.0439C8.75336 10.2095 8.96369 10.2811 9.20865 10.2624ZM9.20801 14.456C11.0631 14.338 12.763 14.1566 14.3075 13.9119C15.8588 13.6589 17.3936 13.3638 18.9112 13.0266C19.2191 12.9581 19.4498 12.8503 19.5652 12.683C19.6786 12.5221 19.7347 12.3376 19.7347 12.1332C19.7347 11.9026 19.6469 11.704 19.476 11.5426C19.2921 11.3689 19.0348 11.3284 18.7304 11.3911L18.7285 11.3915C17.2823 11.7194 15.794 12.0053 14.2635 12.2492C12.7346 12.4928 11.0452 12.6735 9.19523 12.7913C8.91819 12.8091 8.69776 12.8954 8.55608 13.0675C8.42276 13.2294 8.35645 13.4205 8.35645 13.6363C8.35645 13.8703 8.43209 14.0723 8.58558 14.2354L8.59 14.2396C8.75499 14.3949 8.96316 14.4655 9.20551 14.4562L9.20801 14.456ZM9.20847 18.6494C11.0634 18.5229 12.7631 18.3374 14.3075 18.0927C15.8589 17.8482 17.3934 17.5573 18.9112 17.22C19.2199 17.1514 19.4508 17.0391 19.566 16.8627C19.6783 16.7029 19.7347 16.5233 19.7347 16.3266C19.7347 16.0961 19.6469 15.8974 19.476 15.7361C19.2921 15.5623 19.0348 15.5218 18.7304 15.5845L18.729 15.5848C17.2827 15.9043 15.7942 16.1861 14.2635 16.43C12.7345 16.6736 11.045 16.8586 9.19495 16.9847C8.91804 17.0026 8.69771 17.0889 8.55608 17.2609C8.42276 17.4228 8.35645 17.6139 8.35645 17.8297C8.35645 18.0637 8.43209 18.2658 8.58558 18.4289L8.59 18.433C8.75499 18.5883 8.96316 18.6589 9.20551 18.6496L9.20847 18.6494ZM14.3075 22.257C12.7632 22.5018 11.0635 22.6831 9.20867 22.8012C8.9637 22.8198 8.75337 22.7482 8.58783 22.5826L8.58572 22.5805C8.433 22.4182 8.35645 22.2208 8.35645 21.9941C8.35645 21.771 8.42209 21.5753 8.55608 21.4126C8.69776 21.2406 8.91827 21.1543 9.19531 21.1364C11.0453 21.0187 12.7346 20.838 14.2635 20.5943C14.5555 20.5478 14.846 20.4999 15.135 20.4506C15.638 20.3648 16.1013 20.7503 16.1013 21.2621C16.1013 21.6573 15.8192 21.9972 15.4291 22.0663C15.0564 22.1323 14.6822 22.1959 14.3075 22.257Z" fill="#000091"/>
</svg>

Before

Width:  |  Height:  |  Size: 3.6 KiB

@@ -0,0 +1,26 @@
import { Button } from '@openfun/cunningham-react';
import { useTranslation } from 'react-i18next';
import { Icon } from '@/components/';
import { useLeftPanelStore } from '@/features/left-panel';
export const ButtonTogglePanel = () => {
const { t } = useTranslation();
const { isPanelOpen, togglePanel } = useLeftPanelStore();
return (
<Button
size="medium"
onClick={() => togglePanel()}
aria-label={t('Open the header menu')}
color="tertiary-text"
icon={
<Icon
$variation="800"
$theme="primary"
iconName={isPanelOpen ? 'close' : 'menu'}
/>
}
/>
);
};
@@ -1,25 +1,23 @@
import { Button } from '@openfun/cunningham-react';
import Image from 'next/image';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box, Icon, StyledLink } from '@/components/';
import { ButtonLogin } from '@/core/auth';
import { default as IconDocs } from '@/assets/icons/icon-docs.svg?url';
import { Box, StyledLink } from '@/components/';
import { useCunninghamTheme } from '@/cunningham';
import { ButtonLogin } from '@/features/auth';
import { LanguagePicker } from '@/features/language';
import { useLeftPanelStore } from '@/features/left-panel';
import { useResponsiveStore } from '@/stores';
import { default as IconDocs } from '../assets/icon-docs.svg?url';
import { HEADER_HEIGHT } from '../conf';
import { ButtonTogglePanel } from './ButtonTogglePanel';
import { LaGaufre } from './LaGaufre';
import Title from './Title/Title';
import { Title } from './Title';
export const Header = () => {
const { t } = useTranslation();
const theme = useCunninghamTheme();
const { isPanelOpen, togglePanel } = useLeftPanelStore();
const { isDesktop } = useResponsiveStore();
const spacings = theme.spacingsTokens();
@@ -29,7 +27,6 @@ export const Header = () => {
<Box
as="header"
$css={css`
display: flex;
position: fixed;
top: 0;
left: 0;
@@ -39,27 +36,12 @@ export const Header = () => {
align-items: center;
justify-content: space-between;
height: ${HEADER_HEIGHT}px;
min-height: ${HEADER_HEIGHT}px;
padding: 0 ${spacings['base']};
background-color: ${colors['greyscale-000']};
border-bottom: 1px solid ${colors['greyscale-200']};
`}
>
{!isDesktop && (
<Button
size="medium"
onClick={() => togglePanel()}
aria-label={t('Open the header menu')}
color="tertiary-text"
icon={
<Icon
$variation="800"
$theme="primary"
iconName={isPanelOpen ? 'close' : 'menu'}
/>
}
/>
)}
{!isDesktop && <ButtonTogglePanel />}
<StyledLink href="/">
<Box
$align="center"
@@ -1,9 +1,10 @@
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box, Text } from '@/components/';
import { useCunninghamTheme } from '@/cunningham';
const Title = () => {
export const Title = () => {
const { t } = useTranslation();
const theme = useCunninghamTheme();
const spacings = theme.spacingsTokens();
@@ -11,16 +12,30 @@ const Title = () => {
return (
<Box $direction="row" $align="center" $gap={spacings['2xs']}>
<Text $margin="none" as="h2" $color="#000091" $zIndex={1} $size="1.30rem">
<Text
$margin="none"
as="h2"
$color="#000091"
$zIndex={1}
$size="1.375rem"
>
{t('Docs')}
</Text>
<Text
$padding={{ horizontal: 'xs', vertical: '1px' }}
$padding={{
horizontal: '6px',
vertical: '4px',
}}
$size="11px"
$theme="primary"
$variation="500"
$weight="bold"
$radius="12px"
$css={css`
line-height: 9px;
`}
$width="40px"
$height="16px"
$background={colors['primary-200']}
>
BETA
@@ -28,5 +43,3 @@ const Title = () => {
</Box>
);
};
export default Title;
@@ -0,0 +1,4 @@
export * from './ButtonTogglePanel';
export * from './Header';
export * from './LaGaufre';
export * from './Title';
@@ -1 +1,2 @@
export * from './components/Header';
export * from './components/';
export * from './conf';
Binary file not shown.

After

Width:  |  Height:  |  Size: 342 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 336 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 185 KiB

@@ -0,0 +1,121 @@
import { Button } from '@openfun/cunningham-react';
import Image from 'next/image';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import DocLogo from '@/assets/icons/icon-docs.svg?url';
import { Box, Icon, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { ProConnectButton, gotoLogin } from '@/features/auth';
import { useResponsiveStore } from '@/stores';
import banner from '../assets/banner.jpg';
import { getHeaderHeight } from './HomeHeader';
export default function HomeBanner() {
const { t } = useTranslation();
const { componentTokens, spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const { isMobile, isSmallMobile } = useResponsiveStore();
const withProConnect = componentTokens()['home-proconnect'].activated;
return (
<Box
$maxWidth="78rem"
$width="100%"
$justify="space-around"
$align="center"
$height="100vh"
$margin={{ top: `-${getHeaderHeight(isSmallMobile)}px` }}
$position="relative"
>
<Box
$width="100%"
$justify="center"
$align="center"
$position="relative"
$direction={!isMobile ? 'row' : 'column'}
$gap="1rem"
$overflow="auto"
$css="flex-basis: 70%;"
>
<Box
$width={!isMobile ? '50%' : '100%'}
$justify="center"
$align="center"
$gap={spacings['sm']}
>
<Image src={DocLogo} alt="DocLogo" width={64} />
<Text
as="h2"
$size={!isMobile ? 'xs-alt' : '2.3rem'}
$variation="800"
$weight="bold"
$textAlign="center"
$margin="none"
$css={css`
line-height: 56px;
`}
>
{t('Collaborative writing, Simplified.')}
</Text>
<Text
$size="lg"
$variation="700"
$textAlign="center"
$margin={{ bottom: 'small' }}
>
{t(
'Collaborate and write in real time, without layout constraints.',
)}
</Text>
{withProConnect ? (
<ProConnectButton />
) : (
<Button
onClick={gotoLogin}
icon={
<Text $isMaterialIcon $color="white">
bolt
</Text>
}
>
{t('Start Writing')}
</Button>
)}
</Box>
{!isMobile && (
<Image
src={banner}
alt={t('Banner image')}
priority
style={{
width: 'auto',
maxWidth: '100%',
height: 'fit-content',
overflow: 'auto',
maxHeight: '100%',
}}
/>
)}
</Box>
<Box $css="bottom: 3rem" $position="absolute">
<Button
color="secondary"
icon={
<Icon $theme="primary" $variation="800" iconName="expand_more" />
}
onClick={(e) => {
e.preventDefault();
document
.querySelector('#docs-app-info')
?.scrollIntoView({ behavior: 'smooth' });
}}
>
{t('Show more')}
</Button>
</Box>
</Box>
);
}
@@ -0,0 +1,159 @@
import Image from 'next/image';
import { Trans, useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import DocLogo from '@/assets/icons/icon-docs.svg?url';
import { Box, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { ProConnectButton } from '@/features/auth';
import { Title } from '@/features/header';
import { useResponsiveStore } from '@/stores';
import SC5 from '../assets/SC5.png';
import { HomeSection } from './HomeSection';
export function HomeBottom() {
const { componentTokens } = useCunninghamTheme();
const withProConnect = componentTokens()['home-proconnect'].activated;
if (withProConnect) {
return <HomeProConnect />;
} else {
return <HomeOpenSource />;
}
}
function HomeOpenSource() {
const { t } = useTranslation();
const { colorsTokens } = useCunninghamTheme();
const { isTablet } = useResponsiveStore();
return (
<HomeSection
isColumn={false}
isSmallDevice={isTablet}
illustration={SC5}
title={t('Govs ❤️ Open Source.')}
tag={t('Open Source')}
textWidth="60%"
description={
<Box
$css={css`
& a {
color: ${colorsTokens()['primary-600']};
}
`}
>
<Text as="p" $display="inline">
<Trans t={t} i18nKey="home-content-open-source-part1">
Docs is built on top of{' '}
<a href="https://www.django-rest-framework.org/" target="_blank">
Django Rest Framework
</a>
,{' '}
<a href="https://nextjs.org/" target="_blank">
Next.js
</a>
, and{' '}
<a href="https://min.io/" target="_blank">
MinIO
</a>
. We also use{' '}
<a href="https://github.com/yjs" target="_blank">
Yjs
</a>{' '}
and{' '}
<a href="https://www.blocknotejs.org/" target="_blank">
BlockNote.js
</a>{' '}
of which we are proud sponsors.
</Trans>
</Text>
<Text as="p" $display="inline">
<Trans t={t} i18nKey="home-content-open-source-part2">
You can easily self-host Docs (check our installation{' '}
<a
href="https://github.com/suitenumerique/docs/tree/main/docs"
target="_blank"
>
documentation
</a>{' '}
with production-ready examples).
<br />
Docs uses an innovation and business friendly{' '}
<a
href="https://github.com/suitenumerique/docs/blob/main/LICENSE"
target="_blank"
>
licence
</a>
.<br />
Contributions are welcome (see our roadmap{' '}
<a
href="https://github.com/orgs/numerique-gouv/projects/13/views/11"
target="_blank"
>
here
</a>
).
</Trans>
</Text>
<Text as="p" $display="inline">
<Trans t={t} i18nKey="home-content-open-source-part3">
Docs is the result of a joint effort lead by the French 🇫🇷🥖
<a href="https://www.numerique.gouv.fr/dinum/" target="_blank">
(DINUM)
</a>{' '}
and German 🇩🇪🥨 governments{' '}
<a href="https://zendis.de/" target="_blank">
(ZenDiS)
</a>
. We are always looking for new public partners (we are currently
onboarding the Netherlands 🇳🇱🧀). Feel free to reach out if you
are interested in using or contributing to docs.
</Trans>
</Text>
</Box>
}
/>
);
}
function HomeProConnect() {
const { t } = useTranslation();
const { spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const { isMobile } = useResponsiveStore();
const parentGap = '230px';
return (
<Box
$justify="center"
$height={!isMobile ? `calc(100vh - ${parentGap})` : 'auto'}
>
<Box
$gap={spacings['md']}
$direction="column"
$align="center"
$margin={{ top: isMobile ? 'none' : `-${parentGap}` }}
>
<Box
$align="center"
$gap={spacings['3xs']}
$direction="row"
$position="relative"
$height="fit-content"
$css="zoom: 1.9;"
>
<Image src={DocLogo} alt="DocLogo" />
<Title />
</Box>
<Text $size="md" $variation="1000" $textAlign="center">
{t('Docs is already available, log in to use it now.')}
</Text>
<ProConnectButton />
</Box>
</Box>
);
}
@@ -0,0 +1,120 @@
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box } from '@/components';
import { Footer } from '@/features/footer';
import { LeftPanel } from '@/features/left-panel';
import { useLanguage } from '@/i18n/hooks/useLanguage';
import { useResponsiveStore } from '@/stores';
import SC1ResponsiveEn from '../assets/SC1-responsive-en.png';
import SC1ResponsiveFr from '../assets/SC1-responsive-fr.png';
import SC2En from '../assets/SC2-en.png';
import SC2Fr from '../assets/SC2-fr.png';
import SC3En from '../assets/SC3-en.png';
import SC3Fr from '../assets/SC3-fr.png';
import SC4En from '../assets/SC4-en.png';
import SC4Fr from '../assets/SC4-fr.png';
import SC4ResponsiveEn from '../assets/SC4-responsive-en.png';
import SC4ResponsiveFr from '../assets/SC4-responsive-fr.png';
import HomeBanner from './HomeBanner';
import { HomeBottom } from './HomeBottom';
import { HomeHeader, getHeaderHeight } from './HomeHeader';
import { HomeSection } from './HomeSection';
export function HomeContent() {
const { t } = useTranslation();
const { isMobile, isSmallMobile } = useResponsiveStore();
const lang = useLanguage();
const isFrLanguage = lang.language === 'fr';
return (
<Box as="main">
<HomeHeader />
{isSmallMobile && (
<Box $css="& .panel-header{display: none;}">
<LeftPanel />
</Box>
)}
<Box
$css={css`
height: calc(100vh - ${getHeaderHeight(isSmallMobile)}px);
overflow-y: auto;
`}
>
<Box
$align="center"
$justify="center"
$maxWidth="1120px"
$padding={{ horizontal: isSmallMobile ? '1rem' : '3rem' }}
$width="100%"
$margin="auto"
>
<HomeBanner />
<Box
id="docs-app-info"
$maxWidth="100%"
$gap={isMobile ? '115px' : '230px'}
$padding={{ bottom: '3rem' }}
>
<HomeSection
isColumn={true}
isSmallDevice={isMobile}
illustration={isFrLanguage ? SC1ResponsiveFr : SC1ResponsiveEn}
video={
isFrLanguage ? `/assets/SC1-fr.webm` : `/assets/SC1-en.webm`
}
title={t('An uncompromising writing experience.')}
tag={t('Write')}
description={t(
'Docs offers an intuitive writing experience. Its minimalist interface favors content over layout, while offering the essentials: media import, offline mode and keyboard shortcuts for greater efficiency.',
)}
/>
<HomeSection
isColumn={false}
isSmallDevice={isMobile}
illustration={isFrLanguage ? SC2Fr : SC2En}
title={t('Simple and secure collaboration.')}
tag={t('Collaborate')}
description={t(
'Docs makes real-time collaboration simple. Invite collaborators - public officials or external partners - with one click to see their changes live, while maintaining precise access control for data security.',
)}
/>
<HomeSection
isColumn={false}
isSmallDevice={isMobile}
reverse={true}
illustration={isFrLanguage ? SC3Fr : SC3En}
title={t('Flexible export.')}
tag={t('Export')}
description={t(
'To facilitate the circulation of documents, Docs allows you to export your content to the most common formats: PDF, Word or OpenDocument.',
)}
/>
<HomeSection
isSmallDevice={isMobile}
illustration={
isMobile
? isFrLanguage
? SC4ResponsiveFr
: SC4ResponsiveEn
: isFrLanguage
? SC4Fr
: SC4En
}
title={t('A new way to organize knowledge.')}
tag={t('Organize')}
availableSoon={true}
description={t(
'Docs transforms your documents into knowledge bases thanks to subpages, powerful search and the ability to pin your important documents.',
)}
/>
<HomeBottom />
</Box>
</Box>
<Footer />
</Box>
</Box>
);
}
@@ -0,0 +1,76 @@
import Image from 'next/image';
import { useTranslation } from 'react-i18next';
import { default as IconDocs } from '@/assets/icons/icon-docs.svg?url';
import { Box } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { ButtonTogglePanel, Title } from '@/features/header/';
import { LaGaufre } from '@/features/header/components/LaGaufre';
import { LanguagePicker } from '@/features/language';
import { useResponsiveStore } from '@/stores';
export const HEADER_HEIGHT = 91;
export const HEADER_HEIGHT_MOBILE = 52;
export const getHeaderHeight = (isSmallMobile: boolean) =>
isSmallMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT;
export const HomeHeader = () => {
const { t } = useTranslation();
const { themeTokens, spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const logo = themeTokens().logo;
const { isSmallMobile } = useResponsiveStore();
return (
<Box
$direction="row"
$justify="space-between"
as="header"
$align="center"
$width="100%"
$padding={{ horizontal: 'small' }}
$height={`${isSmallMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT}px`}
>
<Box
$align="center"
$gap="2rem"
$direction="row"
$width={isSmallMobile ? '100%' : 'auto'}
$justify="center"
>
{isSmallMobile && (
<Box $position="absolute" $css="left: 1rem;">
<ButtonTogglePanel />
</Box>
)}
{!isSmallMobile && logo && (
<Image
priority
src={logo.src}
alt={logo.alt}
width={0}
height={0}
style={{ width: logo.widthHeader, height: 'auto' }}
/>
)}
<Box
$align="center"
$gap={spacings['3xs']}
$direction="row"
$position="relative"
$height="fit-content"
>
<Image priority src={IconDocs} alt={t('Docs Logo')} width={32} />
<Title />
</Box>
</Box>
{!isSmallMobile && (
<Box $direction="row" $gap="1rem" $align="center">
<LanguagePicker />
<LaGaufre />
</Box>
)}
</Box>
);
};
@@ -0,0 +1,218 @@
import Image, { ImageProps } from 'next/image';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { css } from 'styled-components';
import { Box, Text } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { useResponsiveStore } from '@/stores';
export type HomeSectionProps = {
description: React.ReactNode;
tag: string;
title: string;
availableSoon?: boolean;
illustration?: ImageProps['src'];
isColumn?: boolean;
isSmallDevice?: boolean;
reverse?: boolean;
textWidth?: string;
video?: string;
};
export const HomeSection = ({
availableSoon = false,
description,
illustration,
isSmallDevice,
isColumn = true,
reverse = false,
tag,
textWidth = '50%',
title,
video,
}: HomeSectionProps) => {
const { t } = useTranslation();
const { spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const { isSmallMobile } = useResponsiveStore();
const direction = useMemo(() => {
if (isSmallDevice) {
return 'column';
} else if (isColumn) {
return reverse ? 'column-reverse' : 'column';
}
return reverse ? 'row-reverse' : 'row';
}, [isColumn, isSmallDevice, reverse]);
const [isVisible, setIsVisible] = useState(false);
const sectionRef = useRef<HTMLDivElement>(null);
/**
* Intersection Observer to trigger animation when the section is in the viewport
*/
useEffect(() => {
const currentSection = sectionRef.current;
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.disconnect();
}
});
},
{ threshold: 0.1 },
);
if (currentSection) {
observer.observe(currentSection);
}
return () => {
if (currentSection) {
observer.unobserve(currentSection);
}
};
}, []);
return (
<Box
ref={sectionRef}
$align="center"
$justify="center"
$width="100%"
$hasTransition="slow"
$css={css`
opacity: ${isVisible ? 1 : 0};
`}
>
<Box
$direction={direction}
$gap={!isSmallDevice ? spacings['lg'] : spacings['sm']}
$maxHeight="100%"
$height="auto"
$width="100%"
>
<Box
$gap={spacings['sm']}
$maxWidth="850px"
$css={direction === 'column' ? '100%' : `flex-basis: ${textWidth};`}
>
<Box $direction="row" $gap={spacings['sm']} $wrap="wrap">
<SectionTag tag={tag} />
{availableSoon && (
<SectionTag tag={t('Available soon')} availableSoon />
)}
</Box>
<Text
as="h2"
$css={css`
line-height: ${!isSmallDevice ? '50px' : 'normal'};
`}
$variation="1000"
$weight="bold"
$size={!isSmallDevice ? 'xs-alt' : 'h4'}
$textAlign={isSmallMobile ? 'center' : 'left'}
$margin="none"
>
{title}
</Text>
<Text $variation="700" $weight="400" $size="md">
{description}
</Text>
</Box>
{video && !isSmallDevice && (
<Box<'video'>
as="video"
preload="none"
loop
muted
autoPlay
src={video}
$css={css`
width: 100%;
max-width: ${isSmallDevice ? 'calc(100dvw - 50px)' : '1200px'};
height: auto;
overflow: auto;
margin: auto;
`}
onPlay={(e) => {
const videoElement = e.currentTarget;
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
videoElement.pause();
} else {
setTimeout(() => {
void videoElement.play();
}, 500);
}
});
},
{ threshold: 0.1 },
);
observer.observe(videoElement);
}}
>
<source src={video} type="video/webm" />
</Box>
)}
{illustration && (isSmallDevice || !video) && (
<Image
src={illustration}
alt={t('Illustration')}
style={{
width: 'fit-content',
maxWidth: '100%',
height: 'fit-content',
margin: 'auto',
overflow: 'auto',
flexBasis: direction === 'column' ? '100%' : '50%',
}}
/>
)}
</Box>
</Box>
);
};
const SectionTag = ({
tag,
availableSoon,
}: {
tag: string;
availableSoon?: boolean;
}) => {
const { colorsTokens, spacingsTokens } = useCunninghamTheme();
const spacings = spacingsTokens();
const colors = colorsTokens();
return (
<Box
$background={
!availableSoon ? colors['primary-100'] : colors['warning-100']
}
$padding={{ horizontal: spacings['sm'], vertical: '6px' }}
$css={css`
align-self: flex-start;
border-radius: 4px;
`}
>
<Text
$size="md"
$variation={availableSoon ? '600' : '800'}
$weight="bold"
$theme={availableSoon ? 'warning' : 'primary'}
>
{tag}
</Text>
</Box>
);
};
@@ -0,0 +1 @@
export * from './HomeContent';
@@ -0,0 +1 @@
export * from './components';
@@ -3,8 +3,8 @@ import { useCallback, useEffect } from 'react';
import { createGlobalStyle, css } from 'styled-components';
import { Box, SeparatedSection } from '@/components';
import { ButtonLogin } from '@/core';
import { useCunninghamTheme } from '@/cunningham';
import { ButtonLogin } from '@/features/auth';
import { HEADER_HEIGHT } from '@/features/header/conf';
import { LanguagePicker } from '@/features/language';
import { useResponsiveStore } from '@/stores';
@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation';
import { PropsWithChildren } from 'react';
import { Box, Icon, SeparatedSection } from '@/components';
import { useAuthStore } from '@/core';
import { useAuth } from '@/features/auth';
import { useCreateDoc } from '@/features/docs/doc-management';
import { DocSearchModal } from '@/features/docs/doc-search';
import { useCmdK } from '@/hook/useCmdK';
@@ -14,7 +14,7 @@ import { useLeftPanelStore } from '../stores';
export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
const router = useRouter();
const searchModal = useModal();
const auth = useAuthStore();
const { authenticated } = useAuth();
useCmdK(searchModal.open);
const { togglePanel } = useLeftPanelStore();
@@ -36,7 +36,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
return (
<>
<Box $width="100%">
<Box $width="100%" className="panel-header">
<SeparatedSection>
<Box
$padding={{ horizontal: 'sm' }}
@@ -54,7 +54,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
<Icon $variation="800" $theme="primary" iconName="house" />
}
/>
{auth.authenticated && (
{authenticated && (
<Button
onClick={searchModal.open}
size="medium"
@@ -65,7 +65,7 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
/>
)}
</Box>
{auth.authenticated && (
{authenticated && (
<Button onClick={createNewDoc}>{t('New doc')}</Button>
)}
</Box>
@@ -3,7 +3,6 @@ import { css } from 'styled-components';
import { Box } from '@/components';
import { useCunninghamTheme } from '@/cunningham';
import { Footer } from '@/features/footer';
import { Header } from '@/features/header';
import { HEADER_HEIGHT } from '@/features/header/conf';
import { LeftPanel } from '@/features/left-panel';
@@ -12,13 +11,11 @@ import { useResponsiveStore } from '@/stores';
type MainLayoutProps = {
backgroundColor?: 'white' | 'grey';
withoutFooter?: boolean;
};
export function MainLayout({
children,
backgroundColor = 'white',
withoutFooter = false,
}: PropsWithChildren<MainLayoutProps>) {
const { isDesktop } = useResponsiveStore();
const { colorsTokens } = useCunninghamTheme();
@@ -57,7 +54,6 @@ export function MainLayout({
{children}
</Box>
</Box>
{!withoutFooter && <Footer />}
</div>
);
}
@@ -2,13 +2,18 @@ import { PropsWithChildren } from 'react';
import { Box } from '@/components';
import { Footer } from '@/features/footer';
import { Header } from '@/features/header';
import { HEADER_HEIGHT, Header } from '@/features/header';
import { LeftPanel } from '@/features/left-panel';
import { useResponsiveStore } from '@/stores';
export function PageLayout({ children }: PropsWithChildren) {
const { isDesktop } = useResponsiveStore();
return (
<Box $minHeight="100vh">
<Box $minHeight="100vh" $margin={{ top: `${HEADER_HEIGHT}px` }}>
<Header />
<Box as="main" $width="100%" $css="flex-grow:1;">
{!isDesktop && <LeftPanel />}
{children}
</Box>
<Footer />
@@ -1,5 +1,6 @@
import type { AppProps } from 'next/app';
import Head from 'next/head';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { AppProvider } from '@/core/';
@@ -17,6 +18,14 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
const getLayout = Component.getLayout ?? ((page) => page);
const { t } = useTranslation();
useEffect(() => {
console.log(
`%c
\r\n \u2588\u2588\u2557 \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557 \u2588\u2588\u2557 \u2588\u2588\u2557 \r\n \u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551 \u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557 \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551 \r\n \u2588\u2588\u2551 \u2588\u2557 \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2588\u2588\u2554\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2551 \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551 \r\n \u2588\u2588\u2551\u2588\u2588\u2588\u2557\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2551\u255A\u2588\u2588\u2554\u255D\u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u255D \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2551 \u2588\u2588\u2551\u2588\u2588\u2551 \u255A\u2550\u2550\u2550\u2550\u2588\u2588\u2551 \u255A\u2550\u255D \u255A\u2550\u255D \u255A\u2550\u255D \r\n \u255A\u2588\u2588\u2588\u2554\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2551 \u255A\u2550\u255D \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2551 \u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D \u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u255A\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551 \u2588\u2588\u2557 \u2588\u2588\u2557 \u2588\u2588\u2557 \r\n \u255A\u2550\u2550\u255D\u255A\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u255D \u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u255D \u255A\u2550\u255D \u255A\u2550\u255D \r\n \r`,
'font-size: 11px;line-height:15px;background-image: linear-gradient(#000091, #005f91);color: transparent;background-clip: text;',
);
}, []);
return (
<>
<Head>

Some files were not shown because too many files have changed in this diff Show More