Finished new user invite flow

resources/assets/js/components/index.js

@@ -28,6 +28,7 @@ import bookSort from "./book-sort";
 import settingAppColorPicker from "./setting-app-color-picker";
 import entityPermissionsEditor from "./entity-permissions-editor";
 import templateManager from "./template-manager";
+import newUserPassword from "./new-user-password";
 
 const componentMapping = {
     'dropdown': dropdown,
@@ -60,6 +61,7 @@ const componentMapping = {
     'setting-app-color-picker': settingAppColorPicker,
     'entity-permissions-editor': entityPermissionsEditor,
     'template-manager': templateManager,
+    'new-user-password': newUserPassword,
 };
 
 window.components = {};

resources/assets/js/components/new-user-password.js

@@ -0,0 +1,28 @@
+
+class NewUserPassword {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.inviteOption = elem.querySelector('input[name=send_invite]');
+
+        if (this.inviteOption) {
+            this.inviteOption.addEventListener('change', this.inviteOptionChange.bind(this));
+            this.inviteOptionChange();
+        }
+    }
+
+    inviteOptionChange() {
+        const inviting = (this.inviteOption.value === 'true');
+        const passwordBoxes = this.elem.querySelectorAll('input[type=password]');
+        for (const input of passwordBoxes) {
+            input.disabled = inviting;
+        }
+        const container = this.elem.querySelector('#password-input-container');
+        if (container) {
+            container.style.display = inviting ? 'none' : 'block';
+        }
+    }
+
+}
+
+export default NewUserPassword;

resources/assets/js/components/toggle-switch.js

@@ -11,6 +11,11 @@ class ToggleSwitch {
 
     stateChange() {
         this.input.value = (this.checkbox.checked ? 'true' : 'false');
+
+        // Dispatch change event from hidden input so they can be listened to
+        // like a normal checkbox.
+        const changeEvent = new Event('change');
+        this.input.dispatchEvent(changeEvent);
     }
 
 }

resources/lang/en/auth.php

@@ -67,7 +67,11 @@ return [
 
     // User Invite
     'user_invite_email_subject' => 'You have been invited to join :appName!',
-    'user_invite_email_greeting' => 'A user account has been created for you on :appName.',
+    'user_invite_email_greeting' => 'An account has been created for you on :appName.',
     'user_invite_email_text' => 'Click the button below to set an account password and gain access:',
     'user_invite_email_action' => 'Set Account Password',
+    'user_invite_page_welcome' => 'Welcome to :appName!',
+    'user_invite_page_text' => 'To finalise your account and gain access you need to set a password which will be used to log-in to :appName on future visits.',
+    'user_invite_page_confirm_button' => 'Confirm Password',
+    'user_invite_success' => 'Password set, you now have access to :appName!'
 ];

resources/lang/en/errors.php

@@ -27,7 +27,7 @@ return [
     'social_account_register_instructions' => 'If you do not yet have an account, You can register an account using the :socialAccount option.',
     'social_driver_not_found' => 'Social driver not found',
     'social_driver_not_configured' => 'Your :socialAccount social settings are not configured correctly.',
-    'invite_token_expired' => 'This invitation link has expired. You can try to reset your account password or request a new invite from an administrator.',
+    'invite_token_expired' => 'This invitation link has expired. You can instead try to reset your account password.',
 
     // System
     'path_not_writable' => 'File path :filePath could not be uploaded to. Ensure it is writable to the server.',

resources/lang/en/settings.php

@@ -109,7 +109,9 @@ return [
     'users_role' => 'User Roles',
     'users_role_desc' => 'Select which roles this user will be assigned to. If a user is assigned to multiple roles the permissions from those roles will stack and they will receive all abilities of the assigned roles.',
     'users_password' => 'User Password',
-    'users_password_desc' => 'Set a password used to log-in to the application. This must be at least 5 characters long.',
+    'users_password_desc' => 'Set a password used to log-in to the application. This must be at least 6 characters long.',
+    'users_send_invite_text' => 'You can choose to send this user an invitation email which allows them to set their own password otherwise you can set their password yourself.',
+    'users_send_invite_option' => 'Send user invite email',
     'users_external_auth_id' => 'External Authentication ID',
     'users_external_auth_id_desc' => 'This is the ID used to match this user when communicating with your LDAP system.',
     'users_password_warning' => 'Only fill the below if you would like to change your password.',

resources/views/auth/invite-set-password.blade.php

@@ -0,0 +1,27 @@
+@extends('simple-layout')
+
+@section('content')
+
+    <div class="container very-small mt-xl">
+        <div class="card content-wrap auto-height">
+            <h1 class="list-heading">{{ trans('auth.user_invite_page_welcome', ['appName' => setting('app-name')]) }}</h1>
+            <p>{{ trans('auth.user_invite_page_text', ['appName' => setting('app-name')]) }}</p>
+
+            <form action="{{ url('/register/invite/' . $token) }}" method="POST" class="stretch-inputs">
+                {!! csrf_field() !!}
+
+                <div class="form-group">
+                    <label for="password">{{ trans('auth.password') }}</label>
+                    @include('form.password', ['name' => 'password', 'placeholder' => trans('auth.password_hint')])
+                </div>
+
+                <div class="text-right">
+                    <button class="button primary">{{ trans('auth.user_invite_page_confirm_button') }}</button>
+                </div>
+
+            </form>
+
+        </div>
+    </div>
+
+@stop

resources/views/users/form.blade.php

@@ -48,23 +48,40 @@
 @endif
 
 @if($authMethod === 'standard')
-    <div>
+    <div new-user-password>
         <label class="setting-list-label">{{ trans('settings.users_password') }}</label>
-        <p class="small">{{ trans('settings.users_password_desc') }}</p>
-        @if(isset($model))
+
+        @if(!isset($model))
             <p class="small">
-                {{ trans('settings.users_password_warning') }}
+                {{ trans('settings.users_send_invite_text') }}
             </p>
+
+            @include('components.toggle-switch', [
+                'name' => 'send_invite',
+                'value' => old('send_invite', 'true') === 'true',
+                'label' => trans('settings.users_send_invite_option')
+            ])
+
         @endif
-        <div class="grid half mt-m gap-xl">
-            <div>
-                <label for="password">{{ trans('auth.password') }}</label>
-                @include('form.password', ['name' => 'password'])
-            </div>
-            <div>
-                <label for="password-confirm">{{ trans('auth.password_confirm') }}</label>
-                @include('form.password', ['name' => 'password-confirm'])
+
+        <div id="password-input-container" @if(!isset($model)) style="display: none;" @endif>
+            <p class="small">{{ trans('settings.users_password_desc') }}</p>
+            @if(isset($model))
+                <p class="small">
+                    {{ trans('settings.users_password_warning') }}
+                </p>
+            @endif
+            <div class="grid half mt-m gap-xl">
+                <div>
+                    <label for="password">{{ trans('auth.password') }}</label>
+                    @include('form.password', ['name' => 'password'])
+                </div>
+                <div>
+                    <label for="password-confirm">{{ trans('auth.password_confirm') }}</label>
+                    @include('form.password', ['name' => 'password-confirm'])
+                </div>
             </div>
         </div>
+
     </div>
 @endif