Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added email confirmation page #3573

Merged
merged 12 commits into from
Sep 23, 2021
Merged

Added email confirmation page #3573

merged 12 commits into from
Sep 23, 2021

Conversation

Spectre-ak
Copy link
Contributor

Motivation and context

Fixes #2135

The issue

After email verification done by a user there is no email confirmation message displayed only redirection to the login page.

The solution

Added a page (EmailConfirmationMessagecomponent) which will show email confirmation message and then redirect to the login page.
Edited ACCOUNT_EMAIL_CONFIRMATION_ANONYMOUS_REDIRECT_URL in the cvat/setting/base.py
from '/auth/login' to '/auth/email-confirmation' so that the user will be first redirected to the email-confirmation page (on successful email verification) and then to the login page.

How has this been tested?

Tested locally by running the cvat app, the component is working fine, since it is running locally there is no email confirmation message sent to the user upon registration.

Checklist

License

  • I submit my code changes under the same MIT License that covers the project.
    Feel free to contact the maintainers if that's a concern.
  • I have updated the license header for each file (see an example below)
# Copyright (C) 2021 Intel Corporation
#
# SPDX-License-Identifier: MIT

Added one component which will show email confirmed message and then redirect to the login page. Edited ACCOUNT_EMAIL_CONFIRMATION_ANONYMOUS_REDIRECT_URL from '/auth/login' to '/auth/email-confirmation' for redirection after successful email verification.
@Spectre-ak Spectre-ak changed the title Added email confirmation page for #2135 Added email confirmation page Aug 19, 2021
@Spectre-ak Spectre-ak mentioned this pull request Aug 19, 2021
2 tasks
@nmanovic nmanovic requested a review from azhavoro August 25, 2021 04:38
@azhavoro
Copy link
Contributor

@Spectre-ak thanks for the contribution!

Could you please fix linter warnings?

@Spectre-ak
Copy link
Contributor Author

@azhavoro sure I'll fix these
But could you please guide me why is there linter warning, I added one js component only. The logs says
The files will be checked: cvat-ui/src/components/cvat-app.tsx cvat-ui/src/components/email-confirmation-page/email-confirmed.tsx and then error occurred. But when I tested locally (using docker) it was working.

Thanks

@azhavoro
Copy link
Contributor

@azhavoro sure I'll fix these
But could you please guide me why is there linter warning, I added one js component only. The logs says
The files will be checked: cvat-ui/src/components/cvat-app.tsx cvat-ui/src/components/email-confirmation-page/email-confirmed.tsx and then error occurred. But when I tested locally (using docker) it was working.

Thanks

Generally, these warnings are related to coding style, you can download the linter report as an artifact on the failed job page.
eslint_report (10).zip

@Spectre-ak
Copy link
Contributor Author

@azhavoro sure I'll fix these
But could you please guide me why is there linter warning, I added one js component only. The logs says
The files will be checked: cvat-ui/src/components/cvat-app.tsx cvat-ui/src/components/email-confirmation-page/email-confirmed.tsx and then error occurred. But when I tested locally (using docker) it was working.
Thanks

Generally, these warnings are related to coding style, you can download the linter report as an artifact on the failed job page.
eslint_report (10).zip

okay, I'll look into these, is there a way to check for linter warnings locally?

@azhavoro
Copy link
Contributor

@azhavoro sure I'll fix these
But could you please guide me why is there linter warning, I added one js component only. The logs says
The files will be checked: cvat-ui/src/components/cvat-app.tsx cvat-ui/src/components/email-confirmation-page/email-confirmed.tsx and then error occurred. But when I tested locally (using docker) it was working.
Thanks

Generally, these warnings are related to coding style, you can download the linter report as an artifact on the failed job page.
eslint_report (10).zip

okay, I'll look into these, is there a way to check for linter warnings locally?

Yes, if you are using VS Code you need to install ESLint plugin https://openvinotoolkit.github.io/cvat/docs/contributing/development-environment/

@Spectre-ak
Copy link
Contributor Author

@azhavoro sure I'll fix these
But could you please guide me why is there linter warning, I added one js component only. The logs says
The files will be checked: cvat-ui/src/components/cvat-app.tsx cvat-ui/src/components/email-confirmation-page/email-confirmed.tsx and then error occurred. But when I tested locally (using docker) it was working.
Thanks

Generally, these warnings are related to coding style, you can download the linter report as an artifact on the failed job page.
eslint_report (10).zip

okay, I'll look into these, is there a way to check for linter warnings locally?

Yes, if you are using VS Code you need to install ESLint plugin https://openvinotoolkit.github.io/cvat/docs/contributing/development-environment/

okay @azhavoro , I'll fix these and let you know.

@Spectre-ak
Copy link
Contributor Author

@azhavoro I've updated the email-confirmed page

@Spectre-ak
Copy link
Contributor Author

@azhavoro linter warnings fixed and all checks passed.

@azhavoro
Copy link
Contributor

I'm not sure that all works as expected:

git log -1
commit 4c32b7edfc0ee0ae261562bbd7638be61bc6a8fd (HEAD -> email_conf, pr/develop)
Author: Spectre-ak <62694340+Spectre-ak@users.noreply.github.com>
Date:   Mon Aug 30 14:45:46 2021 +0530

    updated email-confirmed page

Steps to reproduce:

  1. Enabled email confirmation in the settings with debug smtp backend:
    ACCOUNT_AUTHENTICATION_METHOD = 'username'
    ACCOUNT_CONFIRM_EMAIL_ON_GET = True
    ACCOUNT_EMAIL_REQUIRED = True
    ACCOUNT_EMAIL_VERIFICATION = 'mandatory'
    OLD_PASSWORD_FIELD_ENABLED = True
    # Email backend settings for Django
    EMAIL_BACKEND='django.core.mail.backends.console.EmailBackend'
    # set UI url to redirect after a successful e-mail confirmation
    #changed from '/auth/login' to '/auth/email-confirmation' for email confirmation message
    ACCOUNT_EMAIL_CONFIRMATION_ANONYMOUS_REDIRECT_URL = '/auth/email-confirmation'
  2. Register a new user at http://localhost:3000/auth/register with any email
  3. Obtain confirmation url in the backed logs and make a request with curl:
     curl -L -v http://localhost:7000/api/v1/auth/account-confirm-email/Mg:1mKeQI:Kt6eARl_TlGU3ET8LN7LQSVgu09MtCWSYwfM49CRDQA
     *   Trying 127.0.0.1:7000...
     * Connected to localhost (127.0.0.1) port 7000 (#0)
     > GET /api/v1/auth/account-confirm-email/Mg:1mKeQI:Kt6eARl_TlGU3ET8LN7LQSVgu09MtCWSYwfM49CRDQA HTTP/1.1
     > Host: localhost:7000
     > User-Agent: curl/7.78.0
     > Accept: */*
     >
     * Mark bundle as not supporting multiuse
     < HTTP/1.1 301 Moved Permanently
     < Date: Mon, 30 Aug 2021 10:22:19 GMT
     < Server: WSGIServer/0.2 CPython/3.8.11
     < Content-Type: text/html; charset=utf-8
     < Location: /api/v1/auth/account-confirm-email/Mg:1mKeQI:Kt6eARl_TlGU3ET8LN7LQSVgu09MtCWSYwfM49CRDQA/
     < Content-Length: 0
     < Vary: Origin
     < X-Content-Type-Options: nosniff
     < Referrer-Policy: same-origin
     <
     * Connection #0 to host localhost left intact
     * Issue another request to this URL: 'http://localhost:7000/api/v1/auth/account-confirm-email/Mg:1mKeQI:Kt6eARl_TlGU3ET8LN7LQSVgu09MtCWSYwfM49CRDQA/'
     * Found bundle for host localhost: 0x56033df9aae0 [serially]
     * Can not multiplex, even if we wanted to!
     * Re-using existing connection! (#0) with host localhost
     * Connected to localhost (127.0.0.1) port 7000 (#0)
     > GET /api/v1/auth/account-confirm-email/Mg:1mKeQI:Kt6eARl_TlGU3ET8LN7LQSVgu09MtCWSYwfM49CRDQA/ HTTP/1.1
     > Host: localhost:7000
     > User-Agent: curl/7.78.0
     > Accept: */*
     >
     * Mark bundle as not supporting multiuse
     < HTTP/1.1 302 Found
     < Date: Mon, 30 Aug 2021 10:22:19 GMT
     < Server: WSGIServer/0.2 CPython/3.8.11
     < Content-Type: text/html; charset=utf-8
     < Location: http://localhost:3000/auth/login
     < X-Frame-Options: DENY
     < Content-Length: 0
     < Vary: Origin, Cookie
     < X-Content-Type-Options: nosniff
     < Referrer-Policy: same-origin
     < Set-Cookie:  messages="[[\"__json_message\"\0540\05425\054\"You have confirmed b@b.com.\"]]:1mKeQl:amKiZrF6cErdCzlj50NlbqncwjuWpFNJAQwDzgV1dDk"; HttpOnly; Path=/; SameSite=Lax
     <
     * Connection #0 to host localhost left intact
     * Issue another request to this URL: 'http://localhost:3000/auth/login'
     *   Trying 127.0.0.1:3000...
     * Connected to localhost (127.0.0.1) port 3000 (#1)
     > GET /auth/login HTTP/1.1
     > Host: localhost:3000
     > User-Agent: curl/7.78.0
     > Accept: */*
     >
     * Mark bundle as not supporting multiuse
     < HTTP/1.1 200 OK
     < X-Powered-By: Express
     < Accept-Ranges: bytes
     < Content-Type: text/html; charset=UTF-8
     < Content-Length: 1045
     < ETag: W/"415-mRIyclYZ+455ukgKV/Jzvrhfc10"
     < Date: Mon, 30 Aug 2021 10:22:19 GMT
     < Connection: keep-alive
     < Keep-Alive: timeout=5
     <
     <!--
     Copyright (C) 2020 Intel Corporation
    
     SPDX-License-Identifier: MIT
     -->
    
     <!DOCTYPE html>
     <html lang="en">
         <head>
             <meta charset="UTF-8" />
             <meta http-equiv="X-UA-Compatible" content="ie=edge" />
             <meta name="viewport" content="width=device-width, initial-scale=1.0" />
             <meta
                 name="description"
                 content="Computer Vision Annotation Tool (CVAT) is a free, open source, web-based image and video annotation tool which is used for labeling data for computer vision algorithms. CVAT supports the primary tasks of supervised machine learning: object detection, image classification, and image segmentation. CVAT allows users to annotate data for each of these cases"
             />
             <meta name="”robots”" content="index, follow" />
             <title>Computer Vision Annotation Tool</title>
         </head>
    
         <body>
             <div id="root"></div>
             <div id="layout-grid"></div>
         <script type="text/javascript" src="/cvat-ui.d780a8cbb8b8a9f4d713.min.js"></script></body>
     </html>
     * Connection #1 to host localhost left intact

I don't see /auth/email-confirmation page is opened

@Spectre-ak
Copy link
Contributor Author

Spectre-ak commented Aug 30, 2021

@azhavoro its working, I tested (on browser) just now,

Actually since it is a react app, so js is needed for running the application, that's why curl response is plain html and js is not getting executed.
So if you'll try it in browser it'll work

@azhavoro
Copy link
Contributor

azhavoro commented Aug 30, 2021

@azhavoro its working, I tested (on browser) just now,

So if you'll try it in browser it'll work

In development environment it doesn't work in browser either, I don't see any notifications in case of email confirmation. Please make sure it works as expected in prod and dev modes. If this works for you, please provide the exact steps to check your PR.

Thanks.

@Spectre-ak
Copy link
Contributor Author

@azhavoro

How to test:

  1. Clone the repo if you don't have the code git clone https://github.com/Spectre-ak/cvat.git
  2. Move to the cvat directory cd cvat
  3. Run docker-compose up
  4. Open localhost:8080
  5. Click on create an account
  6. Enter the required details
  7. Click on submit
  8. Check the logs from the docker on the terminal and look for logs similar to this To confirm this is correct, go to http://localhost:8080/api/v1/auth/account-confirm-email/NDM:1mKg7o:Y7eVEWnnNuHDFaishfASHiaAHDASDsvWs/ (confirmation email will be printed)
  9. Take the confirmation url and paste it on the browser
  10. Email confirmation page will open, which will redirect to login page

Attached a working sample

email-confirm-page.mp4

Thanks

@azhavoro
Copy link
Contributor

@Spectre-ak
It works for CVAT deployed with docker-compose, but I asked you to provide instructions for the development environment, it still doesn't work for me.
@bsekachev what do you think about page design?
image

@bsekachev
Copy link
Member

@bsekachev what do you think about page design?

Quite minimalistic
Better to wrap this message to antd basic styles (In Layout.Content container)

@Spectre-ak
Copy link
Contributor Author

Spectre-ak commented Aug 31, 2021

@Spectre-ak
It works for CVAT deployed with docker-compose, but I asked you to provide instructions for the development environment, it still doesn't work for me.

@azhavoro,
I followed the steps mentioned in the Development environment guide

Started cvat-ui using these

npm ci && \
cd cvat-core && npm ci && \
cd ../cvat-ui && npm ci && npm start

@Spectre-ak
Copy link
Contributor Author

@bsekachev what do you think about page design?

Quite minimalistic
Better to wrap this message to antd basic styles (In Layout.Content container)

okay @bsekachev I can improve the design

@azhavoro
Copy link
Contributor

@azhavoro,
I followed the steps mentioned in the Development environment guide

Started cvat-ui using these

npm ci && \
cd cvat-core && npm ci && \
cd ../cvat-ui && npm ci && npm start

@Spectre-ak I cannot approve this PR until it doesn't work in development mode, please fix it.

@Spectre-ak
Copy link
Contributor Author

@Spectre-ak I cannot approve this PR until it doesn't work in development mode, please fix it.

alright, I'll fix this

@Spectre-ak
Copy link
Contributor Author

@azhavoro

After changing ACCOUNT_EMAIL_CONFIRMATION_ANONYMOUS_REDIRECT_URL from auth/login to auth/email-confirmation in cvat/settings/development.py ,
the email-confirmation page is now opening in the development environment also. I tested it by running cvat at port 7000 and cvat-ui at 3000 both in the development environment.

Can you please verify it?

Thanks

@azhavoro
Copy link
Contributor

@bsekachev what do you think about page design?

Quite minimalistic
Better to wrap this message to antd basic styles (In Layout.Content container)

okay @bsekachev I can improve the design

@Spectre-ak Hi, any updates on this?

@Spectre-ak
Copy link
Contributor Author

@Spectre-ak Hi, any updates on this?

Hi @azhavoro, yes I'm working on it
Can you please describe a little about what final design you're expecting for email-confirmation page?
I've made some changes so that the message will appear in the center of the screen

@Spectre-ak
Copy link
Contributor Author

@azhavoro
I've changed the layout.

render() {
return (

<section className='ant-layout'>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't specify any classes here and use Antd components, you can find a lot of examples in the Antd documentation https://ant.design/components/layout/

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@azhavoro
I've removed class names and used antd components

@azhavoro
Copy link
Contributor

@bsekachev Hi, could you please review?

@bsekachev
Copy link
Member

@azhavoro Sure

<Redirect
to={location.pathname.length > 1 ? `/auth/login/?next=${location.pathname}` : '/auth/login'}
/>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

@@ -39,6 +39,7 @@ import showPlatformNotification, {
showUnsupportedNotification,
} from 'utils/platform-checker';
import '../styles.scss';
import EmailConfirmationMessage from './email-confirmation-page/email-confirmed';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would rename it to EmailConfirmationPage, what do you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes sure,
done


import React from 'react';
import { Link } from 'react-router-dom';
import { Layout, Row, Col } from 'antd';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { Layout, Row, Col } from 'antd';
import { Col, Row } from 'antd/lib/grid';
import Layout from 'antd/lib/layout';

const { Content } = Layout;

/**
* Component for displaying email confirmation message and then redirecting to the loginpage
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Component for displaying email confirmation message and then redirecting to the loginpage
* Component for displaying email confirmation message and then redirecting to the login page

s
</p>
<Link to='/auth/login' id='link'>Or click this link</Link>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

</Col>
</Row>
</Content>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

</Content>

</Layout>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

/**
* Component for displaying email confirmation message and then redirecting to the loginpage
*/
class EmailConfirmationMessage extends React.Component {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please look at antd Countdown component, if you use it, you don't need this lifecircle method and you don't need React ES6 components here.

Example:

function onFinish() {
  document.getElementById('link').click();
}

const deadline = Date.now() + 1000 * 5; 

ReactDOM.render(
  <Row gutter={16}>
    <Col span={12}>
      <Countdown format='ss' title="Redirecting to login page after.." value={deadline} onFinish={onFinish} />
    </Col>
  </Row>,
  mountNode,
);

Copy link
Contributor Author

@Spectre-ak Spectre-ak Sep 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, i removed the class component. And with the help of Countdown component it was more easy.

return (
<Layout>
<Content>
<Row justify='center' align='middle' style={{ height: '100%', textAlign: 'center' }}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Static css styless better to be declared in scss files.


if (counter === 0) {
try {
document.getElementById('link').click();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

better to use refs if possible. Draft code is:

const linkRef = useRef<Link>();

function onFinish() {
    ref.current?.click();
}

return (
  ....
    <Link ref={linkRef} ... />
) 

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, I've changed to useRef

@bsekachev bsekachev assigned bsekachev and azhavoro and unassigned ActiveChooN Sep 23, 2021
1. removed react class component and used functional component
2. removed setInterval and user antd countdown component
3. used useRef for redirecting to login page
4. added static style sheet for centering the whole message
5. changed EmailConfirmationMessage to EmailConfirmationPage
@Spectre-ak
Copy link
Contributor Author

Hi @bsekachev ,
I've made the changes as suggested.

@@ -0,0 +1,8 @@
// Copyright (C) 2020 Intel Corporation
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// Copyright (C) 2020 Intel Corporation
// Copyright (C) 2021 Intel Corporation

* Component for displaying email confirmation message and then redirecting to the login page
*/

function EmailConfirmationPage() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
function EmailConfirmationPage() {
function EmailConfirmationPage(): JSX.Element {

const onFinish = () => {
linkRef.current.click();
};
return (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just my thoughts how to do the component more reliable. Right now deadline is computed only once when the file is imported. In theory in case this page opened several times, it will not work as expected. In spite of the fact that this scenario is not expected to appear in real, I suggest followings:

    const [deadline, setDeadline] = useState<null | number>(null);
    useEffect(() => {
        setDeadline(6);
    }, [])
    return (
        deadline === null ? null : (
            ... current return code ...
        )
    )

What do you think?

Copy link
Member

@bsekachev bsekachev Sep 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or even simpler option probably will work:

<Countdown format='ss' title='Redirecting to login page after...' value={Date.now() + 1000 * 6} onFinish={onFinish} />

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is needed. I actually did faced this case during development where the component was not reloading unless I refresh the browser.
Thanks

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or even simpler option probably will work:

<Countdown format='ss' title='Redirecting to login page after...' value={Date.now() + 1000 * 6} onFinish={onFinish} />

yes, better and simpler

@bsekachev
Copy link
Member

I've made the changes as suggested.

Almost brilliant ;)
Please, take a look at new comments.

1. updated  styles.scss
2. updated component
@Spectre-ak
Copy link
Contributor Author

I've made the changes as suggested.

Almost brilliant ;)
Please, take a look at new comments.

yes did and made the changes

@bsekachev
Copy link
Member

Great, thanks for the contribution!

@bsekachev bsekachev merged commit a162a65 into cvat-ai:develop Sep 23, 2021
@Spectre-ak
Copy link
Contributor Author

Great, thanks for the contribution!

Happy to be a contributor😊

@bsekachev
Copy link
Member

@dvkruchinin Could you please prepare a test for the PR? Just open the page and be sure that it redirects to login page after several seconds.

@dvkruchinin
Copy link
Contributor

@dvkruchinin Could you please prepare a test for the PR? Just open the page and be sure that it redirects to login page after several seconds.

Sure. A test will be prepared.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

No message when email confirmed
5 participants