====== LUCY WYSIWYG Editor ====== ===== Background Info ===== With the Page Editor, you can fine-tune and edit all the web pages or sub pages from all [[scenario_types|scenario types]]. This includes: * [[download_templates|Predefined or custom landing Pages]] * [[awareness_e-learning_settings|Awareness Pages]] * Any Scripts or Style sheets The editor can only save HTML code which is compliant with W3C standard. You can always check your code with this validation service: https://validator.w3.org/. Code which is not W3C conform will not be saved by LUCY. ===== How to select a page that needs to be edited ===== The HTML pages can be edited either in the generic template section or within a campaign. If you change them in the generic template section the changes will remain for all campaigns that use that template in the future. Therefore it might be better to make the changes of a page within a campaign. This will change only the template within that specific campaign. Every page and script can be edited. To get started you must first select the page within the dropdown menu that you want to edit: {{ landing_page_sel.png?600 }} There are two editing modes: * visual editing within the editor or * editing the source code directly If you want to switch to the source code editing mode you can use one of the two available buttons: {{ landing_page_sc.png?600 }} ===== Creating new pages ===== You can create a new page by going to actions --> new. Then give your page a name and tell LUCY what type it is (this matters: if you select a "web-based" type, then the WYSIWYG editor will be missing the Trojan simulation buttons. To be on the safe side we recommend using the mixed type). {{ new_page.png?600 }} To add content to the new page you can now either: * Upload an existing page (zip) * Clone a page (click [[copy_web_page|here]] for more details) * Click on the "landing page template" link and start inserting your code manually (1st click "new file" and give your page a name. If it is the 1st page then it needs to be called index.html) {{ create_new_page.png?600 }} ===== Special LUCY Editor shortcuts ===== The LUCY Customized WYSIWYG editor allows you to insert tables, forms, objects, etc. You can also right mouse click on objects in the Preview and you will see more editing options. The editor has some **Special Buttons** which will help you to create a phishing page within minutes. {{ 35.jpg?direct&600 }} * **Insert Login Form**: Places a functional Login form on the page (you have three design samples). In case you want to place the Login form in a specific area of the webpage, you first need to press "Insert Layer". As soon as you inserted the layer click on it so the cursor appears inside the layer: {{ layer.png?600 }} Once the cursor appears you can click on "insert login form". Select the login form design you want to insert and then press ok: {{ loginselection.png?600 }} {{ 37.jpg?direct&600 }} As soon as you did that the login form will appear inside the layer, which you can still move around or change its properties within the source code. * **Insert Trackable PDF**: Enables you to upload a trackable file or use an existing dummy test PDF for tracking. {{ 38.jpg?direct&600 }} * **Insert Layer**: This is needed if you want to place a login form or any other element (e.g. image etc.) in a specific area of the webpage. Imagine the layer as something similar to a text box in Office. * **Insert Redirect** * **Insert Trojan Simulation**: Adds an download button that is linked with one of the Trojan simulations available. ===== File Manager in LUCY ===== You can upload any file or image using the build in file manager. The file manager can be accessed within the according scenario when you edit the landing page: {{ filemanager.png?600 }} Step 1: Click on "upload file or image" Step 2: Click on "browse" {{ file_m_ipl.png?600 }} Step 3: Upload your image Step 4: Click ok You can use the upload button to upload the files or simply drag and drop one or multiple files into the browser. Depending on the file type LUCY will automatically place the files in the correct directory (images are later stored in a central image repository). {{ upload_file_manager.png?600 }} ===== Form field syntax ===== LUCY is recording ALL data send back to the landing page in a form POST request. So the form action has to look like: * form action="" But in order for LUCY to apply regular expressions in a login field the login form should use a POST method and set the login action to “?login”, you also need to set the name of the login field to “login” and the name of the password field to “password”. A valid login field on LUCY where regular expressions can be applied might look like this: