fix: login without reload (#678) (#679) #914

ayusharma · 2018-08-11T15:05:09Z

Type: Bug

The following has been addressed in the PR:

There is a related issue Don't reload the web page for login/logout #678 package list is not properly reloaded after login #679
Unit or Functional tests are included in the PR.

Description:

Fix login without reload.
Updates react to the latest version to use UNSAFE_.
Context API cannot be used as enzyme does not support it.

@juanpicado @sergiohgz @priscilawebdev
Please run this branch on the local machine to ensure everything runs fine. Also, review everything carefully because it's a very big refactoring.

Thanks & Have fun 👍

Resolves #678 #679

ayusharma · 2018-08-11T15:08:39Z

I'll check e2e tests now.

juanpicado · 2018-08-11T15:10:17Z

@priscilawebdev will do the first CR, I'll do it when you finish. I'm still a bit stuck with #168 :)

juanpicado · 2018-08-11T21:18:59Z

src/lib/crypto-utils.js

@@ -46,7 +46,7 @@ export function generateRandomHexString(length: number = 8) {

 export function signPayload(payload: JWTPayload, secret: string, options: JWTSignOptions) {
  return jwt.sign(payload, secret, {
-    notBefore: '1000', // Make sure the time will not rollback :)
+    notBefore: '1', // Make sure the time will not rollback :)


Mmm .... this affect #168 I'll need to research the collateral damage

juanpicado · 2018-08-11T21:20:08Z

src/webui/app.js

    return (
-      <Route />
+      <div className="page-full-height">
+          <Header


I'd create a different method for each render section.

If we move to new UI skip this part.

I have implemented this :P

juanpicado · 2018-08-11T21:21:30Z

src/webui/components/Login/index.js

+    event.preventDefault();
+    const {username, password} = this.state;
+    this.props.onSubmit(username, password);
+    this.setState({username: '', password: ''});


Are you sure you want to submit before committing the state?

juanpicado · 2018-08-11T21:22:06Z

src/webui/components/Login/index.js

+    const {visibility, onCancel, error} = this.props;
+    const {username, password} = this.state;
+    return (
+      <div className="login-dialog">


Too long body, the same here, methods by sections might help readability.

Skip this one

juanpicado · 2018-08-11T21:23:00Z

src/webui/modules/detail/index.jsx

-    await this.loadPackageInfo(packageName);
+  UNSAFE_componentWillReceiveProps(newProps) {
+    if (newProps.isUserLoggedIn !== this.props.isUserLoggedIn) {
+      let packageName = this.getPackageName(newProps);


const or inject this.getPackageName(newProps); directly

juanpicado · 2018-08-11T21:23:49Z

src/webui/modules/detail/index.jsx

@@ -49,7 +50,8 @@ export default class Detail extends React.Component {
    try {
      const resp = await API.request(`package/readme/${packageName}`, 'GET');
      this.setState({
-        readMe: resp
+        readMe: resp,


If you rename resp to readMe you can use here destructuring

@juanpicado I had the same idea.

juanpicado · 2018-08-11T21:25:13Z

src/webui/modules/home/index.js

-        {this.state.loading ? this.renderLoading() : this.renderPackageList()}
-      </div>
-    );
+      {this.state.loading ? this.renderLoading() : <PackageList help={this.state.packages.length === 0} packages={this.state.packages} />}


this.state.packages.length
lodash provides here isEmtpy which is kinda safe

you can destructure state here as well.

juanpicado · 2018-08-11T21:26:18Z

src/webui/modules/home/index.js

@@ -116,8 +121,4 @@ export default class Home extends React.Component {
  renderLoading() {
    return <Loading text="Loading..." />;


If strings are static each render does not create a new string Object in memory. Either constant also does the same effect

juanpicado · 2018-08-11T21:29:25Z

src/webui/utils/login.js

+        return true;
+    }
+
+    let payload = token.split('.')[1];


You might try here http://exploringjs.com/es6/ch_destructuring.html#_array-destructuring

juanpicado · 2018-08-11T21:31:40Z

src/webui/utils/login.js

+        return true;
+    }
+    // Report as expire before (real expire time - 30s)
+    const jsTimestamp = payload.exp * 1000 - 30000;


I'm not 100% sure what you are doing here. 🤔

It's from the start, Even I could not figure out this.

Oh, The Horror! 😆

What unit is payload.exp in? Milliseconds or seconds?
Could be a little clearer with:

(payload.exp - 30) * 1000; // seconds

or

payload.exp - (30 * 1000) // milliseconds

juanpicado · 2018-08-11T21:37:16Z

test/unit/webui/app.spec.js

+    const generateTokenWithTimeRange = (limit = 0) => {
+      const payload = {
+        username: 'verdaccio',
+        exp: Number.parseInt(addHours(new Date(), limit).getTime() / 1000, 10)


Number.parseInt(addHours(new Date(), limit).getTime() / 1000, 10) is duplicated above

juanpicado · 2018-08-11T21:39:23Z

test/unit/webui/utils/login.spec.js

+
+import {isTokenExpire, makeLogin} from '../../../../src/webui/utils/login';
+
+const generateTokenWithTimeRange = (limit = 0) => {


const generateTokenWithTimeRange = (li is also duplicated

juanpicado · 2018-08-11T21:40:06Z

test/unit/webui/utils/login.spec.js

+    username: 'verdaccio',
+    exp: Number.parseInt(addHours(new Date(), limit).getTime() / 1000, 10)
+  };
+  return `xxxxxx.${Base64.encode(JSON.stringify(payload))}.xxxxxx`;


xxxx.${Base64.encode(JSON.stringify(payload))}.xxx seems to be dupe as well, perhaps some helper module.

juanpicado

I'll go the second one later after @priscilawebdev and @sergiohgz do their overview. I still have to test it.

ayusharma · 2018-08-11T21:42:19Z

I'll implement the changes 🔢

priscilawebdev · 2018-08-12T05:48:57Z

src/webui/app.js

+
+  constructor(props) {
+    super(props);
+    this.handleLogout = this.handleLogout.bind(this);


Why do not you use arrow functions?..so we can get rid of your constructor...Less code => better

@priscilawebdev We have a talk about class properties, they cause some troubles in tests, check enzymejs/enzyme#944 (comment)

@sergiohgz What a pity! this is sad! 😢

I can not remove bind of these methods from constructor as enzyme keep giving an error for access of this.

priscilawebdev · 2018-08-12T05:54:10Z

src/webui/app.js

+  }
+
+  componentDidMount() {
+    this.loadLogo();


Sorry, but why do we need to make a request for a logo? I believe the logo should not be changed...I've seen that we're loading the logo according to the URL, but this is something that should be changed in the new UI, right?

I will change that soon. Ignore it for now.

priscilawebdev · 2018-08-12T05:59:05Z

src/webui/app.js

+    const token = storage.getItem('token');
+    const username = storage.getItem('username');
+
+    if (isTokenExpire(token) || username === undefined) {


isn't it better to use "!!username" ?

priscilawebdev · 2018-08-12T06:03:07Z

src/webui/app.js

+    if (isTokenExpire(token) || username === undefined) {
+      this.handleLogout();
+    } else {
+      this.setState({user: {username, token}});


Why 2 setState here? I don't know what you want to achieve, but isn't it better to do as bellow?:
this.setState({
user: {username, token}
}, () => {
this.setState({isUserLoggedIn: true})
});

There is no need to chain them, you can unify in one setState like:

this.setState({ user: { username, token }, isUserLoggedIn: true, });

@sergiohgz @juanpicado Yes I know, but as I didn't know what he wanted to do...for sure he has some reason..

priscilawebdev · 2018-08-12T06:05:12Z

src/webui/app.js

+    storage.removeItem('username');
+    storage.removeItem('token');
+    this.setState({user: {}});
+    this.setState({isUserLoggedIn: false});


Again 2 setState...Why?

priscilawebdev · 2018-08-12T06:45:57Z

src/webui/utils/login.js

+export async function makeLogin(username, password) {
+    const payload = {};
+
+    if (isString(username) === false && isString(password) === false) {


I would prefer to use 'Logical NOT (!)' operator here...

but I found this more readable 📖 I think, @juanpicado Also uses this style.

The problem with ! (NOT) is that sometimes it is hard to identify with i. eg !isString() That's why I am preferring === false.

Your point is valid too 😃

@ayusharma yes..I agree...it depends on your preference 👍

priscilawebdev · 2018-08-12T06:51:50Z

src/webui/utils/login.js

+            type: 'error',
+            description: 'Something went wrong.'
+        };
+        return payload;


we are not using immutability 😕...+1more thing to think about the new UI

@priscilawebdev @sergiohgz Could you please help me here. I am not getting the immutability thing here. May be I can initalise the payload object as

const payload = { error: null, token: null, username: null };

cc. @juanpicado

Me neither.

@ayusharma @juanpicado the const payload has a reference that can’t change, so it's immutable. However the value itself can indeed be modified. If the object were immutable, this wouldn't be possible.

There's a cheap and simple way to turn a mutable object/array/function into an "immutable value": Object.freeze

Object.freeze(..) provides shallow, naive immutability. You'll have to walk the entire object/array structure manually and apply Object.freeze(..) to each sub-object/array if you want a deeply immutable value.

Pragmatically, you should probably use a library that already does this well! There are a lot of nice libraries to help you with immutability. One great option is Immutable.js, which provides a variety of data structures, including List (like array) and Map (like object).

ps: some contents of my answer were taken from the book Functional-Light-JS -> Kyle Simpson

Hope it helps 👍

Thanks :) I understand your concern now. It clicked me after so much time. Nice explanation.

@priscilawebdev I have updated the code. Please review again.

priscilawebdev · 2018-08-12T06:54:04Z

src/webui/utils/login.js

+
+    try {
+        const credentials = {username, password};
+        const resp = await API.request(`login`, 'POST', {


you could destructure your resp: const { username, token } =

I am avoiding destructuring here due to variable name collision.

Args are username & password

response of API.req... will also generate username & password;

priscilawebdev · 2018-08-12T07:00:38Z

src/webui/utils/login.js

+    }
+
+    try {
+        const credentials = {username, password};


you could pass it directly on the body

priscilawebdev · 2018-08-12T07:01:48Z

test/unit/webui/components/__mocks__/api.js

@@ -26,7 +27,13 @@ const register = (url, method = 'get', options = {}) => {
    });
  }

-  throw Error('Not found');
+  if (url === 'packages' && method.toLocaleLowerCase() === 'get') {


arrow functions 🙏

hahaha... Okay.

Tip: I learned this in Getify's workshop.

We should limit the use of arrow functions. It indicates lexical scoping of this and if we will use arrow functions everywhere it might give the wrong indication to the reader of the code.

I know we (@verdaccio/core-team ) are using these arrow functions everywhere (in this PR as well) but we can try to limit the use of them in the future.

Some notes:

https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20%26%20beyond/ch2.md#arrow-functions

So now we can conclude a more nuanced set of rules for when => is appropriate and not:
If you have a short, single-statement inline function expression, where the only statement is a return of some computed value, and that function doesn't already make a this reference inside it, and there's no self-reference (recursion, event binding/unbinding), and you don't reasonably expect the function to ever be that way, you can probably safely refactor it to be an => arrow function.
If you have an inner function expression that's relying on a var self = this hack or a .bind(this) call on it in the enclosing function to ensure proper this binding, that inner function expression can probably safely become an => arrow function.
If you have an inner function expression that's relying on something like var args = Array.prototype.slice.call(arguments) in the enclosing function to make a lexical copy of arguments, that inner function expression can probably safely become an => arrow function.
For everything else -- normal function declarations, longer multistatement function expressions, functions that need a lexical name identifier self-reference (recursion, etc.), and any other function that doesn't fit the previous characteristics -- you should probably avoid => function syntax.

https://nodejs.org/api/events.html#events_passing_arguments_and_this_to_listeners

It is possible to use ES6 Arrow Functions as listeners, however, when doing so, the this keyword will no longer reference the EventEmitter instance:

@juanpicado @ayusharma interesting! Thanks for sharing...

juanpicado

👍 tested ! works fine

ayusharma · 2018-08-15T19:58:28Z

@sergiohgz @priscilawebdev I need your approval here. Please verify the things before approving.

apexskier · 2018-08-17T16:03:01Z

jest.config.js

@@ -40,7 +40,7 @@ module.exports = {
    '<rootDir>/test',
  ],
  moduleNameMapper: {
-    '\\.(scss)$': '<rootDir>/node_modules/identity-obj-proxy',
+    '\\.(scss|css)$': '<rootDir>/node_modules/identity-obj-proxy',


A slightly shorter form is \\.s?css$'

apexskier · 2018-08-17T16:04:42Z

src/webui/modules/home/index.js

@@ -31,8 +31,8 @@ export default class Home extends React.Component {
    this.loadPackages();
  }

-
-  componentDidUpdate(prevProps, prevState) { // eslint-disable-line no-unused-vars
+  // eslint-disable-next-line no-unused-vars


IS this necessary? Looks like both vars are used

Nice catch. I'll change.

apexskier · 2018-08-17T16:05:05Z

src/webui/modules/home/index.js

    return (
-      <div>
+      <Fragment>


Do we have support for shorthand fragment syntax? (<> </>)

We have support for shorthand.

apexskier · 2018-08-17T16:07:37Z

src/webui/utils/login.js

+        return true;
+    }
+    // Report as expire before (real expire time - 30s)
+    const jsTimestamp = payload.exp * 1000 - 30000;


What unit is payload.exp in? Milliseconds or seconds?
Could be a little clearer with:

(payload.exp - 30) * 1000; // seconds

or

payload.exp - (30 * 1000) // milliseconds

apexskier · 2018-08-17T16:09:31Z

src/webui/utils/login.js

+                'Content-Type': HEADERS.JSON
+            }
+        });
+        const result = {


nitpick: You could return directly in a few places.

return { username: response.username, token: response.token, };

return { error: { title: 'Unable to login', ... } };

return await API.request('logo');

const {username, token} = response return { username, token };

…n-without-reload

juanpicado · 2018-08-17T18:54:13Z

test/unit/webui/app.spec.js

+    const { doLogin } = wrapper.instance();
+    await doLogin('sam', '12345');
+    const result = {
+      description: 'bad username/password, access denied',


Do we have constants.js on UI?

'bad username/password, access denied'

juanpicado

👀

juanpicado

👍

) * fix: login without reload (verdaccio#678) (verdaccio#679) * fix: implements code review suggestions (verdaccio#914) * refactor: adds scope to the app * refactor: handles null value from localstorage for username * refactor: removes text type from <Input /> * refactor: replaces isNull with isNil * refactor: improves makeLogin method * refactor: adds error from api constant * fix: updates error using API_ERROR constant in tests * refactor: updates regex for moduleMapper in jest config

lock · 2019-01-18T11:28:46Z

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

ayusharma added the dev: code-review label Aug 11, 2018

juanpicado requested review from priscilawebdev and juanpicado August 11, 2018 15:06

ayusharma added WIP and removed dev: code-review labels Aug 11, 2018

ayusharma force-pushed the fix-login-without-reload branch from 730d492 to 09d7896 Compare August 11, 2018 18:39

ayusharma added dev: code-review and removed WIP labels Aug 11, 2018

ayusharma changed the title ~~[WIP]fix: login without reload (#678) (#679)~~ fix: login without reload (#678) (#679) Aug 11, 2018

ayusharma requested a review from sergiohgz August 11, 2018 18:49

ayusharma assigned juanpicado Aug 11, 2018

juanpicado reviewed Aug 11, 2018

View reviewed changes

juanpicado requested changes Aug 11, 2018

View reviewed changes

priscilawebdev requested changes Aug 12, 2018

View reviewed changes

juanpicado added the topic: web label Aug 12, 2018

ayusharma added 5 commits August 14, 2018 13:01

fix: implements code review suggestions (#914)

176a7f1

refactor: adds scope to the app

a6572f2

refactor: handles null value from localstorage for username

6df53f5

refactor: removes text type from <Input />

8253df1

refactor: replaces isNull with isNil

c333184

ayusharma force-pushed the fix-login-without-reload branch from 3bc0282 to c333184 Compare August 14, 2018 11:05

refactor: improves makeLogin method

de5530a

juanpicado previously approved these changes Aug 15, 2018

View reviewed changes

juanpicado requested a review from a team August 17, 2018 09:16

apexskier reviewed Aug 17, 2018

View reviewed changes

Merge branch 'master' of github.com:verdaccio/verdaccio into fix-logi…

a988291

…n-without-reload

juanpicado reviewed Aug 17, 2018

View reviewed changes

refactor: adds error from api constant

9a381e3

ayusharma dismissed juanpicado’s stale review via 9a381e3 August 17, 2018 19:02

ayusharma force-pushed the fix-login-without-reload branch from 3672650 to 9a381e3 Compare August 17, 2018 19:02

ayusharma added 2 commits August 17, 2018 21:28

fix: updates error using API_ERROR constant in tests

593b0da

refactor: updates regex for moduleMapper in jest config

eeed6a0

juanpicado approved these changes Aug 20, 2018

View reviewed changes

juanpicado merged commit 9cd3ccb into master Aug 20, 2018

delete-merged-branch bot deleted the fix-login-without-reload branch August 20, 2018 14:29

lock bot locked as resolved and limited conversation to collaborators Jan 18, 2019

		@@ -116,8 +121,4 @@ export default class Home extends React.Component {
		renderLoading() {
		return <Loading text="Loading..." />;


		import {isTokenExpire, makeLogin} from '../../../../src/webui/utils/login';

		const generateTokenWithTimeRange = (limit = 0) => {

fix: login without reload (#678) (#679) #914

fix: login without reload (#678) (#679) #914

Conversation

ayusharma commented Aug 11, 2018 • edited by juanpicado Loading

ayusharma commented Aug 11, 2018

juanpicado commented Aug 11, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

juanpicado Aug 11, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

juanpicado Aug 11, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

juanpicado left a comment

Choose a reason for hiding this comment

ayusharma commented Aug 11, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

priscilawebdev Aug 12, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

priscilawebdev Aug 13, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

priscilawebdev Aug 13, 2018 • edited Loading

Choose a reason for hiding this comment

juanpicado left a comment

Choose a reason for hiding this comment

ayusharma commented Aug 15, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

juanpicado left a comment

Choose a reason for hiding this comment

ayusharma commented Aug 11, 2018 •

edited by juanpicado

Loading

juanpicado Aug 11, 2018 •

edited

Loading

juanpicado Aug 11, 2018 •

edited

Loading

priscilawebdev Aug 12, 2018 •

edited

Loading

priscilawebdev Aug 13, 2018 •

edited

Loading

priscilawebdev Aug 13, 2018 •

edited

Loading