Merge #921

921: Ability to add/update user email r=carols10cents

This PR addresses issue #808, allow editing your own email address. This is the first step in a three part implementation, adding a field to edit an email address. Yet to be implemented before the issue is resolved is (1) the ability to verify emails with users and (2) figuring out how to get everyone to add their email to their account. This PR only implements the addition of a button to the email field such that a user's email can be added or updated, as well as hiding the email field from public view by separating `EncodableUser` into `EncodablePublicUser` and `EncodablePrivateUser`.

Author: bors-voyager[bot]

app/components/email-input.js

@@ -0,0 +1,62 @@
+import Component from '@ember/component';
+import { empty } from '@ember/object/computed';
+
+export default Component.extend({
+    type: '',
+    value: '',
+    isEditing: false,
+    user: null,
+    disableSave: empty('user.email'),
+    notValidEmail: false,
+    prevEmail: '',
+    emailIsNull: true,
+
+    actions: {
+        editEmail() {
+            let email = this.get('value');
+            let isEmailNull = function(email) {
+                return (email == null);
+            };
+
+            this.set('emailIsNull', isEmailNull(email));
+            this.set('isEditing', true);
+            this.set('prevEmail', this.get('value'));
+        },
+
+        saveEmail() {
+            let userEmail = this.get('value');
+            let user = this.get('user');
+
+            let emailIsProperFormat = function(userEmail) {
+                let regExp = /^\S+@\S+\.\S+$/;
+                return regExp.test(userEmail);
+            };
+
+            if (!emailIsProperFormat(userEmail)) {
+                this.set('notValidEmail', true);
+                return;
+            }
+
+            user.set('email', userEmail);
+            user.save()
+                .then(() => this.set('serverError', null))
+                .catch(err => {
+                    let msg;
+                    if (err.errors && err.errors[0] && err.errors[0].detail) {
+                        msg = `An error occurred while saving this email, ${err.errors[0].detail}`;
+                    } else {
+                        msg = 'An unknown error occurred while saving this email.';
+                    }
+                    this.set('serverError', msg);
+                });
+
+            this.set('isEditing', false);
+            this.set('notValidEmail', false);
+        },
+
+        cancelEdit() {
+            this.set('isEditing', false);
+            this.set('value', this.get('prevEmail'));
+        }
+    }
+});

app/components/validated-input.js

@@ -0,0 +1,41 @@
+import Ember from 'ember';
+
+const {
+    computed,
+    defineProperty
+} = Ember;
+
+export default Ember.Component.extend({
+    classNames: ['validated-input'],
+    classNameBindings: ['showErrorClass:has-error', 'isValid:has-success'],
+    model: null,
+    value: null,
+    type: 'text',
+    valuePath: '',
+    placeholder: '',
+    validation: null,
+    showValidations: false,
+    didValidate: false,
+
+    notValidating: computed.not('validation.isValidating').readOnly(),
+    hasContent: computed.notEmpty('value').readOnly(),
+    hasWarnings: computed.notEmpty('validation.warnings').readOnly(),
+    isValid: computed.and('hasContent', 'validation.isTruelyValid').readOnly(),
+    shouldDisplayValidations: computed.or('showValidations', 'didValidate', 'hasContent').readOnly(),
+
+    showErrorClass: computed.and('notValidating', 'showErrorMessage', 'hasContent', 'validation').readOnly(),
+    showErrorMessage: computed.and('shouldDisplayValidations', 'validation.isInvalid').readOnly(),
+
+    init() {
+        this._super(...arguments);
+        let valuePath = this.get('valuePath');
+
+        defineProperty(this, 'validation', computed.readOnly(`model.validations.attrs.${valuePath}`));
+        defineProperty(this, 'value', computed.alias(`model.${valuePath}`));
+    },
+
+    focusOut() {
+        this._super(...arguments);
+        this.set('showValidations', true);
+    }
+});

app/styles/me.scss

@@ -16,6 +16,48 @@
             clear: both;
         }
         dd { float: left; margin-left: 10px; }
+        .align-center {
+            @include align-items(center);
+        }
+        .row {
+            width: 100%;
+            border: 1px solid #d5d3cb;
+            border-bottom-width: 0px;
+            &:last-child { border-bottom-width: 1px; }
+            padding: 10px 20px 10px 0;
+            @include display-flex;
+            background-color: $main-bg-dark;
+            .small-text {
+                font-size: 90%;
+            }
+            .error {
+                color: rgb(216, 0, 41);
+            }
+            .label {
+                @include flex(1);
+                margin-right: 0.4em;
+                font-weight: bold;
+            }
+            .actions {
+                @include display-flex;
+                @include align-items(center);
+            }
+            .space-left {
+                margin-left: 10px;
+            }
+            .space-right {
+                margin-right: 10px;
+            }
+            .no-space-left {
+                margin-left: 0px;
+            }
+            p {
+                width: 80%;
+            }
+            .space-bottom {
+                margin-bottom: 10px;
+            }
+        }
     }
 
     @media only screen and (max-width: 550px) {

app/templates/components/email-input.hbs

@@ -0,0 +1,34 @@
+{{#if isEditing }}
+    <div class='row'>
+        <div class='label'>
+            <dt>Email</dt>
+        </div>
+        <form {{action 'saveEmail' on='submit'}}>
+            {{input type=type value=value placeholder='Email' class='form-control space-bottom'}}
+            {{#if notValidEmail }}
+                <p class='small-text error'>Invalid email format. Please try again.</p>
+            {{/if}}
+            {{#if emailIsNull }}
+                <p class='small-text'> Please add your email address. We will only use
+                it to contact you about your account. We promise we'll never share it!
+                </p>
+            {{/if}}
+            <div class='actions'>
+                <button type='submit' class='small yellow-button space-right' disabled={{disableSave}}>Save</button>
+                <button class='small yellow-button' {{action 'cancelEdit'}}>Cancel</button>
+            </div>
+        </form>
+    </div>
+{{else}}
+    <div class='row align-center'>
+        <div class='label'>
+            <dt>Email</dt>
+        </div>
+        <div class='email'>
+            <dd class='no-space-left'>{{ user.email }}</dd>
+        </div>
+        <div class='actions'>
+            <button class='small yellow-button space-left' {{action 'editEmail'}}>Edit</button>
+        </div>
+    </div>
+{{/if}}

app/templates/components/validated-input.hbs

@@ -0,0 +1,14 @@
+<div class='form-group'>
+    {{input type=type value=value placeholder=placeholder class='form-control' name=valuePath}}
+    {{#if isValid}}
+        <span class='valid-input fa fa-check'></span>
+    {{/if}}
+
+    <div class='input-error'>
+        {{#if showErrorMessage}}
+            <div class='error'>
+                {{v-get model valuePath 'message'}}
+            </div>
+        {{/if}}
+    </div>
+</div>

app/templates/me/index.hbs

@@ -16,8 +16,7 @@
             <dd>{{ model.user.name }}</dd>
             <dt>GitHub Account</dt>
             <dd>{{ model.user.login }}</dd>
-            <dt>Email</dt>
-            <dd>{{ model.user.email }}</dd>
+            {{email-input type='email' value=model.user.email user=model.user}}
         </dl>
     </div>
 </div>

src/lib.rs

@@ -170,6 +170,7 @@ pub fn middleware(app: Arc<App>) -> MiddlewareBuilder {
     api_router.get("/categories/:category_id", C(category::show));
     api_router.get("/category_slugs", C(category::slugs));
     api_router.get("/users/:user_id", C(user::show));
+    api_router.put("/users/:user_id", C(user::update_user));
     api_router.get("/users/:user_id/stats", C(user::stats));
     api_router.get("/teams/:team_id", C(user::show_team));
     let api_router = Arc::new(R404(api_router));

src/owner.rs

@@ -67,7 +67,6 @@ pub struct EncodableOwner {
     pub id: i32,
     pub login: String,
     pub kind: String,
-    pub email: Option<String>,
     pub url: Option<String>,
     pub name: Option<String>,
     pub avatar: Option<String>,
@@ -361,7 +360,6 @@ impl Owner {
         match self {
             Owner::User(User {
                             id,
-                            email,
                             name,
                             gh_login,
                             gh_avatar,
@@ -371,7 +369,6 @@ impl Owner {
                 EncodableOwner {
                     id: id,
                     login: gh_login,
-                    email: email,
                     avatar: gh_avatar,
                     url: Some(url),
                     name: name,
@@ -389,7 +386,6 @@ impl Owner {
                 EncodableOwner {
                     id: id,
                     login: login,
-                    email: None,
                     url: Some(url),
                     avatar: avatar,
                     name: name,

src/tests/krate.rs

@@ -22,7 +22,7 @@ use cargo_registry::owner::EncodableOwner;
 use cargo_registry::schema::versions;
 
 use cargo_registry::upload as u;
-use cargo_registry::user::EncodableUser;
+use cargo_registry::user::EncodablePublicUser;
 use cargo_registry::version::EncodableVersion;
 use cargo_registry::category::Category;
 
@@ -1216,7 +1216,7 @@ fn following() {
 fn owners() {
     #[derive(Deserialize)]
     struct R {
-        users: Vec<EncodableUser>,
+        users: Vec<EncodablePublicUser>,
     }
     #[derive(Deserialize)]
     struct O {