Release/0.5.1

CHANGELOG.md

@@ -1,5 +1,22 @@
 # Solid React Application Generator
 
+## 0.5.1 (June 5, 2019)
+
+#### Solid React Application Base
+
+##### Updated
+* Profile form now autosaves
+* Profile form now liveupdates when the form data changes from another source
+* New error messages (and translations) added for the new profile form
+* Latest version of solid-react-components
+
+##### Fixed
+* Login Provider list is now properly left-aligned instead of center-aligned
+* Registration page title is now the proper color and is no longer underneath the top nav
+* Profile image predicate now matches the Solid data browser profile image predicate
+* Uploading multiple profile images from the welcome page now properly uses the latest uploaded file (previously was only using first uploaded file)
+
+
 ## 0.5.0 (May 22, 2019)
 
 #### Solid React Application Base

generators/app/templates/package.json

@@ -4,7 +4,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.8.0",
     "@fortawesome/free-solid-svg-icons": "^5.6.3",
     "@fortawesome/react-fontawesome": "^0.1.4",
-    "@inrupt/solid-react-components": "^0.4.0",
+    "@inrupt/solid-react-components": "^0.4.2",
     "@inrupt/solid-style-guide": "^0.1.34",
     "@rdfjs/data-model": "^1.1.1",
     "@solid/query-ldflex": "^2.4.0",

generators/app/templates/public/locales/en-US/translation.json

@@ -89,6 +89,11 @@
       "unsupported": "Unsupported media type",
       "maximumFiles": "Sorry, you have exceeded the maximum number of files allowed per upload"
     },
-    "deleteNotification": "Clicking ‘Remove’ will delete the associated element immediately. There is no undo."
+    "autosaveNotification": "Profile changes are saved immediately. There is no undo.",
+    "warningResolution": "Field value has been updated to:",
+    "minMxNumberInclusive": "Error: Min and max should be ",
+    "minMxNumberExclusive": "Error: Min and max value should be ",
+    "minMaxString": "Error: Min and max should be ",
+    "defaultError": "Error: Field value has wrong format"
   }
 }

generators/app/templates/public/locales/en/translation.json

@@ -89,6 +89,11 @@
       "unsupported": "Unsupported media type",
       "maximumFiles": "Sorry, you have exceeded the maximum number of files allowed per upload"
     },
-    "deleteNotification": "Clicking ‘Remove’ will delete the associated element immediately. There is no undo."
+    "autosaveNotification": "Profile changes are saved immediately. There is no undo.",
+    "warningResolution": "Field value has been updated to:",
+    "minMxNumberInclusive": "Error: Min and max should be ",
+    "minMxNumberExclusive": "Error: Min and max value should be ",
+    "minMaxString": "Error: Min and max should be ",
+    "defaultError": "Error: Field value has wrong format"
   }
 }

generators/app/templates/public/locales/es/translation.json

@@ -89,6 +89,11 @@
       "unsupported": "Formato no soportado",
       "maximumFiles": "Disculpe, has excedido la cantidad máxima de archivos permitidos por subida"
     },
-    "deleteNotification": "Dar click a 'Eliminar' borraría el elemento asociado inmediatamente. No hay vuelta atrás."
+    "autosaveNotification": "Cambios realizados en el Perfil son guardados automáticamente. No se puede deshacer.",
+    "warningResolution": "El valor del campo se ha actualizado a ",
+    "minMxNumberInclusive": "Error: Mínimo y máximo debería ser ",
+    "minMxNumberExclusive": "Error: Mínimo y máximo debería ser ",
+    "minMaxString": "Error: Mínimo y máximo debería ser ",
+    "defaultError": "Error: Formato incorrecto"
   }
 }

generators/app/templates/src/components/AuthNavBar/auth-nav-bar.container.js

@@ -23,8 +23,7 @@ class AuthNavBarContainer extends Component {
        * for more information please go to: https://github.com/digitalbazaar/jsonld.js
        */
       const userName = await user.name;
-      let userImage = await user.image;
-      userImage = userImage ? userImage : await user.vcard_hasPhoto;
+      const userImage = await user.vcard_hasPhoto;
       const name = userName ? userName.value : "";
       const image = userImage ? userImage.value : "/img/icon/empty-profile.svg";
       this.setState({

generators/app/templates/src/containers/Profile/components/Image/image.component.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import data from '@solid/query-ldflex';
 import { Uploader, useLiveUpdate } from '@inrupt/solid-react-components';
 import { useTranslation } from 'react-i18next';
-
+import { namedNode } from "@rdfjs/data-model";
 import { ImageProfile } from '@components';
 
 type Props = {
@@ -35,7 +35,7 @@ export const Image = ({ webId, toastManager, defaultProfilePhoto }: Props) => {
                  * if you want to know more about context please go to:
                  * https://github.com/digitalbazaar/jsonld.js
                  */
-                const image = (await user.image) || (await user.vcard_hasPhoto);
+                const image = await user.vcard_hasPhoto;
 
                 setImage(image && image.value);
             }
@@ -55,7 +55,7 @@ export const Image = ({ webId, toastManager, defaultProfilePhoto }: Props) => {
         try {
             const { user } = data;
 
-            await user.image.set(uri);
+            await user.vcard_hasPhoto.set(namedNode(uri));
 
             toastManager.add(['', t('profile.uploadSuccess')], {
                 appearance: 'success',

generators/app/templates/src/containers/Profile/profile.container.js

@@ -8,7 +8,7 @@ import {
     ProfileContainer,
     ProfileWrapper,
     ShexForm,
-    DeleteNotification,
+    AutoSaveNotification,
     WebId,
 } from './profile.style';
 import { Image } from './components';
@@ -59,12 +59,12 @@ const Profile = ({ toastManager }) => {
                             />
                         </Header>
 
-                        <DeleteNotification className="banner-wrap--warning banner">
+                        <AutoSaveNotification className="banner-wrap--warning banner">
                             <div className="banner-wrap__content">
                                 <i className="icon fa fa-exclamation-circle" />
-                                {t('profile.deleteNotification')}
+                                {t('profile.autosaveNotification')}
                             </div>
-                        </DeleteNotification>
+                        </AutoSaveNotification>
 
                         <ShexForm>
                             <WebId>
@@ -101,9 +101,17 @@ const Profile = ({ toastManager }) => {
                                         dropdownDefaultText: t(
                                             'profile.dropdownDefaultText'
                                         ),
+                                        warningResolution: t('profile.warningResolution'),
+                                        formValidate: {
+                                          minMxNumberInclusive: t('profile.minMxNumberInclusive'),
+                                          minMxNumberExclusive: t('profile.minMxNumberExclusive'),
+                                          minMaxString: t('profile.minMaxString'),
+                                          default: t('profile.defaultError')
+                                        }
                                     },
                                     successCallback,
                                     errorCallback,
+                                    autoSaveMode : true
                                 }}
                             />
                         </ShexForm>

generators/app/templates/src/containers/Profile/profile.style.js

@@ -147,6 +147,6 @@ background: #f9f9f9;
     }
 `;
 
-export const DeleteNotification = styled.section`
+export const AutoSaveNotification = styled.section`
   margin-bottom:0px !important;
 `;

generators/app/templates/src/containers/Register/children/RegistrationSuccess/registration-success.style.js

@@ -3,6 +3,11 @@ import { GradientBackground } from "@util-components";
 
 export const RegistrationPage = styled(GradientBackground)`
   text-align: center;
+  margin-top: 40px;
+
+  h1 {
+    color: #ffffff;
+  }
 
   span {
     color: #ffffff;

generators/app/templates/src/containers/Welcome/welcome.component.js

@@ -51,7 +51,7 @@ const WelcomePageContent = props => {
                   }
                 },
                 onComplete: uploadedFiles => {
-                  updatePhoto(uploadedFiles[0].uri, t('welcome.uploadSuccess'));
+                  updatePhoto(uploadedFiles[uploadedFiles.length - 1].uri, t('welcome.uploadSuccess'));
                 },
                 render: props => (
                   <ImageProfile

generators/app/templates/src/containers/Welcome/welcome.container.js

@@ -3,7 +3,7 @@ import WelcomePageContent from './welcome.component';
 import { withWebId } from '@inrupt/solid-react-components';
 import data from '@solid/query-ldflex';
 import { withToastManager } from 'react-toast-notifications';
-
+import { namedNode } from "@rdfjs/data-model";
 const defaultProfilePhoto = '/img/icon/empty-profile.svg';
 
 /**
@@ -51,8 +51,7 @@ class WelcomeComponent extends Component<Props> {
 
     const name = nameLd ? nameLd.value : '';
 
-    let imageLd = await user.image;
-    imageLd = imageLd ? imageLd : await user.vcard_hasPhoto;
+    let imageLd = await user.vcard_hasPhoto;
 
     let image;
     if (imageLd && imageLd.value) {
@@ -85,8 +84,8 @@ class WelcomeComponent extends Component<Props> {
     try {
       const { user } = data;
       this.state.hasImage
-        ? await user.image.set(uri)
-        : await user.image.add(uri);
+        ? await user.vcard_hasPhoto.set(namedNode(uri))
+        : await user.vcard_hasPhoto.add(namedNode(uri));
 
       this.props.toastManager.add(['', message], {
         appearance: 'success'

generators/app/templates/src/index.css

@@ -104,3 +104,12 @@ form-group .select-role {
   margin: 10px 0;
 }
 
+/* Overriding the center-align property from the styleguide */
+.solid-provider-select {
+  text-align: left !important;
+}
+
+.solid-provider-select .option {
+  padding-left: 10px !important;
+}
+

generators/app/templates/src/layouts/PrivateLayout/private.layout.js

@@ -26,10 +26,10 @@ const PrivateLayout = ({ routes, ...rest }) => {
       {...rest}
       component={matchProps => (
         <Container>
-          <LiveUpdate>
+          { rest.webId && <LiveUpdate subscribe={rest.webId}>
             <AuthNavBar {...matchProps} />
-          </LiveUpdate>
-          <Content>
+          </LiveUpdate>}
+          <Content className={'contentApp'}>
             <Switch>
               {routes.map(route => (
                 <Route key={route.id} {...route} exact />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inrupt/generator-solid-react",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Solid React Application Generator",
   "homepage": "https://solid.inrupt.com/docs",
   "contributors": [
@@ -22,7 +22,7 @@
     },
     {
       "name": "Arne Hassel",
-      "email": "arneh@inrupt.com"
+      "email": "arneh@inrupt.com" 
     }
   ],
   "files": [