github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-14 20:40:17 -05:00
Code Issues Projects Releases Packages Wiki Activity

[web] Migrate /subscription/invites/:token to BS5 (#20640)

Browse source 
* [web] Wiring work for `/subscription/invites/:token` BS5 migration

* [web] Add SCSS for .enrollment-invite

* [web] Update invite_logged_out PUG file for BS5

* [web] Update `GroupInviteViews` (and children) to BS5

* [web] Update `InviteManaged` to BS5

* [web] Update Logout button

* [web] Update subtitles

This removes the `text-overflow:ellipsis`. I think it's better without it, because it can be an accessibility issue.

* [web] Add margin on inner-card

* [web] Style action buttons in InviteManaged

* [web] Add missing container around Row

This was causing the row to overflow the body.

Increased the col width to compensate.

* [web] Fixup lint

* [web] Fix `ManagedUserCannotJoin` title in BS3 (!)

I checked all the other `OLNotification`: we don't use `title` anywhere else

* [web] Put title in OLNotification content

See https://github.com/overleaf/internal/pull/20640#discussion_r1777551257

* [web] Use translations for "aria-label="Email address""

* [web] Handle OLButton `isLoading` in `bs3Props`

* [web] Remove duplicated `btn` class

* [web] Add margin-bottom to InviteManaged title and fix logout button CSS in BS3

* [web] Adjust col class in Pug file for BS3 and BS5

* [web] Revert migration to OLNotification

Revert back to `@/shared/components/notification`

* [web] Add note to remove .team-invite-name after BS5 migration

* [web] Set `btn-link-logout` in BS3 only

* [web] Update OLButton so other classNames automatically get passed to the BS3 implementation

* [web] Revert OLButton changes for BS3 classnames

Co-authored-by: Rebeka <rebeka.dekany@overleaf.com>

* [web] Update services/web/modules/group-settings/frontend/js/components/invite-managed.tsx

Co-authored-by: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>

* [web] Use OLFormGroup `controlId`

---------

Co-authored-by: Rebeka <rebeka.dekany@overleaf.com>
Co-authored-by: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
GitOrigin-RevId: 64b3f79c83002a9c9585bfb8e344e80b2e8eac5c
This commit is contained in:
Antoine Clausse 2024-09-30 11:48:56 +02:00 committed by Copybot
parent 246157cf63
commit d4bf47932e
9 changed files with 98 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
services/web/app/src/Features/Subscription/TeamInvitesController.js
View file

@ -69,6 +69,13 @@ async function viewInvite(req, res, next) {
const { invite, subscription } =
await TeamInvitesHandler.promises.getInvite(token)
await SplitTestHandler.promises.getAssignment(
req,
res,
'bootstrap-5-subscription'
)
if (!invite) {
return ErrorController.notFound(req, res)
}

4
services/web/app/views/subscriptions/team/invite-managed.pug
View file

@ -1,5 +1,9 @@
extends ../../layout-marketing
block vars
- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
- bootstrap5PageSplitTest = 'bootstrap-5-subscription'
block entrypointVar
- entrypoint = 'pages/user/subscription/invite-managed'

5
services/web/app/views/subscriptions/team/invite.pug
View file

@ -1,9 +1,12 @@
extends ../../layout-marketing
block vars
- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
- bootstrap5PageSplitTest = 'bootstrap-5-subscription'
block entrypointVar
- entrypoint = 'pages/user/subscription/invite'
block append meta
meta(name="ol-hasIndividualRecurlySubscription" data-type="boolean" content=hasIndividualRecurlySubscription)
meta(name="ol-inviterName" date-type="string" content=inviterName)

41
services/web/app/views/subscriptions/team/invite_logged_out.pug
View file

@ -1,24 +1,31 @@
extends ../../layout-marketing
block vars
- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
- bootstrap5PageSplitTest = 'bootstrap-5-subscription'
block content
- var colClass = bootstrapVersion === 5 ? 'col-lg-8 m-auto' : 'col-md-8 col-md-offset-2'
main.content.content-alt.team-invite#main-content
.container
.row
.col-md-8.col-md-offset-2.text-center
.card
.page-header
h1.text-centered !{translate("invited_to_group", {inviterName: inviterName, appName: appName }, [{name: 'span', attrs: {class: 'team-invite-name'}}])}
if (accountExists)
div
p #{translate("invited_to_group_login_benefits", {appName: appName})}
p #{translate("invited_to_group_login", {emailAddress: emailAddress})}
p
a.btn.btn.btn-primary(href=`/login?redir=/subscription/invites/${inviteToken}`) #{translate("login_to_accept_invitation")}
else
div
p #{translate("invited_to_group_register_benefits", {appName: appName})}
p #{translate("invited_to_group_register", {inviterName: inviterName})}
p
a.btn.btn.btn-primary(href=`/register?redir=/subscription/invites/${inviteToken}`) #{translate("register_to_accept_invitation")}
div(class=colClass)
.card.text-center
.card-body
.page-header
// TODO: Remove `team-invite-name` once we fully migrated to Bootstrap 5
h1.text-centered !{translate("invited_to_group", {inviterName: inviterName, appName: appName }, [{name: 'span', attrs: {class: 'team-invite-name'}}])}
if (accountExists)
div
p #{translate("invited_to_group_login_benefits", {appName: appName})}
p #{translate("invited_to_group_login", {emailAddress: emailAddress})}
p
a.btn.btn-primary(href=`/login?redir=/subscription/invites/${inviteToken}`) #{translate("login_to_accept_invitation")}
else
div
p #{translate("invited_to_group_register_benefits", {appName: appName})}
p #{translate("invited_to_group_register", {inviterName: inviterName})}
p
a.btn.btn-primary(href=`/register?redir=/subscription/invites/${inviteToken}`) #{translate("register_to_accept_invitation")}

23
services/web/frontend/js/features/subscription/components/group-invite/group-invite.tsx
View file

@ -7,6 +7,9 @@ import ManagedUserCannotJoin from './managed-user-cannot-join'
import Notification from '@/shared/components/notification'
import JoinGroup from './join-group'
import AcceptedInvite from './accepted-invite'
import OLRow from '@/features/ui/components/ol/ol-row'
import OLCol from '@/features/ui/components/ol/ol-col'
import OLCard from '@/features/ui/components/ol/ol-card'
export type InviteViewTypes =
| 'invite'
@ -62,16 +65,16 @@ export default function GroupInvite() {
return (
<div className="container" id="main-content">
{expired && (
<div className="row">
<div className="col-md-8 col-md-offset-2">
<OLRow>
<OLCol lg={{ span: 8, offset: 2 }}>
<Notification type="error" content={t('email_link_expired')} />
</div>
</div>
</OLCol>
</OLRow>
)}
<div className="row row-spaced">
<div className="col-md-8 col-md-offset-2">
<div className="card">
<OLRow className="row row-spaced">
<OLCol lg={{ span: 8, offset: 2 }}>
<OLCard>
<div className="page-header">
<h1 className="text-center">
<Trans
@ -87,9 +90,9 @@ export default function GroupInvite() {
</h1>
</div>
<GroupInviteViews />
</div>
</div>
</div>
</OLCard>
</OLCol>
</OLRow>
</div>
)
}

17
services/web/frontend/js/features/subscription/components/group-invite/has-individual-recurly-subscription.tsx
View file

@ -6,6 +6,7 @@ import getMeta from '@/utils/meta'
import { Dispatch, SetStateAction, useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { InviteViewTypes } from './group-invite'
import OLButton from '@/features/ui/components/ol/ol-button'
export default function HasIndividualRecurlySubscription({
setView,
@ -46,23 +47,21 @@ export default function HasIndividualRecurlySubscription({
<div className="text-center">
<p>{t('cancel_personal_subscription_first')}</p>
<p>
<button
className="btn btn-secondary"
<OLButton
variant="secondary"
disabled={isCancelling}
onClick={() => setView('invite')}
>
{t('not_now')}
</button>
</OLButton>
&nbsp;&nbsp;
<button
className="btn btn-primary"
<OLButton
variant="primary"
disabled={isCancelling}
onClick={() => {
cancelPersonalSubscription()
}}
onClick={() => cancelPersonalSubscription()}
>
{t('cancel_your_subscription')}
</button>
</OLButton>
</p>
</div>
</>

7
services/web/frontend/js/features/subscription/components/group-invite/join-group.tsx
View file

@ -7,6 +7,7 @@ import useAsync from '@/shared/hooks/use-async'
import classNames from 'classnames'
import { debugConsole } from '@/utils/debugging'
import Notification from '@/shared/components/notification'
import OLButton from '@/features/ui/components/ol/ol-button'
export default function JoinGroup({
setView,
@ -58,13 +59,13 @@ export default function JoinGroup({
{t('not_now')}
</a>
&nbsp;&nbsp;
<button
className="btn btn-primary"
<OLButton
variant="primary"
onClick={() => joinTeam()}
disabled={isJoining}
>
{t('accept_invitation')}
</button>
</OLButton>
</p>
)}
</div>

1
services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
View file

@ -12,3 +12,4 @@
@import 'editor/file-tree';
@import 'editor/figure-modal';
@import 'website-redesign';
@import 'group-settings';

32
services/web/frontend/stylesheets/bootstrap-5/pages/group-settings.scss Normal file
View file

@ -0,0 +1,32 @@
.enrollment-invite {
.title {
overflow: hidden;
text-overflow: ellipsis;
font-size: var(--font-size-05);
font-weight: bold;
}
.inner-card {
background-color: var(--neutral-10);
padding: var(--spacing-06);
&.warning {
background-color: var(--yellow-10);
}
}
.list-row {
border: 0;
display: flex;
flex-direction: row;
gap: var(--spacing-05);
.icon {
margin-top: var(--spacing-01);
}
}
.icon.error {
color: var(--yellow-50);
}
}