Merge with changes from rust-lang#2111

Author: JonathanHelianthicusDoe

app/components/flash-message.hbs

@@ -1,3 +1,3 @@
-<p id="flash" class={{if this.message "shown"}} data-test-flash-message ...attributes>
+<p local-class="flash {{if this.message "shown"}}" data-test-flash-message ...attributes>
   {{this.message}}
 </p>

app/styles/components/flash-message.scss renamed to app/components/flash-message.module.scss

@@ -1,4 +1,4 @@
-#flash {
+.flash {
     display: none;
     font-weight: bold;
     font-size: 110%;

app/components/pagination.hbs

@@ -1,5 +1,5 @@
-<nav class='pagination' aria-label="Pagination navigation">
-  <LinkTo @query={{hash page=@prevPage}} class="prev" @rel="prev" @title="previous page" data-test-pagination-prev>
+<nav local-class='pagination' aria-label="Pagination navigation">
+  <LinkTo @query={{hash page=@prevPage}} local-class="prev" @rel="prev" @title="previous page" data-test-pagination-prev>
     {{svg-jar "left-pag"}}
   </LinkTo>
   <ol>
@@ -11,7 +11,7 @@
       </li>
     {{/each}}
   </ol>
-  <LinkTo @query={{hash page=@nextPage}} class="next" @rel="next" @title="next page" data-test-pagination-next>
+  <LinkTo @query={{hash page=@nextPage}} local-class="next" @rel="next" @title="next page" data-test-pagination-next>
     {{svg-jar "right-pag"}}
   </LinkTo>
 </nav>

app/styles/components/pagination.scss renamed to app/components/pagination.module.scss

@@ -17,14 +17,15 @@
         text-decoration: none;
         padding: 5px 6px;
     }
+
     a:hover {
         background-color: $main-bg-dark;
         @media only screen and (prefers-color-scheme: dark) {
             background-color: #111;
             font-weight: bolder;
         }
     }
-    a.active {
+    a:global(.active) {
         background-color: $main-bg-dark;
         @media only screen and (prefers-color-scheme: dark) {
             background-color: #111;
@@ -33,8 +34,8 @@
 
     img, svg { vertical-align: middle; }
 
-    .next.active,
-    .prev.active,
+    .next:global(.active),
+    .prev:global(.active),
     .next:hover,
     .prev:hover {
         background: none;

app/router.js

@@ -48,6 +48,7 @@ Router.map(function() {
   this.route('policies');
   this.route('data-access');
   this.route('confirm', { path: '/confirm/:email_token' });
+  this.route('accept-invite', { path: '/accept-invite/:token' });
 
   this.route('catch-all', { path: '*path' });
 });

app/routes/accept-invite.js

@@ -0,0 +1,15 @@
+import Route from '@ember/routing/route';
+import ajax from 'ember-fetch/ajax';
+
+export default Route.extend({
+  async model(params) {
+    try {
+      await ajax(`/api/v1/me/crate_owner_invitations/accept/${params.token}`, { method: 'PUT', body: '{}' });
+      this.set('response', { accepted: true });
+      return { response: this.get('response') };
+    } catch (error) {
+      this.set('response', { accepted: false });
+      return { response: this.get('response') };
+    }
+  },
+});

app/styles/app.scss

@@ -12,18 +12,14 @@ $link-color: rgb(0, 172, 91);
 
 @import "application";
 @import "home";
-@import "catch-all";
 @import "category-slugs";
 @import "crate";
 @import "crate/version";
 @import "components/crate-toml-copy";
-@import "components/flash-message";
-@import "components/pagination";
 @import "dashboard";
-@import "index";
-@import "loading";
 @import "me";
-@import "search";
+
+@import "modules";
 
 * {
   box-sizing: border-box;

app/styles/catch-all.module.scss

@@ -0,0 +1,14 @@
+.p404 {
+    font-size: 120%;
+    line-height: 3em;
+}
+
+.search-field {
+    width: 100%;
+    padding: 5px;
+    @media only screen and (prefers-color-scheme: dark) {
+        background-color: #222;
+        color: #eee;
+        border-color: #666;
+    }
+}

app/styles/catch-all.scss

@@ -55,6 +55,17 @@
     }
 }
 
+@media only screen and (prefers-color-scheme: dark) {
+    .crate-search {
+        background-color: #111;
+        color: #eee;
+    }
+
+    .crate-search svg {
+        filter: invert(100%);
+    }
+}
+
 #selection {
     width: 100%;
     display: flex;

app/styles/crate.scss

@@ -1,7 +1,11 @@
-#crate-all-versions {
+.list {
     margin-top: 10px;
 
-    .small { margin-left: 20px; display: inline-block; }
+    :global(.small) {
+        margin-left: 20px;
+        display: inline-block;
+    }
+
     a.arrow {
         display: inline-block;
         float: right;

app/styles/crate/versions.scss renamed to app/styles/crate/versions.module.scss

@@ -1,4 +1,4 @@
-#title-header {
+.title-header {
     text-align: center;
     border-bottom: 5px solid $gray-border;
     @media only screen and (prefers-color-scheme: dark) {
@@ -22,13 +22,13 @@
     }
 }
 
-#blurb {
+.blurb {
     margin: 30px 0 40px 0;
     display: flex;
 
-    #intro { flex: 6; line-height: 25px; padding: 10px;}
+    .intro { flex: 6; line-height: 25px; padding: 10px;}
 
-    #stats {
+    .stats {
         flex: 4;
         display: flex;
         flex-direction: column;
@@ -53,7 +53,7 @@
 
     @media only screen and (max-width: 530px) {
         flex-direction: column;
-        #stats {
+        .stats {
             border: none;
             margin: auto;
         }
@@ -63,19 +63,19 @@
     }
 }
 
-#home-crates {
+.lists {
     flex-wrap: wrap;
     justify-content: left;
 
     > section {
-      margin: 0;
-      padding: 0 15px;
-      width: 33.33%;
-      @media only screen and (max-width: 750px) {
-        width: 50%;
-      }
-      @media only screen and (max-width: 550px) {
-        width: 100%;
-      }
+        margin: 0;
+        padding: 0 15px;
+        width: 33.33%;
+        @media only screen and (max-width: 750px) {
+            width: 50%;
+        }
+        @media only screen and (max-width: 550px) {
+            width: 100%;
+        }
     }
 }

app/styles/index.scss renamed to app/styles/index.module.scss

@@ -1,9 +1,10 @@
-div.loading-state {
+.loading-state {
     text-align: center;
     height: 65vh;
     padding-top: 30vh;
 }
-span.loading {
+
+.loading {
     display: inline-block;
     width: 16px;
     height: 16px;

app/styles/loading.scss renamed to app/styles/loading.module.scss

@@ -0,0 +1,3 @@
+.loading-spinner {
+    margin: 0 15px;
+}

app/styles/search.module.scss

@@ -0,0 +1,7 @@
+{{#if this.model.response.accepted}}
+  <h1>You've been added as a crate owner!</h1>
+  <p>Visit your <a href="/dashboard">dashboard</a> to view all of your crates, or <a href="/me">account settings</a> to manage email notification preferences for all of your crates.</p>
+{{else}}
+  <h1>Error in accepting crate ownership.</h1>
+  <p>You may want to visit <a href="/me/pending-invites">crates.io/me/pending-invites</a> to try again.</p>
+{{/if}}

app/styles/search.scss

@@ -1,10 +1,11 @@
 <FlashMessage @message="Oops, that route doesn't exist!" />
 
-<p id='p404'>
+<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}}

app/templates/accept-invite.hbs

@@ -10,7 +10,7 @@
   </span>
 </div>
 
-<div id='crate-all-versions' class='white-rows'>
+<div local-class='list' class='white-rows'>
   {{#each this.model.versions as |version|}}
     <div class='row'>
       <div>

app/templates/catch-all.hbs

@@ -1,7 +1,7 @@
-<div id='title-header'>
+<div local-class='title-header'>
   <h1>The Rust community&rsquo;s crate registry</h1>
 
-  <div class='links'>
+  <div local-class='links'>
     <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
@@ -14,28 +14,28 @@
   </div>
 </div>
 
-<div id='blurb'>
-  <div id='intro'>
+<div local-class='blurb'>
+  <div local-class='intro'>
     Instantly publish your crates and install them. Use the API to
     interact and find out more information about available crates. Become
     a contributor and enhance the site with your work.
   </div>
 
-  <div id='stats'>
-    <div class='downloads'>
+  <div local-class='stats'>
+    <div local-class='downloads'>
       {{svg-jar "download"}}
-      <span 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 class='crates'>
+    <div local-class='crates'>
       {{svg-jar "crate"}}
-      <span 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>
 </div>
 
-<div id='home-crates' class='crate-lists'>
+<div local-class='lists' class='crate-lists'>
   <section id='new-crates' data-test-new-crates aria-busy="{{this.dataTask.isRunning}}">
     <h2>New Crates</h2>
     <CrateListNewest @crates={{this.model.new_crates}} />

app/templates/crate/versions.hbs

@@ -1,3 +1,3 @@
-<div class="loading-state">
-  <span class="loading"></span> Loading...
+<div local-class="loading-state">
+  <span local-class="loading"></span> Loading...
 </div>

app/templates/index.hbs

@@ -9,7 +9,7 @@
     <h2>for '{{ this.q }}'</h2>
   {{/if}}
 
-  {{#if this.dataTask.isRunning}}<img src="/assets/ajax-loader.gif" class="loading-spinner">{{/if}}
+  {{#if this.dataTask.isRunning}}<img src="/assets/ajax-loader.gif" local-class="loading-spinner">{{/if}}
 </div>
 
 {{#if this.firstResultPending}}

app/templates/loading.hbs

@@ -26,6 +26,10 @@ module.exports = function(environment) {
     fastboot: {
       hostWhitelist: ['crates.io', /^localhost:\d+$/, /\.herokuapp\.com$/],
     },
+
+    'ember-cli-mirage': {
+      discoverEmberDataModels: false,
+    },
   };
 
   if (environment === 'development') {
@@ -55,6 +59,7 @@ module.exports = function(environment) {
 
   if (environment === 'production') {
     // here you can enable a production-specific feature
+    delete ENV['ember-cli-mirage'];
 
     // Heroku Git Hash support
     if (process.env.SOURCE_VERSION) {

app/templates/search.hbs

@@ -31,6 +31,10 @@ module.exports = function(defaults) {
     sassOptions: {
       includePaths: ['node_modules/normalize.css'],
     },
+    cssModules: {
+      extension: 'module.scss',
+      intermediateOutputPath: 'app/styles/_modules.scss',
+    },
     fingerprint: {
       extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg', 'ttf', 'woff', 'woff2'],
     },

config/environment.js

@@ -0,0 +1,4 @@
+DROP TRIGGER trigger_crate_owner_invitations_set_token_generated_at ON crate_owner_invitations;
+DROP FUNCTION crate_owner_invitations_set_token_generated_at();
+ALTER TABLE crate_owner_invitations DROP COLUMN token_generated_at;
+ALTER TABLE crate_owner_invitations DROP COLUMN token;

ember-cli-build.js

@@ -0,0 +1,13 @@
+ALTER TABLE crate_owner_invitations ADD COLUMN token TEXT NOT NULL DEFAULT random_string(26);
+ALTER TABLE crate_owner_invitations ADD COLUMN token_generated_at TIMESTAMP;
+
+CREATE FUNCTION crate_owner_invitations_set_token_generated_at() RETURNS trigger AS $$
+  BEGIN
+    NEW.token_generated_at := CURRENT_TIMESTAMP;
+    RETURN NEW;
+  END
+$$ LANGUAGE plpgsql;
+
+CREATE TRIGGER trigger_crate_owner_invitations_set_token_generated_at BEFORE
+INSERT OR UPDATE OF token ON crate_owner_invitations
+FOR EACH ROW EXECUTE PROCEDURE crate_owner_invitations_set_token_generated_at();