summaryrefslogtreecommitdiff
path: root/www/templates/wizard.html
blob: a3af8b51826fd9d397088365964f3d518ee7bcb4 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<ion-view view-title="Wizard" ng-cloak cache-view="false" >

    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
    </ion-nav-buttons>


    <ion-content class="padding" overflow-scroll="false">
  
    <wizard on-finish="finishedWizard()"> 
        
        <!-- portal url -->
        <wz-step wz-title="1" canexit="exitPortal">
            <h4><i class="ion-wand"></i> Welcome to zmWizard</h4>
            <p>Configuring ZoneMinder can be a pain. Let's see if zmWizard can help.</p>

            <h4>What is your Zoneminder portal url?</h4>
            <label class="item item-input">
                <input autocapitalize="none" autocomplete="off" type="text" placeholder="typically http://server/zm" ng-model="wizard.portalurl">
            </label>

            <a class="button icon-left ion-information-circled button-clear button-dark" ng-click="toggleTip()">{{wizard.tiptext}}</a>


            <div class="wizardtip" ng-show="wizard.tipshow">
                <b>Tip: </b>Confused? You can easily find out your portal URL by noting down the url you see on your browser when accessing the ZoneMinder Console.<br/>

                <img src="img/portalurl.png" width="30%">
            </div>

            <br/>
            <button class="button button-small icon icon-right ion-chevron-right" wz-next>Next</button>
            

        </wz-step>
            
   
        <!-- auth mode -->  
        <wz-step wz-title="2"  >
            <h4>Portal Authentication</h4>
            <p>Lets talk about how you have configured authentication If you have enabled authentication, toggle this button</p>
            <ion-toggle ng-change="toggleAuth()" ng-model="wizard.useauth" ng-checked="wizard.useauth" toggle-class="toggle-calm">I use authentication</ion-toggle>

            <ion-toggle ng-show="wizard.useauth" ng-model="wizard.usezmauth" ng-checked="wizard.usezmauth" toggle-class="toggle-calm">I use ZM authentication</ion-toggle>
            
            <div ng-if="wizard.usezmauth">
                <label class="item item-input item-floating-label" >
                    <span class="input-label">user name</span>
                    <input autocapitalize="none" autocomplete="off" type="text" ng-model="wizard.zmuser" placeholder="zm auth username" >
                </label>
                <label class="item item-input item-floating-label" >
                    <span class="input-label">password</span>
                    <input type="password" ng-model="wizard.zmpassword" placeholder="zm auth password" >
                </label>
            </div>

            <ion-toggle ng-show="wizard.useauth" ng-model="wizard.usebasicauth" ng-checked="wizard.usebasicauth" toggle-class="toggle-calm">I use Basic authentication</ion-toggle>
            <label class="item item-input item-floating-label" ng-show="wizard.usebasicauth">
                <span class="input-label">user name</span>
                <input autocapitalize="none" autocomplete="off" type="text" ng-model="wizard.basicuser" placeholder="basic auth username" >
            </label>
            <label class="item item-input item-floating-label" ng-show="wizard.usebasicauth">
                <span class="input-label">password</span>
                <input type="password" ng-model="wizard.basicpassword" placeholder="basic auth password" >
            </label>


            <a class="button icon-left ion-information-circled button-clear button-dark" ng-click="toggleTip()">{{wizard.tiptext}}</a>


            <div class="wizardtip" ng-show="wizard.tipshow">
                <b>Tip: </b>Confused? <i>ZM Auth</i> is the authentication used when you enable OPT_USE_AUTH in the ZM console options screen.<br/>
                <i>Basic Auth</i> is when you configure a username and password in your webserver. If you are using LDAP authentication, its likely basic auth.
            </div>

           <br/>
            <button class="button button-small icon icon-left ion-chevron-left" wz-previous>Prev</button>
            <button class="button button-small icon icon-right ion-chevron-right" ng-click="exitAuth()">Next</button>
            
    </wz-step>
            
        
    <wz-step wz-title="3"  >
        <h4>Results of auto-detection</h4>
    
        <span ng-if="wizard.portalValidText" style="color:{{wizard.portalColor}};"><i ng-class="wizard.portalColor=='#16a085' ? 'ion-checkmark-circled':'ion-close-circled'"></i>&nbsp;{{wizard.portalValidText}}<br/></span>
        
        <span ng-if="wizard.apiValidText" style="color:{{wizard.apiColor}};"><i ng-class=" wizard.apiColor=='#16a085' ? 'ion-checkmark-circled':'ion-close-circled'"></i>&nbsp;{{wizard.apiValidText}}<br/></span>
        
        <span ng-if="wizard.streamingValidText" style="color:{{wizard.streamingColor}};"><i ng-class="wizard.streamingColor=='#16a085' ? 'ion-checkmark-circled':'ion-close-circled'"></i>&nbsp;{{wizard.streamingValidText}}<br/></span>
        
        <br/>
        <div class="wizardtip">
            zmWizard has tried its best to autodetect what it could. You could either:
            <ul class="wiz-list">
                <li>Go back to previous steps and re-do</li>
                <li>Go to the login screen with these findings auto filled in</li>
            </ul>
        </div>
        <br/><br/>
        <button class="button button-small icon icon-left ion-chevron-left" wz-previous>Prev</button>
        <button class="button button-small icon icon-right ion-chevron-right" ng-click="gotoLoginState()">Go to Login Screen</button>
    </wz-step>
        
        
</wizard>
    </ion-content>

</ion-view>