Updated forms.

README.md

@@ -1,8 +1,8 @@
 # umami
 
-## Getting started
+## Installation
 
-### Install umami
+### Get the source code
 
 ```
 git clone https://github.com/mikecao/umami.git
@@ -14,10 +14,16 @@ git clone https://github.com/mikecao/umami.git
 cd umami
 ```
 
+### Install packages
+
+```
+npm install
+```
+
 ### Create database tables
 
-Umami supports MySQL and Postgresql. Create a database for your Umami
-installation and install the tables with the included scripts.
+Umami supports [MySQL](https://www.mysql.com/) and [Postgresql](https://www.postgresql.org/).
+Create a database for your Umami installation and install the tables with the included scripts.
 
 For MySQL:
 
@@ -47,14 +53,36 @@ postgresql://username:mypassword@localhost:5432/mydb
 mysql://username:mypassword@localhost:3306/mydb
 ```
 
-### Start the development server
+The `HASH_SALT` is used to generate unique session values for your installation.
+
+### Generate database client
+
+Depending on your database type, run the appropriate script.
+
+For MySQL:
 
 ```
-npm run develop
+npm run build-mysql-client
+```
+
+For Postgresql:
+
+```
+npm run build-postgresql-client
 ```
 
 ### Create a production build
 
 ```
 npm run build
-```
+```
+
+### Start the application
+
+```
+npm start
+```
+
+By default this will launch the application on `http://localhost:3000`. You will need to either 
+[proxy](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/) requests from your web server
+or change the [port](https://nextjs.org/docs/api-reference/cli#production) to serve the application directly.

components/forms/ShareUrlForm.js

@@ -10,14 +10,15 @@ export default function TrackingCodeForm({ values, onClose }) {
   return (
     <FormLayout>
       <p>
-        This is the public URL for <b>{values.name}</b>.
+        This is the publicly shared URL for <b>{values.name}</b>.
       </p>
       <FormRow>
         <textarea
           ref={ref}
           rows={3}
           cols={60}
-          defaultValue={`${document.location.origin}/share/${share_id}/${name}`}
+          spellCheck={false}
+          defaultValue={`${document.location.origin}/share/${share_id}/${encodeURIComponent(name)}`}
           readOnly
         />
       </FormRow>

components/forms/TrackingCodeForm.js

@@ -17,6 +17,7 @@ export default function TrackingCodeForm({ values, onClose }) {
           ref={ref}
           rows={3}
           cols={60}
+          spellCheck={false}
           defaultValue={`<script async defer data-website-id="${values.website_uuid}" src="${document.location.origin}/umami.js" />`}
           readOnly
         />

components/forms/WebsiteEditForm.js

@@ -45,7 +45,7 @@ export default function WebsiteEditForm({ values, onSave, onClose }) {
   return (
     <FormLayout>
       <Formik
-        initialValues={{ ...initialValues, ...values, make_public: !!values?.share_id }}
+        initialValues={{ ...initialValues, ...values, enable_share_url: !!values?.share_id }}
         validate={validate}
         onSubmit={handleSubmit}
       >
@@ -63,8 +63,8 @@ export default function WebsiteEditForm({ values, onSave, onClose }) {
             </FormRow>
             <FormRow>
               <label></label>
-              <Field name="make_public">
-                {({ field }) => <Checkbox {...field} label="Make public" />}
+              <Field name="enable_share_url">
+                {({ field }) => <Checkbox {...field} label="Enable share URL" />}
               </Field>
             </FormRow>
             <FormButtons>

pages/api/website.js

@@ -7,7 +7,7 @@ export default async (req, res) => {
   await useAuth(req, res);
 
   const { user_id, is_admin } = req.auth;
-  const { website_id, make_public } = req.body;
+  const { website_id, enable_share_url } = req.body;
 
   if (req.method === 'POST') {
     const { name, domain } = req.body;
@@ -19,7 +19,7 @@ export default async (req, res) => {
         let { share_id } = website;
         console.log('exising id', share_id, website);
 
-        if (make_public) {
+        if (enable_share_url) {
           share_id = share_id ? share_id : getRandomChars(8);
         } else {
           share_id = null;
@@ -33,7 +33,7 @@ export default async (req, res) => {
       return unauthorized(res);
     } else {
       const website_uuid = uuid();
-      const share_id = make_public ? getRandomChars(8) : null;
+      const share_id = enable_share_url ? getRandomChars(8) : null;
       const website = await createWebsite(user_id, { website_uuid, name, domain, share_id });
 
       return ok(res, website);

sql/schema.mysql.sql

@@ -19,7 +19,7 @@ create table website (
     user_id int unsigned not null,
     name varchar(100) not null,
     domain varchar(500),
-    share_id varchar(8) unique,
+    share_id varchar(64) unique,
     created_at timestamp default current_timestamp,
     foreign key (user_id) references account(user_id) on delete cascade
 ) ENGINE=InnoDB;

sql/schema.postgresql.sql

@@ -19,7 +19,7 @@ create table website (
     user_id int not null references account(user_id) on delete cascade,
     name varchar(100) not null,
     domain varchar(500),
-    share_id varchar(8) unique,
+    share_id varchar(64) unique,
     created_at timestamp with time zone default current_timestamp
 );