OpenWhiskContact-1/index.html at master · Twanawebtech/OpenWhiskContact-1 · GitHub

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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html ng-app="ngWhisk">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Twana Daniel || IBM Bluemix - Developer Advocate Team"/>
    <meta name="description" content="Process forms without the need of backend, this is with using OpenWhisk and Angular.js only."/>
    <meta name="keywords" content="OpenWhisk, Angular.js, forms validation, form processing.">

    <link rel="shortcut icon" href="./img/favicon.png"/>
    <title>{ OpenWhisk Forms }</title>

    <!-- FontAwesome icons -->
    <link rel="stylesheet" href="//use.fontawesome.com/74dfc6cf47.css">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/emojione-awesome.css"/>
    <link rel="stylesheet" href="./css/main.css">

    <!-- ngDialog’s basic and theme CSS files -->
    <link rel="stylesheet" href="./css/ngDialogCSS/ngDialog.css">
    <link rel="stylesheet" href="./css/ngDialogCSS/ngDialog-theme-default.css">
    <link rel="stylesheet" href="./css/ngDialogCSS/ngDialog-theme-plain.css">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
</head>

<body class="home overflow-hidden">

    <!-- Top header blue line -->
    <div class="header-panel shadow-z-2">
        <div class="header-container">
            <div class="header-row">
                <div class="header01 header-logo">
                    <div class="row-picture">
                        <a href="#"><img id="about" src="./icons/bluemix_logo.svg"></a>
                    </div>
                    <div class="row-details">
                        <p class="list-group-item-text">IBM Bluemix | OpenWhisk</p>
                    </div>
                </div>
                <div class="header02">
                    <div class="social-icons">
                        <a class="icon" target="_blank" href="#" ><i class="fa fa-rss-square"></i></a>
                        <a class="icon" target="_blank" href="https://github.com/IBM-Bluemix/OpenWhiskContact" ><i class="fa fa-github"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Loading the view -->
    <div class="page-container">
        <h2>OpenWhisk Forms</h2>
        <p>Process contact form without a backend using <a href="http://openwhisk.org/" target="_blank">IBM OpenWhisk</a></p><br><br><br>
        <h4>How it works?</h4>
        <p>
            { Angular app making a post request to send the form details } <br>
            { OpenWhisk action to process the email using <a href="https://sendgrid.com/" target="_blank">SendGrid mail client</a> } <br>
            { Expose the OpenWhisk action as an API, Done! } <br>
        </p>
        <button type="button" ng-dialog="firstDialogId" ng-dialog-controller="InsideCtrl" ng-dialog-data="{{jsonData}}"
                ng-dialog-class="ngdialog-theme-default" ng-dialog-show-close="false">Submit Your Feedback
        </button><br><br><br><br><br><br>
        <h5>Learn more on
            <a class="" target="_blank" href="https://github.com/IBM-Bluemix/OpenWhiskContact" >{ GitHub <i class="fa fa-github"></i> } </a>
        </h5>
    </div>


    <div class="rowFooter">
        <footer>
            Made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://twitter.com/twanawebtech" target="_blank">{ @twanawebtech }</a>
        </footer>
    </div>


    <!-- ng-Dialog Popup -->
    <script type="text/ng-template" id="firstDialogId">
        <div class="ngdialog-message">
            <h3>Feedback</h3>
            <p ng-show="theme">Let us know how you find this code sample</p>
        </div>
        <div class="RequestForm" ng-controller="requestController">
            <form name="myForm" ng-submit="sendMail()">
                <div class="inputFormPopup">
                    <div ng-messages="myForm.myName.$error">
                        <div ng-message="required">This field is required</div>
                    </div>
                    <input type="text" name="myName" ng-model="myName" placeholder="Name *" required/><br>

                    <div ng-messages="myForm.myEmail.$error">
                        <div ng-message="required">This field is required</div>
                        <div ng-message="email">Your email address is invalid</div>
                    </div>
                    <input type="email" name="myEmail" ng-model="myEmail" placeholder="Email *" required/><br>

                    <div ng-messages="myForm.myUrl.$error">
                        <div ng-message="required">This field is required</div>
                    </div>
                    <input type="text" name="myUrl" ng-model="myUrl" placeholder="Your Website *" required/><br>

                    <textarea type="text" name="myDescription" ng-model="myDescription" placeholder="Description"
                              class="myDescription"></textarea>
                </div>

                <div class="form-group-popup">
                    <div class="ngdialog-buttons">
                        <button type="button" class="ngdialog-button ngdialog-button-cancel"
                                ng-click="closeThisDialog()">Close
                        </button>
                        <button type="submit" class="ngdialog-button ngdialog-button-primary"
                                ng-disabled="myForm.$invalid">Submit
                        </button>

                    </div>
                    <div class="messageContact" ng-show="emailSent">
                        <div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')"
                             close="closeAlert($index)" class="alert">{{alert.msg}}
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </script>
</body>

<!-- Vendor libraries: jQuery only used for Bootstrap functionality -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.4.0/ui-bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.4.0/ui-bootstrap-tpls.min.js"></script>

<!-- Loading Angular scripts-->
<script src="app/scripts/ngMessages.js"></script>
<script src="app/scripts/ngDialog.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

<script src="app/app.js"></script> <!-- Loading controllers -->
<script src="app/controllers/requestController.js"></script> <!-- Loading controllers -->

<script src="external_scripts/google-analytics.js"></script> <!-- Google analytics tracking code -->
</html>