Add flash message with info after login

app/components/api-token-row.js

@@ -1,10 +1,13 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
 import { empty, or } from '@ember/object/computed';
 
 export default Component.extend({
   emptyName: empty('api_token.name'),
   disableCreate: or('api_token.isSaving', 'emptyName'),
   serverError: null,
+  session: service(),
+  store: service(),
 
   didInsertElement() {
     let input = this.element.querySelector('input');
@@ -17,6 +20,7 @@ export default Component.extend({
     async saveToken() {
       try {
         await this.api_token.save();
+        this.set('session.currentUser.has_tokens', true);
         this.set('serverError', null);
       } catch (err) {
         let msg;
@@ -31,6 +35,11 @@ export default Component.extend({
 
     async revokeToken() {
       try {
+        // To avoid error on destroy we need to set before destroying of api-token
+        // that's why we need to set length of api-tokens to 1 in check
+        if ((await this.store.query('api-token', {})).length == 1) {
+          this.set('session.currentUser.has_tokens', false);
+        }
         await this.api_token.destroyRecord();
       } catch (err) {
         let msg;

app/components/welcome-message.hbs

@@ -0,0 +1,3 @@
+<p local-class="welcome-message {{if this.showMessage "shown info"}}" ...attributes data-test-welcome-message>
+  Welcome to crates.io! Visit <a href='me'>account settings</a> to {{this.text}}
+</p>

app/components/welcome-message.js

@@ -0,0 +1,26 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
+import { notEmpty } from '@ember/object/computed';
+
+export default Component.extend({
+  session: service(),
+
+  text: computed('session.currentUser.{email_verified,has_tokens}', function() {
+    const user = this.get('session.currentUser');
+    if (!user || (user.email_verified && user.has_tokens)) return '';
+
+    const textArray = [
+      !user.email_verified && 'verify your email address',
+      !user.email_verified && !user.has_tokens && ' and ',
+      !user.has_tokens && 'create an API token',
+      '!',
+    ].filter(e => !!e);
+
+    return textArray.join('');
+  }),
+
+  showMessage: notEmpty('text').readOnly(),
+
+  tagName: '',
+});

app/components/welcome-message.module.scss

@@ -0,0 +1,18 @@
+.welcome-message {
+    display: none;
+    font-weight: bold;
+    font-size: 110%;
+    text-align: center;
+    margin: 0 0 10px 0;
+    padding: 10px;
+    border-radius: 5px;
+
+    &.shown {
+        display: block;
+    }
+
+    &.info {
+        background-color: $main-bg-dark;
+        border: 2px solid #62865f;
+    }
+}

app/models/user.js

@@ -9,6 +9,7 @@ export default Model.extend({
   avatar: attr('string'),
   url: attr('string'),
   kind: attr('string'),
+  has_tokens: attr('boolean'),
 
   stats() {
     return this.store.adapterFor('user').stats(this.id);

app/routes/me/index.js

@@ -5,12 +5,10 @@ import AuthenticatedRoute from '../../mixins/authenticated-route';
 export default Route.extend(AuthenticatedRoute, {
   actions: {
     willTransition: function() {
-      this.controller
-        .setProperties({
-          emailNotificationsSuccess: false,
-          emailNotificationsError: false,
-        })
-        .clear();
+      this.controller.setProperties({
+        emailNotificationsSuccess: false,
+        emailNotificationsError: false,
+      });
     },
   },
   model() {

app/services/flash-messages.js

@@ -4,8 +4,9 @@ export default class FlashMessagesService extends Service {
   message = null;
   _nextMessage = null;
 
-  show(message) {
+  show(message, options = { type: 'warning' }) {
     this.set('message', message);
+    this.set('options', options);
   }
 
   queue(message) {

app/templates/catch-all.hbs

@@ -3,13 +3,6 @@
 <p local-class='p404'>
   Perhaps a search of the site may help?
 
-  <Input
-    @type="text"
-    local-class="search-field"
-    class="search"
-    placeholder="Search"
-    @value={{this.search}}
-    @enter={{action "search"}}
-    required={{true}}
-  />
-</p>
+  <Input @type="text" local-class="search-field" class="search" placeholder="Search" @value={{this.search}}
+    @enter={{action "search"}} required={{true}} />
+</p>

app/templates/index.hbs

@@ -1,8 +1,10 @@
+<WelcomeMessage />
 <div local-class='title-header'>
   <h1>The Rust community&rsquo;s crate registry</h1>
 
   <div local-class='links'>
-    <a href="https://doc.rust-lang.org/cargo/getting-started/installation.html" class='yellow-button' data-test-install-cargo-link>
+    <a href="https://doc.rust-lang.org/cargo/getting-started/installation.html" class='yellow-button'
+      data-test-install-cargo-link>
       {{svg-jar "button-download"}}
       Install Cargo
     </a>
@@ -24,12 +26,14 @@
   <div local-class='stats'>
     <div local-class='downloads'>
       {{svg-jar "download"}}
-      <span local-class='num' data-test-total-downloads>{{if this.hasData (format-num this.model.num_downloads) "---,---,---"}}</span>
+      <span local-class='num'
+        data-test-total-downloads>{{if this.hasData (format-num this.model.num_downloads) "---,---,---"}}</span>
       <span class='desc small'>Downloads</span>
     </div>
     <div local-class='crates'>
       {{svg-jar "crate"}}
-      <span local-class='num' data-test-total-crates>{{if this.hasData (format-num this.model.num_crates) "---,---"}}</span>
+      <span local-class='num'
+        data-test-total-crates>{{if this.hasData (format-num this.model.num_crates) "---,---"}}</span>
       <span class='desc small'>Crates in stock</span>
     </div>
   </div>
@@ -53,11 +57,13 @@
     <CrateListNameOnly @crates={{this.model.most_recently_downloaded}} />
   </section>
   <section id='keywords' data-test-keywords aria-busy="{{this.dataTask.isRunning}}">
-    <h2>Popular Keywords <LinkTo @route="keywords">(see all)</LinkTo></h2>
+    <h2>Popular Keywords <LinkTo @route="keywords">(see all)</LinkTo>
+    </h2>
     <KeywordList @keywords={{this.model.popular_keywords}} />
   </section>
   <section id='categories' data-test-categories aria-busy="{{this.dataTask.isRunning}}">
-    <h2>Popular Categories <LinkTo @route="categories">(see all)</LinkTo></h2>
+    <h2>Popular Categories <LinkTo @route="categories">(see all)</LinkTo>
+    </h2>
     <CategoryList @categories={{this.model.popular_categories}} />
   </section>
-</div>
+</div>

mirage/factories/user.js

@@ -1,16 +1,29 @@
-import { Factory } from 'ember-cli-mirage';
-import { dasherize } from '@ember/string';
+import { Factory, trait } from 'ember-cli-mirage';
+import faker from 'faker';
 
 export default Factory.extend({
-  name: i => `User ${i + 1}`,
-
+  email_verified: false,
+  email_verification_sent: true,
+  name() {
+    return faker.name.findName();
+  },
   login() {
-    return dasherize(this.name);
+    return faker.internet.userName();
+  },
+  avatar() {
+    return faker.image.imageUrl();
   },
-
   url() {
-    return `https://github.com/${this.login}`;
+    return faker.internet.url();
   },
+  kind: 'user',
+  has_tokens: false,
+
+  withVerifiedEmail: trait({
+    email_verified: true,
+  }),
 
-  avatar: 'https://avatars1.githubusercontent.com/u/14631425?v=4',
+  withTokens: trait({
+    has_tokens: true,
+  }),
 });

package.json

@@ -93,6 +93,7 @@
     "eslint-config-prettier": "^6.10.0",
     "eslint-plugin-ember": "^7.10.1",
     "eslint-plugin-prettier": "^3.1.2",
+    "faker": "^4.1.0",
     "loader.js": "^4.7.0",
     "normalize.css": "^8.0.1",
     "nyc": "^15.0.0",

src/controllers/user/me.rs

@@ -6,9 +6,9 @@ use crate::controllers::helpers::*;
 use crate::email;
 
 use crate::models::{
-    CrateOwner, Email, Follow, NewEmail, OwnerKind, User, Version, VersionOwnerAction,
+    ApiToken, CrateOwner, Email, Follow, NewEmail, OwnerKind, User, Version, VersionOwnerAction,
 };
-use crate::schema::{crate_owners, crates, emails, follows, users, versions};
+use crate::schema::{api_tokens, crate_owners, crates, emails, follows, users, versions};
 use crate::views::{EncodableMe, EncodableVersion, OwnedCrate};
 
 /// Handles the `GET /me` route.
@@ -27,6 +27,11 @@ pub fn me(req: &mut dyn Request) -> AppResult<Response> {
         ))
         .first::<(User, Option<bool>, Option<String>, bool)>(&*conn)?;
 
+    let tokens: Vec<ApiToken> = ApiToken::belonging_to(req.user()?)
+        .filter(api_tokens::revoked.eq(false))
+        .load(&*conn)?;
+    let has_tokens = !tokens.is_empty();
+
     let owned_crates = CrateOwner::by_owner_kind(OwnerKind::User)
         .inner_join(crates::table)
         .filter(crate_owners::owner_id.eq(user_id))
@@ -44,7 +49,7 @@ pub fn me(req: &mut dyn Request) -> AppResult<Response> {
     let verified = verified.unwrap_or(false);
     let verification_sent = verified || verification_sent;
     Ok(req.json(&EncodableMe {
-        user: user.encodable_private(email, verified, verification_sent),
+        user: user.encodable_private(email, verified, verification_sent, has_tokens),
         owned_crates,
     }))
 }

src/models/user.rs

@@ -171,6 +171,7 @@ impl User {
         email: Option<String>,
         email_verified: bool,
         email_verification_sent: bool,
+        has_tokens: bool,
     ) -> EncodablePrivateUser {
         let User {
             id,
@@ -186,6 +187,7 @@ impl User {
             email,
             email_verified,
             email_verification_sent,
+            has_tokens,
             avatar: gh_avatar,
             login: gh_login,
             name,

src/tests/user.rs

@@ -5,7 +5,7 @@ use crate::{
     OkBool, TestApp,
 };
 use cargo_registry::{
-    models::{Email, NewUser, User},
+    models::{ApiToken, Email, NewUser, User},
     schema::crate_owners,
     views::{EncodablePrivateUser, EncodablePublicUser, EncodableVersion, OwnedCrate},
 };
@@ -745,3 +745,19 @@ fn test_update_email_notifications_not_owned() {
     // There should be no change to the `email_notifications` value for a crate not belonging to me
     assert!(email_notifications);
 }
+
+#[test]
+fn shows_that_user_has_tokens() {
+    let (app, _, user) = TestApp::init().with_user();
+
+    let user_id = user.as_model().id;
+    app.db(|conn| {
+        vec![
+            t!(ApiToken::insert(conn, user_id, "bar")),
+            t!(ApiToken::insert(conn, user_id, "baz")),
+        ]
+    });
+
+    let json = user.show_me();
+    assert!(json.user.has_tokens);
+}

src/views.rs

@@ -176,6 +176,7 @@ pub struct EncodablePrivateUser {
     pub email: Option<String>,
     pub avatar: Option<String>,
     pub url: Option<String>,
+    pub has_tokens: bool,
 }
 
 /// The serialization format for the `User` model.

tests/integration/components/flesh-message-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | flesh-message', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    assert.expect(2);
+
+    await render(hbs`<FlashMessage @message="test text" />`);
+
+    assert.dom('[data-test-flash-message]').hasText('test text');
+    assert.dom('[data-test-flash-message]').isVisible();
+  });
+});